HomeAdd a widgetWebflow
Add an AI chat widget to Webflow
A chat agent that answers from your own content, floating in the corner of every page on Webflow — with 200 conversations a month included on the $19 plan, and a person able to take over at any point.
Free plan, no card. Paid plans start at $19 a month.
Why do it this way on Webflow
Footer code, not a Code Embed — and here the reason is CSS rather than convenience. A fixed-position element is pinned to the nearest ancestor carrying a transform, filter or will-change rather than to the viewport, and Webflow Interactions add transforms to sections routinely. A launcher inside a Code Embed nested in an animated section gets trapped in that section. Footer code lands the script as a direct child of body, where nothing can capture it.
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 this site’s own content — installed exactly the way the steps above describe. Open it and ask it something.
How to add an AI chat widget to Webflow
A launcher belongs in Footer code, which lands immediately before </body> as a direct child of <body> on every page.
Webflow words the custom-code gate as: a Core, Growth, Agency or Freelancer Workspace, or an active Site plan on the site. Publishing to your own domain is the separate gate, and that needs a Site plan — minimum Basic; the free Starter plan publishes only to a .webflow.io subdomain. Custom code is not a top-tier feature: Basic is enough. Webflow re-tiered in May 2026 and merged the CMS and Business Site plans into one called Premium, so any guide telling you to buy a “CMS plan” or a “Business plan” is naming plans that no longer exist for new purchases.
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.
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.)
Open Site settings for the site and go to the Custom code tab. Site settings is a dashboard surface — from the Designer, click the Webflow logo in the top left to get there.
Paste the Sorraia snippet into the Footer code field and click Save changes.
Click Publish and select your domain. Saving alone does nothing to the live site, and Site settings code is not visible in the Designer at all.
Open the published site and confirm the launcher appears. To check it in Preview instead, switch on Enable custom code there — or flip “Run custom code in Preview” in this same Custom code tab to make that the default.
Site settings custom code applies to the entire site and there is no per-page exclusion from there. If the widget should only appear on one page, use Page settings → Custom code → “Before </body> tag” instead.
What you get
A chat agent that answers from your own content, floating in the corner of every page on Webflow — with 200 conversations a month included on the $19 plan, and a person able to take over at any point.
200 conversations a month on the $19 plan
The monthly allowance is 25 conversations on Free, 200 on Starter at $19/month, 1,000 on Growth, 5,000 on Business and 20,000 on Enterprise. A conversation counts once when it starts, not per message, and the counter resets at the start of each UTC month.
Past the cap it keeps answering, at a price you can see
On any paid plan the agent carries on past its allowance at $15 per 100 additional conversations — or part of 100, so one conversation over the line is one $15 pack, and we would rather say that than let you discover it on an invoice. Every account also carries a ceiling on how many packs it will buy, defaulting to ten ($150 of extra exposure), and at the ceiling the widget behaves exactly as it does with overage switched off. Free does not run an overage; it stops at 25.
It says it is an AI, always
Every conversation opens with a line naming the agent as your business’s AI assistant and noting that a human can take over. That line is not a setting — the widget will not render without it. When someone from your team does take over, the status changes to say so.
It answers from your site, not from the open internet
The agent is grounded in your own content, which is why it can answer a question about your pricing or your opening hours and will not invent a policy you never wrote. If a calendar is wired up it can also take a booking mid-conversation — and it only claims it can book when one actually is.
More detail in the Help Center: The AI chat agent · Embedding on your website
Things worth knowing about Webflow
- Scripts do not execute on the Designer canvas — you get a placeholder box — and Preview does not run custom code either unless you switch on the Enable custom code toggle in the bottom-left corner. Between the two, a perfectly working widget can look broken all the way up to Publish.
- With custom code enabled in Preview, Webflow serves the site from a different origin — a {shortName}.canvas.webflow.com subdomain — rather than your own domain. Worth knowing before you conclude something is wrong: what you are testing in Preview is not the hostname your visitors will be on.
- As of August 2020, newly published Webflow sites include jQuery 3.5.1, and Webflow warns that loading another copy in custom code can conflict with it.
- Each Code Embed and each custom-code field caps at 50,000 characters and the limit cannot be raised. A loader snippet is a few hundred characters, so this only bites if you paste an entire inlined bundle.
- For a floating launcher, prefer Footer code over a Code Embed: any ancestor element carrying a transform, filter, perspective or will-change becomes the containing block for fixed-position descendants, and Webflow Interactions add transforms routinely — which would pin the launcher inside that div instead of the viewport.
Questions
What happens when I hit the monthly conversation limit?
On a paid plan, nothing visible: the agent keeps answering and the extra conversations bill at $15 per 100 — rounded up to the next pack — capped by a per-account pack ceiling you control, ten by default. On Free it stops starting new conversations for the rest of the month, and the widget degrades rather than vanishing: the panel still opens, the disclosure line corrects itself to say the assistant is offline, the message box is disabled, and your WhatsApp and email handoffs are surfaced instead. A conversation already in progress is never cut off. The visitor is never shown your plan, your usage, or the reason.
Will visitors know they are talking to an AI?
Yes, by design. The disclosure line is always rendered — it names your business, says “AI assistant”, and tells the visitor a human can step in — and it cannot be switched off in the builder. If a teammate takes the conversation over, the widget stops describing itself as the AI and says the team is live.
Can a person take over a conversation?
Yes, and the visitor is told both times. Pick up any live conversation from the Conversations page and the widget posts “A team member has joined the conversation.” and switches its status from “AI assistant · replies instantly” to “Live · with the team”. Hand it back and it says so. If whoever took over walks away, the conversation returns to the AI on its own after about ten idle minutes rather than leaving the visitor waiting on someone who has gone.
Which Webflow plan do I need?
To run the widget on your own domain, a Basic Site plan or higher. Webflow gates custom code on having a Core, Growth, Agency or Freelancer Workspace or an active Site plan; the custom domain is the separate thing a Site plan buys, and the free Starter Site plan publishes only to a .webflow.io subdomain. Note that Webflow merged the old CMS and Business plans into Premium in May 2026 — you do not need Premium for this.
The embed shows an empty grey box, and Preview does not help. Did I do it wrong?
No — two separate Webflow behaviours are stacking up. Script tags never execute on the Designer canvas, so you get a placeholder there by design. And Preview does not run custom code by default: once you are in preview mode, click the Enable custom code toggle in the bottom-left corner, or turn on “Run custom code in Preview” in Site settings → Custom code so it stays on. Publishing and opening the live URL always shows the real thing.
Add an AI chat widget to Webflow
Build it in Sorraia, paste one line into your Webflow site, and change it later without touching the embed again.