# Add an AI chatbot to Webflow.

Install WebotX on Webflow using Site settings → Custom code → Footer code. Save the widget script and publish the site. Confirm your Webflow site or Workspace has custom-code access, then test the assistant on the domain allowed in your WebotX workspace.

Canonical: https://webotx.com/platforms/webflow
Updated: 2026-11-05

## Choose site-wide Footer code

Check that your Webflow site or Workspace has access to custom code. Use the site-level Footer code field when the same assistant should serve your whole website. An individual page's code field or an Embed element has a narrower placement.

For a CMS site, decide which published information should inform answers. A script in your layout does not make every CMS item available as approved knowledge. Review which pages were captured in WebotX, then include and approve the useful ones.

## Review Webflow pages before making answers public

Capture your published Webflow website in a WebotX workspace and check the pages actually available for review. Approve the business overview and at least one included page after checking the summaries. Use Live simulator to test a CMS-derived fact and confirm the source points to the intended published page.

Open Install widget, publish the assistant, and add the exact domain that will host the published site. A staging hostname and a custom domain need deliberate origin configuration if you intend to use both. Copy the matching workspace script before editing Webflow's site-level Footer code.

![Install widget screen with publishing requirements and the Allowed widget origins field](https://webotx.com/docs/screenshots/example-install-widget.jpg)

Install widget brings together publishing checks and allowed origins. In this example, publishing is still unavailable because the overview needs approval.

- [Review the knowledge approval workflow](https://webotx.com/docs/knowledge)

## Save the script and publish in Webflow

Webflow documents the site-wide Footer code field in its custom-code guide. Its code effects must be published before visitors can use them.

1. Open Site settings → Custom code for the website you are publishing.
2. Paste the complete WebotX widget script into Footer code.
3. Save changes, then publish the site to the intended domain.
4. Open a published page and confirm its final origin is allowed in WebotX.

## The Webflow widget script

Copy your generated WebotX script into Footer code without replacing it with the illustrative placeholder below. Review existing page-level code and Embed elements so the site-level snippet does not create a second widget installation.

Saving and publishing Webflow makes the loader available to visitors. Approval of captured sources, changes to the greeting, and handling conversations happen separately in the WebotX workspace assigned to this site.

```html
<script
  src="https://webotx.com/widget.js"
  data-webotx="YOUR_WIDGET_KEY"
  async>
</script>
```

## Test the custom domain and CMS pages

Check the homepage, a CMS detail page, and the mobile navigation. If you use both a staging hostname and a custom domain, deliberately decide which origins should run the assistant. Success on one domain does not demonstrate that the other is configured.

Ask about a fact on a published, approved source page. Check its link and test an enquiry that needs a person. After changing CMS content or publishing a redesigned site, review the approved answers as well as the widget placement.

- Publish after saving Footer code.
- Check that page-specific code does not add a second installation.
- Keep each client's widget key with the correct website when working across projects.

## Troubleshoot Webflow setup

For Webflow, compare saved code with the published domain and site version. A CMS answer also depends on the source that was captured and approved, so check content availability separately from whether Footer code loaded.

| What you see | What to check |
| --- | --- |
| Saved code but no public widget | Publish the Webflow site after saving the site-level code. |
| Works on staging, not the custom domain | Allow the custom domain's exact origin and check the published version. |
| CMS information is missing from replies | Check that the relevant public pages were captured, included, and approved in WebotX. |

- [Open the complete troubleshooting guide](https://webotx.com/docs/troubleshooting)

## Webflow: common questions

### Should I use a Webflow Embed element or Footer code?

Use site-wide Footer code for the floating widget described here. A page Embed element is a separate placement and can create an incomplete or duplicate installation.

### Do I need to publish after adding WebotX in Webflow?

Yes. Save the Footer code and publish the site before testing the visitor-facing installation.

### Can an agency manage Webflow assistants for several clients?

Use a separate WebotX workspace for each website and install that workspace's script on the matching site. Multiple workspaces and team access depend on the account's plan allowances.

## Official platform documentation

Check the platform's current controls and plan requirements alongside this guide.

- [Webflow: custom code in head and body tags](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags)

## Continue with the next step

- [Chatbots for agencies and multiple websites](https://webotx.com/use-cases/agencies)
- [Website lead generation workflow](https://webotx.com/use-cases/lead-generation)

## Support

Email: [support@webotx.com](mailto:support@webotx.com)