TalkingDot
Start free
  1. Docs
  2. Install

Install on Webflow

Add the TalkingDot messenger to a Webflow site by pasting your snippet into the site-wide Footer code, then publishing. It takes about two minutes.

Before you start: copy your snippet from Settings → Install in your TalkingDot dashboard. It contains your workspace key and looks like this:

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

Webflow plan requirements

Webflow only lets you add site-wide and page-level custom code when the site has a paid Site plan, or belongs to a paid Workspace plan. Webflow's help center currently lists Core, Growth, Agency and Freelancer Workspaces. Sites without a paid plan can't use the custom code fields. Webflow's plans change, so check its "Custom code in head and body tags" article for the current rules.

No paid plan yet? Link to your hosted chat page instead: https://talkingdot.com/chat/YOUR_WORKSPACE_KEY. Use it as the URL of a button or navbar link, for example "Chat with us".

Add the snippet site-wide

  1. Open Site settings. From your Webflow dashboard, open the site's Site settings. In the Designer, you can get there from the Webflow menu in the top-left corner.
  2. Go to the Custom code tab.
  3. Paste your snippet into Footer code. Webflow places footer code just before the closing </body> tag on every page. Leave Head code as it is.
  4. Click Save changes.
  5. Publish your site. Custom code only goes live when you publish. Publish to your custom domain, your webflow.io staging domain, or both.

Alternative: add it to individual pages

To show the messenger on only a few pages, add the snippet in Page settings instead:

  1. In the Designer, open the Pages panel and click the gear icon next to the page.
  2. Scroll to Custom code and paste your snippet into the Before </body> tag field.
  3. Save, then publish. Repeat for each page, or for a CMS template page to cover every item in a collection.

Don't use both. If the snippet is in the site-wide Footer code, leave the page fields empty. To limit where the launcher appears without touching Webflow again, use the show/hide page rules in Settings → Messenger.

Verify it works

  1. Open the published site in a private window, on your custom domain or your webflow.io address. Don't test inside the Designer canvas.
  2. Look for the launcher bubble in the bottom-right corner, or on whichever side you chose in Settings → Messenger.
  3. Send a test message. It appears in your TalkingDot Inbox, and Settings → Install shows when the messenger was last seen on your site.

Troubleshooting

  • Custom code fields are locked: the site needs a paid Site plan or a paid Workspace. See plan requirements.
  • Saved but not showing: you probably haven't published since adding the code. Publish again, choosing the domain you're testing on.
  • Works on webflow.io but not your domain (or the other way round): if you set a domain allow-list in Settings → Security, add both your custom domain and your-site.webflow.io. The messenger stays hidden on domains that aren't listed.
  • Invalid key: the browser console shows TalkingDot: missing or invalid data-key. Copy the snippet again from Settings → Install.

Next steps

Last updated October 4, 2026 Something unclear? Tell us