ChatRaj
AI chatbot for Webflow

Add an AI chatbot to Webflow in 60 seconds, no marketplace app

ChatRaj trains itself on your Webflow site, embeds with one script tag, and works on every template. Project Settings, Custom Code, Footer Code, paste, Publish.

Read install steps
Bottom line
Adding an AI chatbot to Webflow takes about 60 seconds and does not require a marketplace app. Paste one script tag into Project Settings, Custom Code, Footer Code. Hit Publish. ChatRaj answers visitor questions using only the content from your site, captures leads, and works on every Webflow template. Note: custom code requires a paid Site Plan (Basic at $15/mo annual or above as of May 2026). The free Starter Site Plan does not allow custom code injection.
Reviewed by ··9 min read
Jump to section

The 60-second Webflow chatbot path

Webflow has no app marketplace for chatbots. That's a feature, not a gap. Every chatbot integration on Webflow is just a snippet of code you paste into one of Webflow's three custom-code slots. The "fast way" is the only way, and it takes about 60 seconds.

The chatbot snippet is one line:

html
<script async src="https://chatraj.com/widget.js" data-bot-id="YOUR_BOT_ID"></script>

Paste it into Project Settings, Custom Code, Footer Code. Hit Save. Open the Designer, hit Publish. The chatbot bubble appears in the bottom-right corner of every page on your live site within seconds.

That's the whole integration. No Webflow App to install, no permission scope to grant, no template Symbol to wire up, no Designer-side workflow to retrain your team on. The widget loads asynchronously after your page renders, never blocks Largest Contentful Paint, and shows up on every page that includes your site's published footer (which is every page, by default).

Why "no marketplace app" matters on Webflow

Webflow is one of the few major site builders without a chatbot app marketplace. WordPress has dozens of chatbot plugins. Shopify has dozens of chatbot apps. Webflow has none, and the design-conscious audience Webflow attracts treats that as a positive: marketplace apps tend to look generic, slow the site down, and require granting third-party access to your Designer or CMS.

The actual install pattern on Webflow is what most platforms call "advanced": one custom-code snippet, no app. Webflow normalizes this. Every Webflow site you visit that has a chatbot, an analytics tag, or a heatmap tool got it the same way: a snippet in Project Settings or page-level Custom Code.

This is good news for ChatRaj. We don't need to maintain a Webflow App listing, navigate marketplace review timelines, or pay a marketplace revenue share. You don't need to evaluate the trust profile of yet another third-party Webflow integration. The snippet runs in the visitor's browser, fetches your bot's knowledge base from chatraj.com, and never touches the Webflow Designer or your CMS Collections.

The trade-off is that you manage the chatbot from chatraj.com instead of inside the Designer. For most Webflow operators (designers, agencies, brand owners), that's actually preferable. The chatbot is a content tool, not a design tool, and it lives separately from the visual workspace.

Where to paste the script tag (three options)

You have three good places to paste the embed code, depending on whether you want the bot to appear site-wide or only on specific pages:

Option A: Project-wide Footer Code (recommended, site-wide bubble). Open Project Settings, Custom Code, scroll to Footer Code. Paste the script tag. Hit Save Changes. Open the Designer and hit Publish. The chatbot bubble now appears on every page of your site. This is the standard pattern for site-wide tools.

Option B: Page-level Footer Code (single-page bubble). If you only want the chatbot to appear on, say, your Pricing page or your Help Center, open that page in the Designer, click the gear icon in the page settings, scroll to Custom Code, Inside body tag (Footer code). Paste the script tag. Hit Save. Publish the page.

Option C: Embed element (advanced, when neither A nor B fits). The HTML Embed element lets you drop arbitrary HTML into a specific section of a specific page. This is overkill for a standard chatbot install (Options A and B already cover those cases) but useful when you want the bubble bound to a particular section, like a help-center column on a docs page.

Will it work on my Webflow template?

Yes. ChatRaj's widget is an iframe rendered above all your site content via z-index 2147483647 (the maximum 32-bit signed integer, so no other element on the page can sit on top of it accidentally). It does not import any CSS into your site, does not add classes to your body element, and does not load fonts that conflict with your Webflow design system.

