Webflow Chatbot Builder

Webflow gives designers and agencies production-grade control over markup and layout without hand-coding a CMS from scratch - it is the platform of choice for teams that care about pixel-level design and clean, semantic output. A chat widget on a Webflow site needs to respect that: no bloated scripts, no clashing with the interactions and animations that make Webflow builds feel premium.

The Conferbot widget on Webflow installs through Webflow's own sanctioned mechanism for third-party code - Project Settings > Custom Code - with one snippet pasted into the Footer Code field. It loads on every page, including dynamic CMS collection pages, without touching your Designer canvas or your interactions.

Behind the widget is the full Conferbot platform: the no-code visual builder, AI answers, and a shared live chat inbox. Build the conversation once and run it on Webflow, on any other website, and on channels like WhatsApp from the same dashboard.

This guide covers exactly how installation works, the paid Site Plan requirement for publishing custom code, configuration, what data reaches the bot, Webflow CMS and Ecommerce specifics, theming, AI and live agent handover, performance, and an honest comparison to other Webflow chat options.

Full setup instructions with screenshots live at our Webflow install guide. Running other platforms too? The same widget snippet works on Squarespace, WooCommerce, WordPress, Shopify, and Wix.

Webflow's Designer does not offer an app-store-style install flow for third-party widgets the way Shopify or Wix do. Instead, Conferbot uses the mechanism Webflow itself provides for exactly this purpose: Custom Code at the project level.

What you paste

The Conferbot dashboard generates an embed snippet scoped to your bot:

<script src="https://cdn.conferbot.com/dist/v1/widget.min.js" async></script>
<script>window.ConferbotWidget("YOUR_BOT_ID", "live_chat");</script>

Pasted into the Footer Code field under Project Settings > Custom Code, this loads on every page of the published site - static pages and dynamic CMS collection pages alike, because the code is added at the project level, not per page. The Chatbot ID is the only credential; there is no API key, no webhook, nothing else to configure in Webflow.

Project-level, not page-level

Because Custom Code is a project setting, one paste covers the whole site. Add a new CMS collection page tomorrow and the widget is already there - no re-pasting per template.

Try it before you build anything

Use Conferbot's public demo bot ID (691c970890527a0468f9b2c9) in the snippet to see the widget live on your staged or published Webflow site before creating an account at app.conferbot.com.

Getting Conferbot live on a Webflow site takes about five minutes.

1. Create your bot. Sign up free at app.conferbot.com and publish a flow from the template library, or build one in the visual builder
2. Configure the widget. In the dashboard, go to Deploy > Widget and set position, embed type, and appearance
3. Generate the embed code. Click Generate Code for your unique snippet with your bot ID filled in
4. Open Custom Code. In your Webflow project, click the gear icon for Project Settings, then the Custom Code tab
5. Paste into Footer Code. Scroll to the Footer Code section and paste the snippet
6. Save and publish. Click Save Changes, then Publish your site - Custom Code changes only take effect on the published site, not in the Designer preview
7. Verify. Visit your live domain - the chat bubble appears. Send a test message and confirm it lands in your Conferbot inbox

Page-level alternative

If you only want the widget on specific pages, or you are on a plan that does not support project-level Custom Code, use Webflow's Embed element instead: drag it onto the page and paste the same snippet inside it. This works page by page rather than site-wide.

Removal

To remove the widget, delete the snippet from Footer Code in Project Settings, save, and republish.

Troubleshooting

• Widget not appearing after publishing? Confirm the bot is published in the Conferbot dashboard, and remember that Custom Code changes only render on the live published site - previewing inside the Designer will not show it
• Works on the homepage but not CMS pages? Double-check the snippet was pasted into project-level Custom Code rather than a page-level Embed element, since only project-level code covers every CMS collection page automatically
• Still stuck? Test with the demo bot ID first - if the demo works, the issue is bot configuration rather than the Webflow installation

The one thing to know before you start: publishing project-level Custom Code requires a paid Webflow Site Plan (Basic tier or higher). It is not available for publishing on Webflow's free starter plan.

Why this matters

Webflow gates custom code injection at the project level behind its paid hosting tiers - the Designer will let you type the code in either way, but it will not go live on a published free-tier site until the project is on a paid Site Plan.

Your options on a free plan

• Upgrade to a paid Site Plan. The direct path, and typically the right one if you are already publishing a real business site on a custom domain
• Use the Embed element instead. Webflow's page-level Embed element accepts the same snippet and is not gated by a Site Plan the way project-level Custom Code is - add it to each page where you want the widget, which is more manual but works on lower tiers

What does not change

Either path loads the identical widget with identical behavior - AI answers, flows, live handover. The plan requirement affects only where the snippet is allowed to run, not what Conferbot does once it loads.

Webflow-side configuration is intentionally minimal - it is a static snippet, so there is nothing to toggle in Webflow itself beyond pasting and publishing. Everything about the bot's behavior and look lives in the Conferbot dashboard.

