How to Add AI Customer Support to Your Webflow Site
This guide adds your ChatterEase AI agent to a Webflow site using the Footer code setting. One paste covers every page, and it goes live when you publish.
- Takes about 5 minutes
- Copy and paste, no coding
- Free plan, no card needed
Before you start
Check you have these ready. It saves a trip back halfway through.
- A ChatterEase account. You start on the Free plan, and you do not need a card to start.
- An AI agent trained on your own content, such as your website pages or files (PDF, Word, text). Ask it a few test questions in the dashboard first, so you know the answers are right before visitors see it.
- Admin access to your Webflow site, so you can add code and publish changes.
- A paid Webflow Site plan. Custom code is not available on the free Starter site.
Not set up yet? See the plans and prices, then follow the quick start guide to create your AI agent and train it on your website.
How to add ChatterEase to Webflow, step by step
Step 1: Copy your embed code from ChatterEase
Log in to ChatterEase and go to Dashboard, then AI agents. Open the agent you want on your site and click the Embed tab. Copy the code under "Embed with a widget script". It already has your agent ID in it.
<script async src="https://chatterease.com/embed/YOUR_AGENT_ID/widget.js"></script>Tip: The code above is an example. Copy yours from the Embed tab, because it has your own agent ID where this one says YOUR_AGENT_ID.
Step 2: Open Site settings
From your Webflow dashboard, open Site settings for your site. Then go to the Custom code tab.
Step 3: Paste the script into Footer code
Paste your ChatterEase script into the Footer code box. Webflow adds this code before the closing </body> tag on every page. Click Save.
Tip: Use Footer code, not Head code. That way your page content loads first.
Step 4: Publish your site
Publish the site, and make sure your custom domain is ticked in the publish options. Webflow only adds custom code to the published site, not to the Designer.
Step 5: Check that it works
Open your live site in a private or incognito window, so you see it the way a new visitor does. Look for the ChatterEase launcher in the bottom-right corner (or bottom-left, if you moved it in your agent's settings). Click it and ask a question your pages answer, like your opening hours or your returns policy.
Let an AI assistant add it for you
If Webflow has an AI assistant built in, or you use ChatGPT, Claude or Gemini, you can hand this job to it. Some assistants can make the change for you; others will tell you exactly where to click. Either way, the prompt below keeps it to one small change.
- 1. In your ChatterEase dashboard, open AI agents, pick your agent and go to the Embed tab. Copy the embed code.
- 2. Paste it into the box below. Your real code goes into the prompt in place of YOUR_AGENT_ID.
- 3. Copy the prompt and paste it into your AI assistant. Check its answer before you apply any change.
- 4. Open your live site in a private window and ask the AI agent a question to make sure it works.
Find it in your dashboard: AI agents, open your agent, then the Embed tab. We put it into the prompt for you. Nothing is sent anywhere.
Leave this empty and the prompt keeps YOUR_AGENT_ID. Replace it with your real code before you send it.
I want to add the ChatterEase chat widget to my Webflow website. Please add the code below for me. If you can't make the change yourself, tell me exactly where to click and what to paste. The code: <script async src="https://chatterease.com/embed/YOUR_AGENT_ID/widget.js"></script> What I need: 1. Add it to Site settings > Custom code > Footer code, save, then publish the site. It only runs on the published site, not in the Designer. 2. Load it on every page of the site, once. If this script is already there, don't add it again. 3. Paste it exactly as it is. Keep the async attribute and don't change the URL. 4. Don't change, move or delete any other code, theme settings or content. 5. When you're done, tell me what you changed and where, so I can undo it later. 6. Tell me how to check it works: open the live site in a private window and look for the chat button in the bottom corner. If my plan or my permissions don't allow custom code, tell me what I need instead of trying a workaround.
The prompt asks the assistant not to touch anything else and to tell you what it changed, so you can undo it. If it can't add custom code on your Webflow plan, it should say so; the steps above still work.
If the widget does not show up
Work down this list. Most problems on Webflow come from one of these, and each one takes a minute to check.
You are checking in the Designer
Custom code does not run in the Webflow Designer. Open your published site in a private window instead.
You saved but did not publish
Saving the code is not enough. Publish the site again, and check your custom domain is selected, not only the webflow.io address.
Your site is on the free Starter plan
Custom code needs a paid Site plan. Add one to the site, then paste the code again.
It only shows on one page
The script may be in one page's custom code instead of the site-wide Footer code. Move it to Site settings, then Custom code, then Footer code, and publish.
Your site has a Content-Security-Policy
Some sites, security plugins and hosts send a Content-Security-Policy header that blocks outside scripts. It needs to allow https://chatterease.com in script-src (for the script) and in frame-src (for the chat window, which opens in a frame). If you open your browser's developer console, a blocked script shows up as a red error that mentions the policy.
An ad blocker or privacy extension in your own browser
Some blockers hide chat launchers. Try a private window with extensions turned off, a different browser, or your phone on mobile data.
The launcher shows, but the agent does not answer
Open the agent in your ChatterEase dashboard and check it says Active, not Paused. A paused agent shows as offline to visitors. Also make sure it has finished training on at least one source.
Still stuck? The ChatterEase docs cover setup in more detail, or book a demo and ask us about your setup.
Tips for Webflow
Train it on your CMS pages too
Give ChatterEase your site address and it reads your published pages, including CMS pages like blog posts, services and case studies. Start with the pages people ask about most: pricing, services, FAQ and contact.
Update it after you publish new content
When you publish new CMS items or change a page, open the Train tab and click Update now on your website source. On Growth and Pro you can switch on Auto-update to have ChatterEase refresh it on a schedule.
Use page-level code for a single page
If you only want the launcher on one page, such as a landing page, paste the script into that page's own custom code (the before </body> tag box in its page settings) instead of the site-wide Footer code.
Collect leads and hand off to a person
Every plan lets a visitor ask for a person through a contact form. On Growth and Pro you can also turn on a lead capture form, a greeting bubble beside the launcher, and an email alert when someone asks for a person.
Lead capture, the greeting bubble and Auto-update come with Growth and Pro. Compare plans.
Why Webflow sites use ChatterEase
- One paste in Site settings covers every page, including new ones
- No Webflow app or extra tool to maintain
- Footer placement, so your page content loads first
- Learns from your CMS pages as well as static pages
- Stays in place through redesigns, because it sits outside the design
- Opens full screen on phones, so it is easy to use on mobile
Questions about ChatterEase on Webflow
No. Footer code in Site settings applies to every page on the site, including pages you publish later.
Custom code only runs on the published site. Publish, then open your live domain in a private window to check.
No. Custom code needs a paid Webflow Site plan. It is not available on the free Starter site.
The script loads with the async attribute from the footer, so the browser keeps building your page while it downloads. The chat window runs in its own frame, separate from your site's code.
Yes. Leave the site-wide Footer code empty and paste the script into the custom code box in the page settings of each page where you want it, then publish.
Yes. Your CMS pages are normal published pages, so ChatterEase can read them when you train it on your site address. Update the source after you publish new items.
Delete the script from Site settings, then Custom code, then Footer code. Save and publish the site again.
Common on Webflow
What to train your AI agent on first, by type of business.
Ready to add ChatterEase to your Webflow site?
Start on the Free plan. No card needed.