How to Add an AI Chatbot to Webflow — Step by Step in 5 Minutes

↑ Part of AI chatbot for your website

In short: You create an AI agent in BotChata, let it index your website, and paste a single script tag into Webflow's Custom Code (Footer). From then on, the chatbot answers visitor questions around the clock — using only your own site's content, in 40+ languages. No coding. GDPR-compliant, hosted in Germany (EU).

→ Start free — no credit card · Live in 5 minutes · Free plan forever

What You Need (Prerequisites)

• A Webflow project on a paid Site plan with a connected domain.
• A BotChata account — the free start is enough (sign up with email, no credit card).
• 5 minutes. No code, no developer.

⚠️ Important — Webflow plans: site-wide Custom Code in Project Settings is published on a paid Site plan. On the free *.webflow.io staging domain, custom code is limited and may not run. Per-page custom code requires the CMS plan or higher. For a site-wide chat widget, a paid Site plan is the way to go.

Part 1 — Set Up BotChata (about 3 minutes)

Step 1: Create an account and an agent

Sign up at botchata.net and open the dashboard. Go to "AI Agents" → "New Agent", give it a name (e.g. your client's or company name), and confirm.

The free start needs no credit card — just your email. (You can optionally activate the 7-day Premium-features trial later with a card; not needed for this guide.)

Step 2: Let it index your website

On the agent, open the "Links / Sources" tab and click "Add source". Enter your website URL and choose "Add entire website".

BotChata reads every reachable page and turns it into the knowledge base. For ~50 pages this takes 1–3 minutes. The status changes from "Indexing" to "Ready".

Why this matters: the bot answers only from your indexed content. If an answer isn't on your site, it says so honestly — instead of making something up. That protects your credibility.

Step 3: Quick test

Switch to the "Overview" tab and ask the bot a few typical customer questions in the live preview. If the answers are accurate, you're ready to embed.

Step 4: Copy the embed code

Open the agent's install / embed view and copy the script tag. It looks like this:

<script
  src="https://botchata.net/api/widget.js"
  data-api-key="YOUR_KEY"
  data-api-url="https://botchata.net/api"
  defer
></script>

The defer attribute makes the widget load asynchronously so it won't slow down your load time (Core Web Vitals). The widget runs in an isolated Shadow DOM — it can't interfere with your Webflow design.

Part 2 — Add the Code to Webflow (about 2 minutes)

You have two ways. Method A puts the widget on every page and is best for most projects.

✅ Method A (recommended): site-wide Footer Code

1. In the Webflow Designer, open Project Settings (or Site Settings).
2. Go to the "Custom Code" tab.
3. Paste the BotChata script into the "Footer Code" box (before </body>).
4. Save Changes.
5. Publish the site (custom code only goes live on publish).

Use Footer Code, not Head Code — the script belongs just before </body> so the page renders first and the widget loads after.

Method B: a single page (Page Settings custom code)

If you want the chat on one page only (CMS plan or higher):

1. Open the page → Page Settings (gear icon next to the page name).
2. Scroll to "Custom Code" → "Before </body> tag" and paste the script.
3. Save and Publish.

Method B only affects that page. For a site-wide floating widget, use Method A.

Step 3 — Check That It Works (Verification)

1. Publish the site, then open your live domain in a new private/incognito window (not the Designer preview).
2. The BotChata bubble appears in the bottom-right.
3. Click it and ask a real question about your offering.
4. The bot should answer within seconds with content from your website.

See the widget? You're live. 🎉

GDPR Note

• Hosted in Germany (EU): BotChata runs on Hetzner servers in Germany; data does not leave the EU without consent, and there is no AI training on your data.
• Data processing: sign the DPA (Data Processing Agreement) with BotChata (template available in your account) and list the tool in your privacy policy.
• Consent / cookie banner: if you use Webflow's consent features or a tool like Cookiebot, gate the BotChata script so it loads only after consent.
• EU AI Act ready: visitors see before the first chat that they're talking to an AI — the transparency duty under Art. 50 (from August 2026) is met by default.

Common Problems (Troubleshooting)

FAQ

Does BotChata need a Webflow app or integration? No. A single script tag in Project Settings → Custom Code → Footer is enough — no app, no connector.

Can I use it on the free Webflow plan? Not reliably. Custom code is published on a paid Site plan; on the free *.webflow.io domain it's limited and may not run. Use a paid Site plan for a live widget.

Is this good for agencies and client sites? Yes — this is a common use case. Add it to a client's Webflow site in minutes; the free tier shows "Powered by BotChata" in the footer, which you can remove on a paid plan for a white-label feel.

Is this GDPR-compliant? Yes. Hosted in Germany (Hetzner), DPA included, no AI training on your data, controllable via your consent tool. See the GDPR note above.

Does the bot make up answers? No. It answers only from your indexed website content. If information is missing, it says so honestly instead of guessing.

What does it cost? The BotChata free start costs $0 (100 messages/month, no card). Paid plans start at $29/month — fixed price per plan, no per-message credits. (Your Webflow plan is billed separately by Webflow.)

Will the widget slow down my site? No. It loads asynchronously (defer) in an isolated Shadow DOM and doesn't block your page from rendering.

Start Now

Add an AI chatbot that knows your content to your Webflow site in 5 minutes.

→ Start free — no credit card

Set up in 5 minutes. 100 messages/month free. GDPR-compliant, hosted in Germany.