We've verified the script on the top Webflow templates by install count (the official free templates as well as paid bestsellers on the Webflow Marketplace). The widget renders correctly above hero sections, sticky navs, full-bleed videos, parallax sections, and Webflow Interactions animations. The only templates we've seen interfere are a handful of custom-built sites that override z-index aggressively on the body or html element (unusual; most designers don't touch root-level z-index). The fix is a one-line CSS override added to Project Settings, Custom Code, Head Code: #chatraj-iframe { z-index: 2147483647 !important; }. If you hit this, ping support.

For sites that use heavy Webflow Interactions on scroll (parallax sections, scroll-triggered animations, sticky reveal effects), the chatbot widget runs in its own iframe and does not interact with the Designer-built scroll handlers. The widget's open/close transitions are CSS-only and do not compete for the main thread, so even animation-heavy hero sections stay smooth when the chatbot bubble appears and animates.

Staging vs production: how to test before going live

Webflow's two-environment model (webflow.io staging subdomain and your custom production domain) maps cleanly onto ChatRaj's Allowed Origins setting. Open your bot in the dashboard, go to Embed, scroll to Allowed Origins, and add both your webflow.io staging URL and your production custom domain. The chatbot will respond to messages from both origins and reject any other origin with a 403.

This lets you Publish to the webflow.io staging subdomain, test the bubble + chat flow end-to-end, then Publish to your custom production domain with confidence that the same snippet works in both environments. There's nothing Webflow-specific to flip; the same Project Settings Footer Code reaches both environments and ChatRaj's allowlist handles the origin scoping.

Lead capture for Webflow agencies (the white-label angle)

Webflow agencies serving B2B clients hit a recurring problem with chatbots: the off-the-shelf options either look generic (an obvious third-party widget) or lock the captured lead data into the chatbot vendor's dashboard, which the client can't access without buying their own seat.

ChatRaj solves both. The widget's theme color, avatar, welcome message, and suggested questions are all configurable from the dashboard, so the chatbot looks like part of the client's brand rather than a third-party bolt-on. And captured leads flow to a CSV export, a webhook, or directly to the client's CRM via Zapier (planned). The agency owns the ChatRaj account at the parent level and grants per-client dashboards by creating a bot per client site.

For Webflow agencies on the Growth plan ($99/mo, 50,000 messages/month, 10 bots), this works out to roughly $10 per client site at full utilization. Compare to per-client chatbot app subscriptions at $20-80/mo each, where the cost compounds linearly as the client roster grows.

Multi-language Webflow sites via Webflow Localization

If you've enabled Webflow Localization on your site, ChatRaj auto-detects the visitor's language from their first message and replies in the same language. No configuration needed. Hindi, Spanish, Japanese, German, Portuguese, Mandarin, French, Italian, Arabic, and 90+ other languages are supported out of the box.

For locale-specific answers (e.g. "What's the EU price?"), the bot answers based on what's visible on the localized page the visitor is browsing. Webflow Localization renders the right language and currency for the visitor's locale, and the bot's training crawl picks up each localized variant of every page during ingestion, so answers stay localized end-to-end.

If your audience is mono-lingual (for example, a France-only B2B brand), you can set a per-bot Force response language in Settings so the bot always replies in French regardless of what the visitor types. That setting overrides the auto-detect rule and is useful when you want a consistent UX even if a curious tester types English at your France-first site.

ChatRaj never trains models on your visitors' chat logs and never shares visitor data across customers. Each bot is fully isolated by chatbot_id; the only data we store about visitors is a random visitor_id cookie (used to give conversation continuity across page loads) and the messages they send.

For GDPR compliance on EU traffic, ChatRaj signs a Data Processing Agreement (DPA) with every paid customer. Visitor consent for the chat widget should fold into your site's existing cookie consent banner. Most Webflow cookie-consent integrations (Finsweet Cookie Consent, Osano, Cookiebot, Termly) let you whitelist ChatRaj's domain so the widget loads only after consent is granted.

If you want stricter control, ChatRaj's widget loader honors a window-level flag (window.chatrajConsent = true) so you can keep the bot hidden until your consent layer fires. Most operators won't need this; the chatbot widget is functional (not advertising) and falls under most jurisdictions' standard functional-cookie consent.

Compatibility with Webflow CMS, Memberships, and Ecommerce

The chatbot widget renders on every published page of your site, including CMS Collection pages, Memberships-gated pages (once the visitor is authenticated and viewing the gated content), and Webflow Ecommerce product and checkout pages.

For the training side, ChatRaj's crawler reads your CMS Collection pages, blog posts, and product pages just like any other public URL. If a CMS item is published, the bot can train on it. If it's gated behind Webflow Memberships, the bot will not see the gated content (the crawler does not authenticate), so member-only documentation will not appear in the bot's answers.

For Webflow Ecommerce specifically, the bot indexes the public HTML of your product pages (descriptions, specifications, prices visible to anonymous visitors). It does not connect to Webflow's Ecommerce API and cannot see live inventory, customer-specific pricing, or order status. For order-status queries, the right pattern is to use Webflow Ecommerce's built-in customer account pages, not a content-trained chatbot.

When you should NOT use ChatRaj on Webflow

A few honest signals that ChatRaj might not be the right fit for your Webflow site:

  • You're on the free Starter Site Plan. Custom code is blocked on Starter, so no chatbot snippet of any kind works. You'll need to upgrade to Basic ($15/mo annual) or above first.
  • You need real-time order data on Webflow Ecommerce. ChatRaj indexes public content; it does not connect to Webflow's Ecommerce API and cannot see live order or inventory data.
  • Your site is fewer than 50 visits per month. At that volume the chatbot's value is hard to justify against your setup time. Focus on driving traffic first via SEO, paid social, or content marketing.

For everyone else: the 60-second install path is real, and the free ChatRaj tier is enough to confirm whether the bot's answers are good enough for your specific Webflow site before you spend a dollar.

Install guide

Install on Webflow

7 steps. Most operators finish in 60 seconds.

  1. Create a ChatRaj account

    Head to chatraj.com/signup and sign in with Google. Free tier, no credit card. You'll land on the dashboard.

  2. Create your first chatbot

    Click 'New chatbot', give it a name (e.g. 'Site Assistant'), and confirm. The bot is created in a 'pending' state until you add training sources.

  3. Add your Webflow site as a source

    On the Sources tab, paste your Webflow site URL (e.g. https://yoursite.webflow.io or your custom domain). ChatRaj crawls up to 20 pages by default. Submit your sitemap.xml URL instead (Webflow generates one automatically at yoursite.com/sitemap.xml) if you want every CMS Collection item, page, and blog post indexed.

  4. Customize the look

    On the Customize tab, pick a theme color that matches your Webflow brand system, set a welcome message visitors see when they first open the chat, and add 3-4 suggested questions (e.g. 'What does this product do?', 'How do I book a demo?', 'What's your pricing?'). Save.

  5. Copy your embed snippet

    On the Embed tab, copy the Script tag option. It looks like: <script async src="https://chatraj.com/widget.js" data-bot-id="YOUR_BOT_ID"></script>

  6. Paste the snippet into Webflow Footer Code

    Open Project Settings (in the Designer, click the project name top-left), then Custom Code. Scroll to Footer Code and paste the script tag. Hit Save Changes. The snippet is now staged but not yet live.

  7. Publish and verify

    Open the Designer and hit Publish (top-right). Open your live site in an incognito window. Within 1-2 seconds, a floating chat bubble appears in the bottom-right corner. Click it. Send a test message. The bot answers using content from your Webflow site. Done.

ChatRaj on Webflow

Plugin approach vs ChatRaj approach

What you'd otherwise stitch together from a chatbot plugin + a separate analytics tool + a lead-capture tool, ChatRaj bundles by default, and ships in a single script tag.

The plugin approach

Other Webflow chatbot tools

Typical when you install a WordPress plugin, Shopify app, or third-party chatbot widget.

  • Install method: Marketplace app (Webflow has none, so most rely on Custom Code anyway)
  • Site Plan requirement: Same: Basic or above for custom code
  • Page-load impact: Varies; some chatbot scripts block render
  • White-label per agency client: Per-client subscriptions stack up fast
  • Designer-side workflow: Some require Symbol wiring or Embed setup per page
  • Works with Webflow Localization: Often a paid add-on
  • Lead capture export: Captured leads locked into vendor dashboard
  • CMS Collection training: Often missed by chatbots that index by sitemap only
The ChatRaj approach

One script tag. Everything bundled.

Hosted, configured, and maintained by us. You add a single line to your site.

  • Install method: Script tag in Footer Code (the standard Webflow pattern)
  • Site Plan requirement: Same: Basic or above for custom code (we don't gate this further)
  • Page-load impact: Small async loader, no LCP impact, Core Web Vitals safe
  • White-label per agency client: One Growth plan covers 10 client bots; rebrand each via theme + avatar
  • Designer-side workflow: Paste once in Project Settings, runs site-wide
  • Works with Webflow Localization: Built in on all plans (100+ languages auto-detected)
  • Lead capture export: CSV export + webhook to your CRM (Zapier planned)
  • CMS Collection training: Crawls all published CMS Collection pages by default
FAQ: ChatRaj on Webflow

Common Webflow chatbot questions

Yes, but not because of ChatRaj. Webflow's free Starter Site Plan blocks custom code injection, so no third-party chatbot can be added to a Starter site. You'll need at least the Basic Site Plan ($15/month annual or $25/month monthly as of May 2026), which unlocks Custom Code in Project Settings. ChatRaj's own free tier still works on top of any paid Webflow plan.

Was this helpful?

Ship your first chatbot in 60 seconds.

Sign in with Google and you'll be answering visitor questions before your coffee gets cold.

60-second setup · One-line install · Works on any site

Works on any website
SShopify
WWebflow
WPWordPress
SqSquarespace
FFramer
</>Plain HTML