How to Add an AI Chatbot to Your Webflow Site

Webflow sites look polished, load fast, and give you precise design control. But they do not come with built-in AI chat. If you want a chatbot that actually understands your content and can hold real conversations with visitors, you need to add one yourself.

The good news: adding an AI chatbot to Webflow takes about 20 minutes and requires zero code beyond pasting a single script tag. You create the chatbot, train it on your site content, and add it to Webflow through the Custom Code settings. It works on every page, matches your design, and starts answering visitor questions immediately.

This guide covers the full process: creating and training the chatbot, embedding it in Webflow, customizing the appearance, and configuring it for the best results.

Webflow Chatbot Options Compared

Before diving into the setup, here is how the main approaches to adding chat functionality to Webflow compare.

If you need a chat widget where a human team responds in real time, a live chat tool like Intercom is the right choice. If you want an AI-powered assistant that answers questions automatically, trained on your actual site content, an AI chatbot is the better fit. Most Webflow site owners want the latter -- a self-service assistant that handles visitor questions without requiring staffing.

Step 1: Create Your Chatbot

Start by creating a chatbot in Agentkit. You need a free account.

1. Go to Agentkit and sign up.
2. Create a new chatbot and give it a name that reflects its purpose (e.g., "Website Assistant" or your brand name).
3. Choose an AI model. GPT-4o is a strong default. You have a range of models to choose from across OpenAI, Anthropic (Claude), and Google (Gemini).

Step 2: Train on Your Webflow Site Content

This is the step that makes the chatbot genuinely useful. You are giving it your actual website content so it can answer visitor questions accurately.

Add Your Website URL

