Install on any website

Add the TalkingDot messenger to any website by pasting one script tag. This works for hand-written HTML, static site generators and server-rendered templates in PHP, Python, Ruby or Node.

The snippet

This one line is the whole installation:

<script src="https://talkingdot.com/widget.js" data-key="YOUR_WORKSPACE_KEY" async></script>

Replace YOUR_WORKSPACE_KEY with your key, or paste the ready-made snippet from Settings → Install. The script loads async, so it never blocks your page from rendering.

Where to paste it

1. Open the HTML of your page or template. Use your code editor, your hosting file manager, or wherever your site's markup lives.
2. Paste the snippet just before the closing </body> tag. It also works inside <head>. Because it's async, placement doesn't affect page speed.
3. Save and publish. Upload the file or deploy your site as usual.

A complete page looks like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Acme</title>
</head>
<body>
  <h1>Welcome to Acme</h1>

  <!-- TalkingDot messenger -->
  <script src="https://talkingdot.com/widget.js" data-key="YOUR_WORKSPACE_KEY" async></script>
</body>
</html>

Sites with many pages

Paste the snippet once in the file that every page shares, not on each page. For example:

• PHP sites: the shared footer.php (or similar) include.
• Laravel: your main Blade layout, such as resources/views/layouts/app.blade.php.
• Django or Flask: your base.html template.
• Rails: app/views/layouts/application.html.erb.
• Jekyll, Hugo or Eleventy: the base layout, such as _layouts/default.html or layouts/_default/baseof.html.

  <footer>© Acme</footer>

  <script src="https://talkingdot.com/widget.js" data-key="YOUR_WORKSPACE_KEY" async></script>
</body>
</html>

If the snippet ends up on a page twice, the second copy is ignored. Still, keep it to one copy so the script isn't downloaded twice.

Optional: identify logged-in users

If your site has accounts, set window.TalkingDotSettings before the snippet. Your team then sees who they're talking to, and the user's conversation history follows them across devices. Compute user_hash on your server with the workspace secret from Settings → Security. Never put the secret in the page. See Identity verification for how.

<script>
  window.TalkingDotSettings = {
    user_id: "42",
    email: "jane@example.com",
    name: "Jane Doe",
    user_hash: "HMAC-SHA256 of user_id, made on your server"
  };
</script>
<script src="https://talkingdot.com/widget.js" data-key="YOUR_WORKSPACE_KEY" async></script>

Verify it works

1. Open your site in a private (incognito) window. The launcher bubble appears in the bottom-right corner, or on whichever side you chose in Settings → Messenger.
2. Send a test message. It appears in your Inbox right away.
3. Check Settings → Install. It shows when the messenger was last seen on your site.

Troubleshooting

Check the browser console first

Open your browser's developer tools and look at the Console. TalkingDot: missing or invalid data-key means the key is missing or mistyped. It must be exactly 16 lowercase letters and digits, with nothing else inside the quotes. Copy it again from Settings → Install.

Domain allow-list

If Settings → Security has a domain allow-list, the messenger only loads on the domains listed there and stays hidden everywhere else, without an error. Add every domain you install on, including staging and preview domains. www. is matched automatically, and *.example.com covers all subdomains.

Content-Security-Policy

If your site sends a Content-Security-Policy header, allow https://talkingdot.com as a script, connection and image source. The messenger injects its styles into its own Shadow DOM, so style-src must also allow 'unsafe-inline'. Add these sources to your existing directives:

Content-Security-Policy: script-src 'self' https://talkingdot.com; connect-src 'self' https://talkingdot.com; img-src 'self' https://talkingdot.com; style-src 'self' 'unsafe-inline'

Caching, CDNs and minifiers

If you edited a template but don't see the snippet in the page source, you're probably looking at a cached copy. Purge your caching plugin, server cache or CDN (for example Cloudflare), then reload. Some "optimize JavaScript" features rewrite or delay scripts. If the messenger stops loading after you turn one on, exclude widget.js from it.

Ad blockers and privacy extensions

Some browser extensions block chat widgets. If the messenger works in a private window with extensions off but not in your normal browser, an extension is blocking it on your machine. Most visitors won't be affected.

It loads but stays hidden

Check the show/hide page rules and the hide-on-mobile option in Settings → Messenger. They may hide the launcher on the page you're testing.

Next steps

• JavaScript API: open the messenger from your own buttons, hide the launcher and track events.
• Identity verification: securely recognise logged-in users.
• Office hours & away mode: set expectations outside working hours.
• Chatbots: answer common questions and collect details automatically.