HomeAdd a widgetWebflow

Add an AI chat widget to Webflow

AI Chat for Webflow Sites

An AI chat agent on every page of your Webflow site from one copy-paste into Footer code. It answers from your indexed pages, and every chat carries an AI disclosure line.

Needs a Webflow plan that allows custom code: a paid Workspace or an active Site plan

Start freeAdd a widget

Free plan with no time limit, no card.

See it working

There is a live one on this page already: the chat button in the bottom corner is a Sorraia AI chat agent — ours, answering from the pages it has indexed on this site and saying so when the answer isn’t there, with the AI disclosure line every chat carries. Open it and ask it something.

How to add an AI chat widget to Webflow

Footer code, not a Code Embed, and the reason is CSS. A fixed-position element is pinned to the nearest ancestor with a transform rather than to the viewport, and Webflow Interactions animate elements with transforms. A launcher inside a Code Embed in an animated section gets trapped in that section. Footer code lands before </body>, outside every section, where nothing can capture it.

  1. In Sorraia, add the website and verify it — a DNS TXT record, or a meta tag in your homepage’s <head>. Verification is what lets you attach a widget to that site, so it comes before there is anything to paste.

  2. Save the agent, then copy the snippet from the Embed code box in the right-hand panel of the chat builder. (Chat has no install wizard — the box is the whole thing.)

  3. Click the Webflow logo in the left toolbar to open the main menu, then go to Site settings and the Custom code tab.

  4. Paste the Sorraia snippet into the Footer code field and click Save changes. Footer code lands before </body> on every page.

  5. Publish the site. Saved custom code reaches visitors only once you publish.

  6. Open the published site and look for the launcher. To see it in Preview, switch on Enable custom code there; a Site manager can make that the default with Run custom code in Preview, under Site settings → Custom code.

Where these steps come from:1234

Verifying a Webflow site

Add the DNS TXT record where the domain’s DNS lives, or paste the meta tag into Site settings → Custom code → Head code — Webflow says meta tags always go in the head — and publish.2

Who can add site-wide code on Webflow

Site-wide custom code needs a Core, Growth, Agency or Freelancer Workspace, or an active Site plan; the free Starter plan publishes only to a .webflow.io address. Only Site managers and Designers can open the custom code settings, so decide who on the client’s side looks after the snippet. The Footer code field holds up to 50,000 characters.256

Worth knowing for this one

  • Footer code applies to the whole site, with no per-page exclusion from there. For one page only, use that page’s Page settings → Custom code → Before </body> tag.2
  • The CSS behind the Footer-code advice: a fixed element’s containing block becomes the nearest ancestor with a transform, filter or perspective (or a will-change naming one of them) — exactly what animated sections carry.78
  • Testing in Preview with custom code on runs the chat on a canvas.webflow.com address rather than your domain, so check the published site before you call it done.4

What Webflow already has

Webflow’s help puts site-wide scripts in Site settings → Custom code and one-page scripts in that page’s own settings, and only Site managers and Designers can open either. That is the whole of what a chat launcher needs from Webflow. The agent is the part you bring: Sorraia’s answers from the pages it has indexed on your site, says so when the answer isn’t there, and opens every chat with an AI disclosure line.26

What’s included

  • Answers from the pages it has indexed on your site
  • Says so when the answer isn’t there
  • An AI disclosure line on every chat
  • 25 conversations a month on Free
  • Live with one copy-paste

Free plan with no time limit, no card.

More detail in the Help Center: The AI chat agent · Embedding on your website

Questions

Should the chat go in a Code Embed or in Footer code?

Footer code. Webflow Interactions animate elements with transforms, and a fixed-position launcher inside a transformed section is pinned to that section instead of the screen. Footer code sits before the closing body tag, outside every section.

How do I show the chat on one Webflow page only?

Paste the snippet into that page’s Page settings → Custom code → Before </body> tag instead of the site-wide Footer code, then publish.

I added the code but the launcher isn’t in Preview. Why?

Preview runs no custom code until you switch on Enable custom code in its bottom-left corner. A Site manager can make that the default with Run custom code in Preview, under Site settings → Custom code.

Will visitors know they are chatting with an AI?

Yes. Every chat opens with a disclosure line naming it as your business’s AI assistant, and that line can’t be switched off. The agent answers from your indexed pages and says so when the answer isn’t there.

Does the chat work on Webflow’s free Starter plan?

Not on its own. Site-wide custom code needs a Core, Growth, Agency or Freelancer Workspace, or an active Site plan on the site, so a Starter site in a free Workspace has nowhere to put the snippet.

Sources

  1. Intro to Webflow · help.webflow.com
  2. Custom code in head and body tags · help.webflow.com
  3. Preview mode · help.webflow.com
  4. Custom code in previews · help.webflow.com
  5. Choosing a Site plan · help.webflow.com
  6. Site roles and permissions · help.webflow.com
  7. Containing block (MDN) · developer.mozilla.org
  8. Interactions with GSAP · help.webflow.com
  9. Custom code embed · help.webflow.com

Each page read and checked on 20 October 2026.

Add an AI chat widget to Webflow

Build it in Sorraia, put it live on your Webflow site with one copy-paste, and change it later without touching the embed again.

Start freeAdd a widget