1. In the Agentkit dashboard, go to your chatbot's Sources page.
2. Click Add Source and choose Website.
3. Enter your Webflow site URL (e.g., https://yoursite.webflow.io or your custom domain https://yoursite.com).
4. The crawler follows links from your main URL and indexes all accessible pages: your homepage, about page, services pages, portfolio, blog posts, FAQ, pricing, and any other linked content.

For Webflow sites that use interactions, animations, or dynamically loaded content, the Agentkit crawler uses Firecrawl to render JavaScript before indexing. This ensures that content loaded via Webflow interactions is captured accurately.

Add Q&A Pairs for Key Topics

While the website crawl captures your general content, Q&A pairs give you precise control over specific answers. Create pairs for your most important visitor questions:

Q&A pairs take priority over crawled content, so they are your tool for ensuring the chatbot says exactly what you want on critical topics.

Upload Documents (Optional)

If you have resources that are not published on your Webflow site -- case studies in PDF format, service specification documents, pricing sheets -- upload them as document sources. The chatbot will use this content alongside your website data to answer questions.

Test in the Playground

Before adding the chatbot to your live site, test it in the Agentkit playground.

Ask the questions your visitors typically ask:

• "What services do you offer?"
• "How much does it cost?"
• "How do I get started?"
• "Do you work with companies in [industry]?"
• "What is your refund policy?"

If any answer is wrong, incomplete, or poorly worded, adjust your training data. Add or update Q&A pairs, add more text snippets, or refine your website source to include specific pages you may have missed.

Step 3: Customize the Widget Appearance

Before embedding, configure the chatbot widget to match your Webflow site's design.

In the Agentkit dashboard, go to your chatbot's Settings:

Color theme. Set the primary color to match your brand. Use the exact hex code from your Webflow style guide. The chatbot bubble, header, and send button all use this color.

Position. Choose bottom-right (default and most common) or bottom-left. Pick the side that does not conflict with other floating elements on your Webflow site.

Welcome message. Write a message that matches your brand voice and sets clear expectations:

• For a services business: "Hi, I can answer questions about our services, pricing, and process. What can I help you with?"
• For a SaaS product: "Welcome! Ask me anything about our product, features, or pricing."
• For a portfolio site: "Hi there. I can tell you about our work, capabilities, and how we collaborate with clients."

Suggested messages. Add three to five suggested messages that guide visitors toward your most valuable conversations:

• "What services do you offer?"
• "How much does it cost?"
• "Can I see examples of your work?"
• "How do I get started?"

Avatar. Upload your logo or a brand icon as the chatbot avatar for a cohesive look.

Step 4: Embed on Webflow

Here is the actual installation. You have two options in Webflow: site-wide (every page) or page-specific.

Option A: Site-Wide Installation (Recommended)

This adds the chatbot to every page on your Webflow site.

1. In the Agentkit dashboard, go to your chatbot's Settings then Embed.
2. Copy the script tag:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

3. In Webflow, open your Project Settings (the gear icon in the left sidebar of the Designer, or from the project dashboard).
4. Go to the Custom Code tab.
5. Paste the script tag in the Footer Code section (the field labeled "Before </body> tag").
6. Click Save Changes.
7. Publish your site for the changes to take effect.

The chatbot will now appear on every page of your published Webflow site.

Option B: Page-Specific Installation

If you only want the chatbot on certain pages (for example, your pricing page and contact page but not your blog):

1. In the Webflow Designer, open the page where you want the chatbot.
2. Open the Page Settings (gear icon near the page name in the Pages panel).
3. Scroll to the Custom Code section.
4. Paste the script tag in the Before </body> tag field.
5. Click Save and then Publish.

Repeat for each page where you want the chatbot. Pages without the script will not show the chatbot.

Verifying the Installation

After publishing:

1. Open your Webflow site in a new browser tab (or incognito window to avoid caching).
2. Look for the chat bubble in the bottom corner.
3. Click the bubble and send a test message.
4. Verify the response is accurate and the styling looks right.
5. Test on mobile to confirm the widget displays correctly on smaller screens.

If the chatbot does not appear immediately after publishing, hard refresh the page (Ctrl+Shift+R or Cmd+Shift+R). Webflow's CDN may take a minute to propagate the updated code.

Step 5: Configure Domain Restrictions

Once your chatbot is live, restrict it to your domain so it cannot be embedded on unauthorized sites.

1. In the Agentkit dashboard, go to your chatbot's Settings.
2. Under Domain Restrictions, add your Webflow site domain (e.g., yoursite.com).
3. If you also use the default Webflow domain (yoursite.webflow.io), add that as well.

The chatbot will only load on the specified domains. This prevents anyone from copying your embed code and using your chatbot (and your message quota) on their site.

Webflow-Specific Tips

Working with Webflow Interactions

If your Webflow site uses heavy interactions and animations, the chatbot widget loads independently and does not interfere with them. The widget uses a fixed position overlay, so it sits on top of your page content without being affected by Webflow transforms or scroll-triggered animations.

CMS Collection Pages

If you have a Webflow CMS blog or portfolio, the chatbot (installed site-wide) will appear on every CMS collection page. Train the chatbot on your entire site URL so it can answer questions about any content, including CMS pages.

If your CMS content changes frequently, consider the Standard plan ($119.99/month) which includes auto-retrain. The chatbot periodically re-crawls your site and picks up new CMS entries automatically.

Webflow Ecommerce

For Webflow Ecommerce sites, train the chatbot on your product pages, shipping policy, return policy, and FAQ. The chatbot can answer product questions, explain shipping options, and handle return inquiries. See our ecommerce chatbot guide for detailed setup advice.

Staging vs Production

If you use Webflow's staging environment (yoursite.webflow.io) for testing before publishing to your custom domain, you can add the chatbot script to both. Use the domain restriction to control which domain the chatbot is active on. During testing, allow both domains. In production, restrict to your custom domain only.

Performance Impact

The Agentkit widget loads asynchronously (note the async attribute in the script tag). This means it does not block your page from loading. It loads in the background after your page content is ready. There is no measurable impact on your Webflow site's load time or Lighthouse score.

Lead Capture on Webflow

A chatbot on your Webflow site is a lead capture tool in addition to a support tool. Visitors who engage with the chatbot have demonstrated interest. Capturing their email at the right moment turns a casual browser into a follow-up opportunity.

Setting Up Lead Capture

1. In the Agentkit dashboard, go to your chatbot's Actions.
2. Enable Collect Leads with name and email as required fields.
3. Configure when the form appears in your chatbot's instructions: "After answering a visitor's question about services or pricing, offer to send them more details and use the lead capture form to collect their email."

Connecting Leads to Your Tools

Zapier, webhooks, and REST API access are all available starting on the Hobby plan ($29.99/month).

For a deeper look at lead capture strategies, see How to Use Chatbots for Lead Generation.

Matching Your Webflow Design

Your Webflow site has a specific design language. Here is how to make the chatbot feel native rather than bolted on.

Brand color. Copy the exact hex value of your primary brand color from Webflow's style panel and use it as the chatbot widget color. This ensures the chat bubble and header blend with your site.

Font consistency. The chatbot widget uses a clean system font stack that pairs well with most Webflow typography choices. The widget's text is deliberately neutral so it does not clash with custom fonts.

Spacing and position. If your Webflow site has a fixed footer, floating CTA button, or cookie banner, position the chatbot on the opposite side to avoid overlap. You can choose bottom-left or bottom-right in the chatbot settings.

Welcome message tone. Write the welcome message and suggested messages in the same voice as your Webflow site copy. If your site is casual and friendly, the chatbot should match. If your site is professional and formal, the chatbot should reflect that.

Measuring Chatbot Performance on Your Webflow Site

After the chatbot has been running for a few weeks, review its performance in the Agentkit dashboard.

Review conversation logs weekly for the first month. This is where you find the quick wins: questions the chatbot handles poorly that are easy to fix with a Q&A pair, and questions it gets right that you can use to validate your training approach.

Agentkit Plans for Webflow Sites

Annual billing saves approximately 20% on all paid plans. Most Webflow sites start on the Free plan to test, then move to Hobby once they see the chatbot handling real visitor questions.

Troubleshooting Common Issues

Chatbot does not appear after publishing. Webflow's CDN can take a few minutes to propagate. Hard refresh the page. If it still does not appear, verify the script is in the correct Custom Code field (Footer Code in Project Settings or Before </body> tag in Page Settings).

Chatbot appears in the Designer but not on the published site (or vice versa). The Designer preview does not execute custom scripts. You will only see the chatbot on the published site. This is expected Webflow behavior.

Chatbot overlaps with a Webflow element. Change the chatbot position (bottom-left vs bottom-right) in the Agentkit settings, or adjust the z-index of your Webflow element if it should appear above the chatbot.

Chatbot gives wrong answers. Review the specific question in your conversation logs, then add or update a Q&A pair with the correct answer. Q&A pairs override crawled content for matching questions.

Chatbot does not load on specific pages. If you used page-specific installation, verify the script is present in that page's Custom Code settings. If you used site-wide installation, check that there is no conflicting script or security header blocking it.

Getting Started

Adding an AI chatbot to your Webflow site is one of the highest-impact changes you can make with the least effort. One script tag gives you a 24/7 assistant that answers visitor questions, captures leads, and improves the experience for everyone who visits your site.

1. Sign up for Agentkit (free).
2. Create a chatbot and train it on your Webflow site URL.
3. Add Q&A pairs for your top visitor questions.
4. Customize the widget to match your brand.
5. Paste the embed code in Webflow's Custom Code settings.
6. Publish and test.

The whole process takes about 20 minutes. Your chatbot starts answering real visitor questions immediately.

Build your chatbot for free →

No credit card required.