First, copy your embed code from Website under Connect. See Turn the widget on and copy your code.
Steps
- In the Webflow Designer, select the gear icon (Project Settings) in the top left.
- Go to the Custom Code tab.
- Paste the embed code into the Head Code field.
- Select Save Changes, then Publish your site.
The publish step is the one people forget. Saving in Project Settings changes nothing on your live site until you publish.
Where to publish
When you publish, Webflow asks which domains to publish to. Tick your real domain, not only the .webflow.io staging address, or the bubble will appear on staging and nowhere else.
Site wide, not per page
Webflow also has per page custom code under each page’s settings. Use the project level Head Code so the widget covers your whole site with one paste.
Check it worked
Open your published site in a private browsing window and look at the bottom right.
The Webflow Designer preview does not run custom code, so the widget will never appear there. Always test on the published site.
If it does not appear
Confirm you published to the right domain, then work through The chat bubble is not showing on my site.