Implementation & How-To· 7 min read· By The SpideyChat Team

How to Add an AI Chatbot to a Webflow Site

Webflow has no plugin ecosystem, which makes adding a chatbot simpler than on most platforms. Here is exactly where the code goes.

Webflow is one of the easier platforms for this, precisely because it has no plugin ecosystem. There is nothing to install, nothing to keep updated, and nothing that breaks when the platform ships a change.

You paste one script tag and you are done.

The steps

  1. Get your embed code from your chatbot provider. It will look like a single <script> tag with an id attribute.
  2. In Webflow, open Site Settings.
  3. Go to the Custom Code tab.
  4. Paste the script into Footer Code, not Head Code.
  5. Save, then Publish.

That is the whole process. The widget appears on every page of the published site.

Why footer, not head

Footer Code renders immediately before the closing </body> tag. Head Code renders in <head>, before your page content exists.

A chat widget needs the page to exist before it can attach itself, and putting it in the head means it competes with your content for the browser's attention during the render that decides your loading score.

Footer is correct for essentially every chat widget.

The paid-plan requirement

Custom code needs a paid site plan. On the free webflow.io staging domain, custom code is stripped and your widget will not appear.

This catches people out regularly: the code is right, the site is published, and nothing shows. Check the plan before debugging anything else.

Adding it to one page only

Page Settings has its own Custom Code section with a Before Body tag field. Use that if you only want the widget on, say, your pricing page. Site-wide is usually the right call, though: the visitor with a question is rarely on the page you expected.

Checking it worked

Publish, open the live site in a private window, and look for the launcher. If nothing appears:

  • Confirm you are on a paid site plan
  • Confirm you published after saving. Webflow does not publish custom code changes automatically
  • Open the browser console and look for a blocked script

Before you install anything

Point a chatbot at your Webflow site first and see whether it answers your content properly. You can build one from your URL in about a minute, free, and decide afterwards.

Related: do you need a plugin to add a chatbot.

Frequently asked questions

Do I need a Webflow plugin?
No. Webflow has no plugin marketplace in the WordPress sense. You paste a script into Custom Code, which is simpler and avoids a dependency that can break on update.
Where exactly does the code go?
Site Settings, Custom Code, Footer Code. That places it before the closing body tag on every page, which is what a chat widget wants.
Does it work on a free Webflow site?
Custom code requires a paid site plan. On the free webflow.io staging domain, custom code does not run.
Will it slow my site down?
A well-built widget loads asynchronously after your content, so it should not affect your largest contentful paint. Check the script is async before you commit.

Want a 24/7 AI Employee for Your Website?

See how SpideyChat can answer customer questions, capture leads and handle enquiries while your team is offline.

No obligation. We will review your website and show you how SpideyChat could work for your business.

Keep reading

Implementation & How-To

How to Add a Chatbot to Squarespace, Wix, and Webflow

Implementation & How-To

Chatbot Not Loading on a New Domain or Staging Site

Implementation & How-To

How to Add a Chatbot to Your Mobile Site