Choosing an embed type

When generating the code from Deploy > Widget, choose between:

• Floating chat bubble (live_chat, default) - the corner launcher
• Popup window (popup_chat) - opens the conversation as a popup

Instant updates, no republish

Because the bot ID resolves your flows and appearance server-side, editing your bot in the dashboard - new flow logic, a color tweak, a new greeting - goes live on your Webflow site on the next page load. You only need to touch Custom Code again if you change the bot ID or embed type itself, and even then it requires a republish to take effect (a normal Webflow behavior for any custom code change).

No separate Webflow charge

Conferbot itself is not an extra line item - your only cost is your Conferbot plan. The free plan covers real sites, with paid plans starting at $19/mo.

Custom Code is a static snippet rather than a platform-integrated app, so the data the Webflow integration passes is deliberately simple and auditable.

What is sent

The widget sends customData: { platform: "webflow" }, tagging every conversation from your Webflow site so it is distinguishable in your inbox and analytics from other channels.

What is not sent

Webflow does not expose Memberships identity or Ecommerce cart contents to a Custom Code snippet the way a native app integration could. Visitors start anonymous, exactly as with the plain website widget.

Capturing identity conversationally

In practice this rarely limits what you can do. Ask for a name and email early in a flow using validated input nodes - the answers attach to the conversation permanently and appear in your inbox and analytics without any platform-level identity feed.

Privacy posture

Because no personal data is passed by default, the disclosure burden is small: mention the widget in your privacy policy as you would any support tool, and note that message content is processed by Conferbot over TLS on your behalf.

Two of Webflow's biggest strengths - the CMS and Ecommerce - both work cleanly with the widget because installation happens at the project level rather than per-template.

CMS collection pages

Because the snippet is added once in Project Settings, it renders on every page Webflow generates from a CMS collection - blog posts, case studies, product listings built as collection items - without you touching the collection template. Add a hundred new blog posts and the widget is already on all of them, with no per-post configuration and no risk of forgetting to add it to a new template later.

Webflow Ecommerce

The widget works the same way on Webflow Ecommerce product, cart, and checkout pages, and is commonly used to answer pre-sale questions - shipping cost, sizing, restock timing - the moment a shopper hesitates. Because Custom Code does not expose Ecommerce cart data automatically, treat order-status questions as a collection-and-handoff flow (collect the order number, set expectations, escalate real exceptions) rather than a live order lookup, the same honest limitation that applies to most static-embed integrations across platforms.

Design system consistency

Because the widget renders in its own isolated container, it never conflicts with Webflow's interactions, animations, or the CMS-driven layout variety that makes Webflow builds distinctive - a case study page and a product page can look completely different while the chat widget behaves identically on both.

Webflow's audience skews toward agencies, SaaS marketing sites, and design-forward businesses, and chat earns its place differently across that range.

Agency and marketing sites

A visitor deep on a case study page is a warm lead. A conversational prompt asking about project scope and budget converts better than a static contact form, and it starts the qualifying conversation before a human is even involved.

SaaS and product marketing

Pricing-page questions - "does this work with X", "what happens if I exceed my plan" - are purchase-intent signals. AI answers drawn from your own docs and FAQ content resolve them instantly instead of losing the visitor to a support email, and a flow can qualify a visitor into a demo request or a self-serve signup depending on their answers. Feeding the bot your actual documentation keeps its answers accurate as your product changes, rather than relying on a static FAQ page that quietly goes stale.

Webflow Ecommerce stores

As covered in the CMS and Ecommerce section, pre-sale question capture on product pages is the highest-leverage use case for stores built on Webflow.

Content-heavy CMS sites

Publishers and blogs built on Webflow's CMS use proactive prompts to convert readers into subscribers, timed to appear on collection template pages after meaningful scroll or time on page.

Client handoff and agency workflows

Because chat configuration lives in the Conferbot dashboard rather than the Webflow project, agencies can hand a finished site to a client without also handing over chat administration - the client manages the bot separately from the build.

Job boards and directories built on the CMS

Sites that use Webflow's CMS to power listings - jobs, properties, service providers - benefit from a bot that can answer "how do I list something" or "how does pricing work" on every listing template without per-listing setup, since the widget is already present everywhere the CMS renders a page.

Multi-site agency portfolios

Agencies managing several client projects in Webflow can standardize on the same bot-deployment pattern across every project, using a different bot ID per client while keeping the same Custom Code steps and dashboard workflow for all of them.

Landing pages for paid campaigns

Teams running paid traffic to dedicated Webflow landing pages can use the widget to answer objections in real time right where ad spend lands, rather than sending clicks to a static page and hoping the visitor scrolls to a form - and can hide the widget on the highest-focus pages using disabled URLs when a distraction-free layout matters more than chat.

Webflow sites are built for precise visual control, so a chat widget needs to be a good citizen of that design system rather than fighting it. Every appearance setting lives in the Conferbot dashboard under Customize.

