chatleadr Docs
Open Chatleadr

How to Add a Chatbot to a Webflow Site

Webflow has a Custom Code section in Project Settings that adds markup to every published page. The Chatleadr widget is two script tags, so that footer box is the entire installation.

Time: about ten minutes. You need: a Webflow project on a paid Site plan, which is what allows custom code on a published site, and a Chatleadr bot.

Webflow: where to paste it Project Settings Custom Code Footer Code Before </body> tag box <script>window.CHATLEADR_BOT_KEY = "…";</script> <script src="https://chat.chatleadr.com/widget/app.js"></script> Custom code runs on the published site only, not in the Designer canvas.
Where the Chatleadr snippet goes on Webflow. Paste it into the body or footer slot, not the head.

1. Set the Bot's Domain#

Open your bot in Chatleadr, go to the Setup tab, and enter the domain the site is published to in the Domain field. The bot answers on that domain, and on any other addresses recorded for it. The domain is also what the Automatic language setting reads.

If you are testing on a webflow.io staging address before connecting a custom domain, put that address in for now and change it at launch.

2. Copy Your Snippet#

In Chatleadr, open the bot and go to Channels. The Web section shows the snippet with your bot key already filled in.

Channels Website Snippet Paste a code snippet into Wix, Shopify, Squarespace or any other site. Connected Show the snippet Website Snippet Paste this just before the closing </body> tag, on every page you want the chat on. <script> window.CHATLEADR_BOT_KEY = "cl_7f3a9d21"; window.CHATLEADR_API_URL = "https://chat.chatleadr.com"; </script> <script src="https://chat.chatleadr.com/widget/app.js"></script> Copy Done
The snippet in the dashboard already contains your bot key. Copy it from there rather than typing it out.

In Webflow, open Project Settings, then Custom Code. Paste the snippet into Footer Code, which is the box labelled as going before the closing </body> tag. Save.

4. Publish#

Custom code is written into the published site. It does not run in the Designer canvas or in Preview, so the widget is expected to be missing in both. Click Publish, choose your domains, and open the published URL.

5. Check It#

  1. Open the published site in a private window.
  2. The launcher appears in the corner within a second or two.
  3. Send a message and confirm a reply comes back.
  4. In Chatleadr, the bot's conversation count goes up by one.
Step 1 Paste the snippet Before the closing body tag,on every page. Step 2 Launcher appears In the corner, within asecond of the page loading. Step 3 The counter moves Send one message. Thedashboard total goes up by one.
What a working installation looks like from the outside.

If It Does Not Appear#

Missing in the Designer or in Preview. Expected. Project-level custom code runs on the published site only.

Missing on the published site. View source and search for CHATLEADR_BOT_KEY. If it is not there, the project was saved but not published, or it was published to a different domain than the one you are looking at.

Missing on one page. A page can carry its own custom code in its settings, and Webflow puts project-level code on every page regardless, so a single missing page usually means you are looking at a stale published version. Publish again.

The launcher opens but no reply arrives. The snippet is working and the bot is not answering. Check that the bot is active, then work through my workflow is not triggering.

Common Questions#

Do I Need a Paid Webflow Plan for a Chatbot?#

Custom code on a published site is a paid Site plan feature. Webflow's pricing page is the authority on which tier that is today.

Will the Chatbot Slow My Webflow Site Down?#

The snippet sits in Footer Code and does not block rendering. It fetches its configuration after the page is interactive, so the launcher appears a moment after the rest of the page.

Does the Widget Survive Webflow Page Transitions?#

Yes for ordinary Webflow navigation, which loads a new page. If you have built a single-page interaction that replaces the document without a page load, the widget mounts once and stays with whatever survives that navigation.

Can I Add the Chatbot to One Page Only?#

Yes. Use the page's own settings rather than Project Settings, and put the snippet in that page's Before Body Tag box.

Can One Bot Serve Two Webflow Projects?#

Yes, once the second project's published address is recorded for the bot. Email support@chatleadr.com with the bot's name and that address to have it recorded. Both sites then get the same knowledge, the same workflows and one set of analytics, so two projects that need different answers are better served by two bots. See plans and pricing for how many bots each plan includes.