How to add an AI chatbot to Webflow

You can add an AI chatbot to Webflow by pasting one snippet into your site's footer code and publishing. The chatbot answers visitors from your own documents (product information, pricing, FAQ, policies) and appears as a chat bubble on every page. This guide covers the site-wide install, page-level options and an inline embed.

What do you need before you start?

• A Webflow site on a paid site plan, which Webflow requires for site-wide custom code.
• Designer or admin access to the site's settings.
• Your documents: help articles, FAQ, pricing, policies, product sheets.
• A free InstantKnowledgeBot account: sign up.

Step 1: How do you create the chatbot?

1. In InstantKnowledgeBot, click New bot.
2. Choose a template, such as SaaS help desk for a software product, or start blank. See all templates.
3. Import your Webflow site from its URL or sitemap, upload your documents (PDF, DOCX, TXT, Markdown, CSV, HTML or JSON, up to 50 MB each) or paste text.
4. Set the name, accent color and welcome message.
5. Test in the Test tab.

Step 2: How do you copy the snippet?

Open Embed & share, choose Chat bubble, and copy:

<script src="https://instantknowledgebot.com/widget.js" data-bot="YOUR_BOT_ID" defer></script>

Step 3: How do you add footer code in Webflow?

1. Open your project and go to Site settings.
2. Open the Custom code tab.
3. Paste the snippet into Footer code (the field that's added before </body>).
4. Click Save changes.
5. Publish your site to your domain (and staging, if you use it).

Visit the published site and refresh. The bubble appears in the bottom corner. Custom code doesn't run inside the Designer canvas, so always check the live site.

How do you add the chatbot to one Webflow page?

Bubble on one page only: open the page's settings (the gear icon in the Pages panel), scroll to Custom code, and paste the snippet into Before </body> tag. Save and publish. Don't also keep it in the site-wide footer, or it loads twice.

Inline chat on a page:

1. Copy the Inline iframe code from Embed & share.
2. In the Designer, drag an Embed element (from the Add panel's Components section) onto the canvas where the chat should go.
3. Paste the iframe code and click Save & Close.
4. Give the Embed's parent a height of at least 600 pixels on desktop.
5. Publish.

Inline embeds suit help centers, docs portals and contact pages. More tips: embed a chatbot with an iframe or share link.

How do you fix common Webflow problems?

How do you choose between bubble and inline?

• Bubble (site-wide): best for marketing sites. Visitors can ask from any page, including pricing and features pages where questions come up.
• Inline: best for a dedicated support or docs page, where the chat is the main content.
• Both: same bot, same knowledge and one set of analytics.

For a software product, pairing the site-wide bubble with an inline chat on your docs home works well; see the SaaS support chatbot playbook.

What should you set up next?

• Starter questions (up to six) that visitors can tap, such as "How does pricing work?"
• A fallback message, for example "I don't have that in my notes. Email support@yourcompany.com."
• Lead capture (Pro and Agency, and during the free 14-day Pro trial) to collect demo or sales requests: set up chatbot lead capture.
• Knowledge gaps review each week for the first month.

The free plan includes one bot and 100 hosted AI messages a month; see pricing for more. If you're hand-coding instead, follow the plain HTML guide.

Does the chatbot affect Webflow performance?

The snippet loads with defer, so it doesn't block your page from rendering, and the chat itself opens in an isolated panel only when a visitor clicks the bubble. Your Webflow interactions, styles and layout are unaffected. If you run performance audits, you'll see one small script from instantknowledgebot.com.

What should a Webflow site's chatbot know?

Webflow sites are often marketing sites for software, agencies and startups. Useful documents:

• Product overview and feature descriptions.
• Pricing and plan comparison, written out in text.
• Help center or docs exports.
• Security, privacy and terms summaries, which buyers often ask about.
• Company and contact information.

Keep the language consistent with your site, so plan and feature names match what visitors see on the page.

How do you write starter questions for a Webflow marketing site?

Starter questions are buttons visitors can tap (up to six). On a marketing site, pick the questions that move people toward signing up:

• "How does pricing work?"
• "Is there a free trial?"
• "Which integrations do you support?"
• "How is my data protected?"

Make sure each one is answered clearly in your documents, so the first impression is a good answer.

Can you use the chatbot on a Webflow staging domain?

Yes. If you publish to your webflow.io staging domain, the footer code runs there too, which is handy for testing before you publish to your custom domain. The bot's overview lists the sites where the bot has been loaded, so you'll see both domains. Conversations from staging count toward your message allowance like any other, so keep testing proportionate.