What you control

• Colors and theme - match your Webflow design tokens, light or dark
• Position - left or right corner, with offsets to clear any fixed navigation or announcement bars built in the Designer
• Avatar and branding - bot name, avatar, welcome header
• Auto-open and load delay - open automatically or wait for a click
• Proactive prompts - timed greeting messages
• Disabled URLs - hide the widget on specific pages, such as a checkout or a paid landing page

Isolated rendering

The widget mounts inside its own container using Web Components and Shadow DOM, so it cannot be distorted by your Webflow CSS or interactions, and it cannot leak styles into your layout.

Consistency across templates

Because appearance is dashboard-driven, a Webflow site with wildly different CMS templates - a minimal blog template next to a media-rich case study template - shows an identical, on-brand widget everywhere without per-template configuration.

The widget is the front door; the Conferbot platform is what answers behind it.

Flows for structured conversations

The drag-and-drop builder handles welcome menus, lead qualification, and FAQ triage with buttons and conditions - no code required, and the template library gives you a starting point tuned for agency and SaaS use cases.

AI for the long tail

Connect Conferbot's AI engine to answer free-form questions from your site content, docs, and policies - covering the phrasing your flows did not anticipate, at any hour.

Human handover

When a conversation needs judgment - a custom quote request, a technical pre-sale question - it moves into the shared live chat inbox with the full transcript attached, so the visitor never repeats themselves. Not sure whether you need AI flows, live chat, or both? Chatbot vs live chat breaks down the trade-offs.

One inbox, every channel

Webflow conversations sit alongside your other website and WhatsApp conversations in the same inbox, so a prospect who starts on your marketing site and follows up elsewhere is one thread of history, not two disconnected tickets.

Webflow sites are frequently built and judged on speed - it is part of the platform's pitch to design-conscious teams. The Conferbot snippet is engineered to be a non-event for performance.

Async loading, small footprint

The script loads with the async attribute from Conferbot's CDN and stays well under 50KB, so it never blocks HTML parsing or delays first paint - your Webflow interactions and page content render at full speed regardless of the widget.

No layout shift

The widget mounts into its own appended container rather than reflowing existing content, contributing no Cumulative Layout Shift - important on Webflow sites where interactions and animations are often carefully timed.

SEO posture

• Indexed content is untouched: the widget renders client-side after load, so crawlers see exactly your published HTML, including CMS collection content
• No injected links or hidden text: Custom Code adds only the script tag you pasted
• Engagement upside: visitors who get instant answers stay longer and bounce less - behavioral signals that correlate with better organic performance

For general chat-embed performance practices, see website chatbot widget setup.

A note on Webflow's own performance panel

Webflow surfaces its own performance scoring for published sites. Because the widget loads asynchronously and off the critical path, it typically does not show up as a meaningful factor in that scoring - the same async-by-design approach that protects Core Web Vitals protects Webflow's internal performance metrics too.

Webflow does not run an app marketplace the way Shopify does, so most site owners choose between third-party embeds pasted through Custom Code or the Embed element. Here is an honest, category-level comparison:

Capability	Conferbot	Generic live-chat embed	Webflow Form block
Setup	One snippet in Custom Code	One snippet, same mechanism	Built-in Designer element
AI answers	Included	Rarely, often paid add-on	No
Visual flow builder	Included, no-code	Varies widely	No
Works on CMS collection pages	Yes, automatically	Usually	Per-page only
Off-hours coverage	AI + flows 24/7	Offline message form	Async only
Live agent handover	Included	Usually included	No
Free tier	Yes	Varies	Yes

The honest trade-off: a Webflow Form block is fine if all you need is an async contact submission. If you want the site to answer questions and qualify visitors before a human is involved, that is what Conferbot adds - the widget itself is free, and your Conferbot plan is the only cost, starting free.

Worth noting for anyone comparing options: because Conferbot installs through the same Custom Code field regardless of which chat vendor you pick, swapping vendors later is a one-line change in Project Settings and a republish, not a rebuild - low-risk to actually try before committing.

From zero to a working chatbot on your Webflow site in one sitting:

1. Try the demo first (optional). Paste a snippet using demo bot ID 691c970890527a0468f9b2c9 into Custom Code to see the widget live before creating anything
2. Create your free account at app.conferbot.com - no credit card required
3. Build or borrow a bot from the template library, or design your own in the visual builder
4. Generate your embed code from Deploy > Widget
5. Paste it into Webflow under Project Settings > Custom Code > Footer Code, save, and publish your site
6. Tune from the dashboard - colors, greeting, proactive prompts - without another Webflow republish

Resources

• Webflow install guide - step-by-step with screenshots
• Pricing - free plan available, paid from $19/mo

Running more than one site? The same widget deploys with one snippet to Squarespace, WooCommerce, WordPress, Shopify, Wix, and any website.