To add an Agentkit chatbot to Webflow, copy both generated script tags from Channels → Website embed → Chat widget. Put them in Webflow's sitewide Footer code or one page's Before </body> field, then publish. Check the published page and ask a question whose answer you already know.
Agentkit's current code includes a small queue bootstrap followed by the widget loader, with your chatbot ID and current script URL. Copy it as a unit from your own dashboard.
Check access before you start
Webflow's custom-code rules require a Core, Growth, Agency, or Freelancer Workspace, or an active Site plan. A Site manager or Designer must add the code. If you cannot add custom code, check the plan and your role before changing the chatbot. Webflow does not guarantee third-party custom code will work or provide direct troubleshooting for it.
You also need an Agentkit chatbot with Chat widget enabled. Create one, add a current website source or approved Q&A answers, and test a few questions in the playground. Check the answers before inviting visitors.
If you add a Webflow URL as a website source, check what Agentkit actually indexed. A crawl or sitemap can discover multiple pages, but excluded paths, inaccessible content, and extraction failures can leave gaps. The website-source guide explains how to inspect and narrow the crawl. Add an exact Q&A source for a policy answer that needs deliberate wording.
Put the code in one Webflow location
For a widget on every page:
- Open your chatbot's Channels → Website embed → Chat widget page in Agentkit. Enable the channel and copy the entire generated code block, including both script tags.
- In Webflow, open Site settings → Custom code. Paste the code into Footer code, which Webflow inserts before the closing
</body>tag. - Save changes and publish to the domain you intend to test. Saving the field alone does not update the visitor site.
For a widget on one page, leave Site settings empty. In the Webflow Designer, open the page's Page settings → Custom code → Before </body> tag, paste both tags, save, and publish. Repeat only on pages that need the widget. Webflow inserts page code after site code, so keep the snippet in one place to make changes and troubleshooting easier.
The Webflow installation guide has a shorter version of these steps.
Verify the published page
Open the published *.webflow.io domain or your custom domain in a fresh tab. Webflow says custom code may run in Designer preview, but visitors will not receive a saved change until you publish. Test the actual domain visitors use.
Use this acceptance check before inviting traffic:
| Check | Expected result |
|---|---|
| Page source | The queue-bootstrap tag and widget-loader tag from the generated code, installed in one place |
| Widget | The launcher opens on the published desktop and mobile pages where you placed it |
| Known answer | A question about approved content returns the intended answer |
| Domain | The staging and custom domains you test are allowed if you enabled domain restrictions |
For example, a services site might test, "Do you offer Saturday appointments?" against an approved hours page. If the answer is missing or wrong, fix the source or add an exact Q&A answer and repeat the test. The presence of a chat bubble only proves that the widget rendered.
If the launcher is absent, inspect the published page source for both tags, confirm that Chat widget is enabled, and check the browser's failed network requests. If you cannot add custom code, return to Webflow's plan and role requirements. If you pasted the snippet in both Site and Page settings, remove one copy and republish. If the launcher opens but the answer fails, check the chatbot's sources and allowed domains before changing Webflow code.
After a successful install, look at the first real questions and correct source gaps. Recheck when you change a Webflow page or move between staging and your custom domain. For a panel inside page content instead of a floating launcher, use Agentkit's separate iframe channel.
