Skip to main content
How to Add an AI Chatbot to Your Webflow Site

How to Add an AI Chatbot to Your Webflow Site

Add a Webflow chatbot with one snippet in Project Settings: train it on the site's pages, then paste the code into the site-wide footer code slot.

Jul 24, 20266 min readAskvo Team

Webflow sites are usually built by a designer or agency for a small-business client, which means the person who'd normally answer a visitor's question isn't the one maintaining the site day to day. A Webflow chatbot trained on the client's own pages handles the routine questions without anyone touching the CMS. This guide covers training the bot and the correct custom-code slot to drop the snippet into: site-wide, not page-by-page.

One thing to confirm before you start

Custom code is a paid-plan feature in Webflow, and isn't available on a free Starter site. If the client's site is still on Starter, you'll need at least Webflow's entry-level paid Site plan before the code slots described below even appear in Project Settings.

No Webflow app or Marketplace add-on required

Askvo doesn't ship a Webflow-specific integration because it doesn't need one. The bot runs on Askvo's servers; the site loads one script and a custom element through Webflow's own custom-code feature. Same snippet as WordPress, Wix, or any hand-coded site. See what an AI chatbot for your website actually does for the broader picture if you're scoping this for a client.

Step 1: Train the bot on the site's content

  1. Create a free Askvo account for the client (or your agency). The Free plan includes one chatbot, no card required.
  2. Paste the live site's URL. The crawler reads the published pages and builds the bot's knowledge base from them. Re-crawl after any CMS update or new page goes live.
  3. Add what the crawler can't reach. Gated PDFs, pricing sheets, internal policies. Upload documents or add direct Q&A pairs; see how to train a chatbot on your own data.
  4. Test it in the dashboard before handing it off. In strict mode it only answers from the site's content and says so plainly when it doesn't know something.

Step 2: Get the embed snippet

From the bot's install page in the Askvo dashboard, copy the snippet: a custom element plus two script tags. Match the widget color to the site's brand, and on Business or Agency, decide whether to turn on lead capture.

Step 3: Add it to Project Settings, not Page Settings

  1. In the Webflow Designer, open Project Settings (the gear icon, not a single page's settings).
  2. Go to the Custom Code tab.
  3. Paste the Askvo snippet into the Footer Code box, the "before </body>" slot.
  4. Click Save Changes, then publish the site. Custom code only takes effect after a publish, even in the Designer's own preview.

Project Settings applies site-wide, across every page of the project. Page Settings has an identical-looking Footer Code box, but anything pasted there only runs on that one page, which is easy to mix up if you're used to per-page tracking snippets. A chat widget needs the site-wide slot.

Step 4: Verify before you call it done

  • Confirm you republished after saving. Designer preview and the live site don't always reflect custom code the same way until you publish.
  • Check the widget on several pages, including any CMS collection template pages.
  • Ask it a real question and confirm the reply streams in with a source citation.
  • Test "talk to a human" and confirm the conversation reaches the Askvo dashboard.
  • Ask something it can't know and confirm it declines gracefully instead of guessing.

Keeping answers accurate as the site changes

Re-crawl after CMS updates or new pages ship. Webflow sites built on CMS Collections change more often than static pages, so this matters more here than on a simple brochure site. Check the Unanswered Questions report regularly. If lead capture is part of the brief, see the chatbot lead generation guide. Compare plans on pricing.

Frequently asked questions

Project Settings or Page Settings: which one do I use?

Project Settings > Custom Code > Footer Code. That applies to every page. Page Settings has a similarly named box, but it only affects the single page you're editing, the wrong choice for a widget that needs to appear everywhere.

Why isn't the widget showing after I saved the custom code?

Custom code changes need a publish to go live, not just a save in the Designer. Republish the site and check again.

Does this work with Webflow's CMS Collection pages?

Yes. Project Settings custom code runs across static pages and CMS-driven pages alike, since it's injected at the site level, not per-template.

Do I need a paid Webflow plan?

Yes. Custom code isn't available on a free Starter site, so you'll need at least Webflow's basic paid Site plan.

Try it on your own Webflow site

Train a free chatbot on your content, then paste the snippet — free, no credit card.

Get Started Free

Other platforms

All integrations