Add an AI Chatbot to Your Webflow Site

What connecting Webflow gets you

Webflow gives you a dedicated custom-code area built for exactly this, so adding an AI support agent is a matter of dropping the snippet in and publishing. Once it's live it loads across the whole site as a chat bubble in the bottom-right, with no separate app and nothing to maintain inside the Designer.

Because Webflow keeps the published site and the Designer separate, the agent lives on the site your visitors actually see, which is worth remembering when you go to test it.

Where the snippet goes

The snippet goes into Project Settings — called Site Settings in some projects — under Custom Code, in the Footer Code box, then Save Changes. The Footer Code box loads the script before the closing </body> tag, which is where the widget expects to be, and it applies to every published page in one place.

Before you start

You'll need access to your Webflow project settings and your embed snippet from the Install tab, which comes with your chatbot id already filled in. If you don't have a workspace yet, create one free at app.evoriqa.com. No credit card needed.

Publishing is what makes it live

The one Webflow-specific thing to remember: custom code runs on the published site, not in the Designer or the preview. So after you paste the snippet and Save Changes, you have to Publish before the agent appears anywhere. If you check the Designer and see nothing, that's expected. It isn't a sign anything is broken.

Want it on just one page?

If you'd rather load the agent on a single page than site-wide, use that page's own Settings → Custom Code box instead of the project-wide Footer Code box. Everything about the snippet stays the same; only the scope changes, from the whole site down to the one page.

Confirming it's live

Open your published URL and look for the chat bubble in the bottom-right, then click it and ask a question to confirm it responds. If it isn't there, the most common reason on Webflow is simply that the site hasn't been republished since the code was added.

Where it loads on the page

You don't have to position the snippet yourself: the Footer Code box loads whatever you put in it just before the closing </body> tag, which is the spot the widget is built for. That's why pasting into the Footer Code box is all that's needed. There's no wrapper to add and no placement to get right, and it applies to every published page from that one box.

Common questions

Does the Footer Code box load it in the right place? Yes. It loads before the closing </body> tag, which is where the widget expects to be, so you don't need to position the snippet yourself.

Why don't I see the widget in the Designer? Because custom code only runs on the published site. The Designer and its preview don't execute it, so you'll only see the bubble on the live URL.

Site-wide or one page? The Footer Code box in Project/Site Settings is site-wide; a single page's own Custom Code box scopes it to that page. Pick based on where you want the agent to appear.

I published and still don't see it. What now? Re-open the live URL in a fresh tab and confirm you published after adding the snippet; an unpublished change is the usual cause.

Webflow-specific limits

Because custom code only executes on the published site, testing in the Designer will never show the widget, a point worth knowing before you assume something's broken and start re-pasting the snippet.