Chatbot

Webflow sites do not include built-in live chat or AI chatbot functionality. Visitors who have questions outside business hours, need help choosing a product, or want to start a conversation before filling out a form have no native way to do so. Adding that capability requires a third-party tool and a reliable installation method.

Chatbot adds an AI-driven chat widget to your Webflow site through a JavaScript snippet pasted into your site's custom code settings. Once live, the widget handles visitor questions around the clock, qualifies leads through guided conversation flows, and routes collected data to external tools or directly into Webflow CMS collections via Zapier or API calls.

This integration works well for marketing teams running lead generation landing pages, agencies building client sites with chat-based support, ecommerce operators automating product recommendations, and membership site owners who want personalized chat experiences tied to user data.

How to integrate Chatbot with Webflow

What is Chatbot? Chatbot is an AI chatbot platform developed by Text, Inc. (the parent company behind LiveChat and HelpDesk) that deploys a chat widget on websites to answer visitor questions, qualify leads, and guide users through conversation flows. It includes a visual bot builder for creating conversation "Stories," webhook blocks for triggering external API calls, and a Chat Widget JS API for programmatic control.

Teams typically add Chatbot to Webflow sites when they need 24/7 visitor support without staffing a live chat team, or when they want to capture and route lead information automatically. The widget loads on the published site and runs independently of Webflow's content management layer, while data collected during conversations can flow into CMS collections or external services.

The Chatbot-Webflow integration supports 3 approaches:

• Custom code embed handles widget deployment on your Webflow site without writing application code.
• Zapier lets you route chat conversation data into Webflow CMS collections automatically.
• The Webflow Data API and Chatbot APIs give you full control over data sync, user segmentation, and widget behavior, but require server-side development.

These three paths cover the main setup options for most teams. Most implementations start with the custom code embed for the widget itself, then add Zapier or API integration if chat data needs to reach Webflow CMS or other systems.

Add the Chatbot widget with custom code

Chatbot's Webflow integration uses a JavaScript snippet you copy from your Chatbot dashboard and paste into Webflow's custom code settings. This deploys a floating chat bubble on your published site. You can install the widget across every page at once through site settings, target specific pages through page settings, or place it at a specific position in your layout using a Code Embed element. All three paths require a paid Webflow site plan, since custom code is disabled on the free Starter plan.

The widget's appearance, position, greetings, and mobile behavior are all configured inside the Chatbot dashboard. Changes to those settings take effect immediately without republishing your Webflow site. You only need to republish if you change the embed snippet itself.

Deploy site-wide with custom code in site settings

This is the recommended method for most sites. It adds the chat widget to every page at once.

To set up site-wide deployment:

1. Log in to Chatbot and open your bot.
2. Click the Integrations icon in the sidebar.
3. Click Connect next to Chat Widget.
4. Go to the Publish section and click Copy code.
5. In Webflow, select your site from the Dashboard.
6. Click the W logo (top left) and select Site Settings.
7. Click the Custom Code tab.
8. Paste the Chatbot snippet into the Head Code field.
9. Click Save Changes, then click Publish and select Publish to selected domains.

These steps install the widget across your full site in one pass. Chatbot's Webflow-specific guide specifies the Head Code section, while their general widget installation guide recommends placing the script before the closing </body> tag (Footer Code). Both locations work. Footer Code is the better choice for page load performance because it avoids render-blocking.

Target specific pages with Code Embed elements

Use this method when you want the widget on a single page, such as a pricing page or contact page, positioned at a specific spot in the layout.

To add Chatbot with a Code Embed element:

1. Copy the widget code from your Chatbot dashboard (same steps as above).
2. Open the target page in Webflow.
3. In the left panel, click the Add Elements (+) icon.
4. Drag the Embed element (displayed as </>) onto your canvas.
5. Double-click the element to open the code editor.
6. Paste the Chatbot widget code.
7. Click Save & Close, then publish.

This method gives you page-level placement control without changing site-wide settings. Code Embed elements have a 50,000 character limit. Do not wrap the snippet in <html>, <head>, or <body> tags.

Target specific pages with page-level custom code

This method targets a single page without adding a canvas element. It works well when you want the floating bubble on one page but do not need precise layout placement.

To add Chatbot via page settings:

1. Open the target page in Webflow.
2. Open the Pages panel in the left sidebar.
3. Hover over the page name and click the gear icon.
4. Scroll to the Custom Code section.
5. Paste the widget code into the Footer Code field.
6. Click Save, then publish.

This setup keeps the implementation limited to that page alone. The widget will not appear in Webflow's preview mode regardless of which method you use. Always verify on your live published URL.

Connect Chatbot and Webflow with Zapier

Zapier provides a direct Chatbot + Webflow integration that routes conversation data from your chatbot into Webflow CMS collections. This does not deploy the widget itself. You still need the custom code embed (described above) to display the chat widget on your site. Zapier handles what happens with the data your bot collects.

The integration is one-way only, per Chatbot's Zapier documentation. Data flows from Chatbot to Webflow, but no message can be returned to the chat user through Zapier.

For this workflow, use the Chatbot New Message trigger with Webflow actions such as:

• Webflow Create Item: adds a new item to a given collection
• Webflow Create Live Item: adds a new item to a collection on your published site
• Webflow Update Item: updates an item
• Webflow Update Live Item: updates a live item
• Webflow Find Item: searches for an item in a collection

These Webflow actions cover the main CMS workflows most teams need for no-code routing.

To connect Chatbot and Webflow through Zapier:

1. Go to zapier.com and log in or create an account.
2. Click Create Zap.
3. Set Chatbot.com as the trigger app and select New Message.
4. Connect your Chatbot.com account.
5. Set Webflow as the action app and select the Webflow action you need (for example, Create Live Item).
6. Connect your Webflow account and map the Chatbot.com data fields to your CMS collection fields.
7. Test the Zap and activate it.

These steps set up the automation after your widget is already live on the site. This setup works best when you want no-code routing of lead or support data into Webflow CMS without building a server-side workflow.

Build with the Webflow and Chatbot APIs

For full control over data sync between Chatbot conversations and your Webflow site, both platforms offer REST APIs. This path is for developers who need bidirectional data flow, custom user segmentation, conditional widget behavior, or real-time CMS updates based on chat interactions.

The available APIs:

• The Chatbot API (v2) handles Stories, User Entities, Webhooks, Users, and Segments at https://api.chatbot.com/v2/
• Webflow's Data API handles CMS collections, items, forms, and site publishing at https://api.webflow.com/v2/
• Webflow webhooks trigger real-time events like form_submission and collection_item_created
• The Chat Widget JS API controls the widget client-side (maximize, destroy, listen for events)

Together, these APIs provide the main building blocks for a custom integration. Both APIs use Bearer token authentication. Chatbot tokens are generated at https://app.chatbot.com/settings/developers. Webflow tokens come from site settings or OAuth for multi-site integrations.

Sync chat data to Webflow CMS with webhooks

Chatbot's webhook system fires when a user reaches a Webhook block placed at a specific point in a conversation flow. This is not an event-subscription model. You control exactly when the webhook fires by positioning the block in your Story design.

To set up a webhook-to-CMS pipeline:

1. In Chatbot, go to Chatbots, select your bot, and click the Integrations icon.
2. Select Webhook and click Create new webhook.
3. Enter a name, your server's HTTPS endpoint URL, and a verification token.
4. Click Add integration. Chatbot sends a GET request with your token and a challenge value. Your server must return the challenge as the response body.
5. Open your Story in the bot builder and add a Webhook action block at the point where you want data sent.
6. On your server, parse the incoming POST payload (which includes userAttributes and attributes collected from Question blocks) and call the Webflow CMS Items API to create or update a collection item.

These steps define when data leaves the conversation and how it reaches your server. The webhook payload includes a chatId, userId, userAttributes (persistent data like name and email), and attributes (session-specific data collected upstream). Map these values to your Webflow CMS collection field slugs when calling the Create Live Item endpoint (POST /v2/collections/{collection_id}/items/live).

Chatbot webhooks have a strict 10-second timeout. Your server must complete all processing, including the Webflow API call, within that window. For two-way communication, return a JSON response with a responses array to send a message back to the chat user.

Control widget behavior with the Chat Widget JS API

After embedding the widget snippet, you can use JavaScript in Webflow's custom code sections to control the widget programmatically.

To add client-side widget controls:

1. Add a Code Embed element or page-level custom code block to the target page.
2. Use OpenWidget.call() to trigger actions and OpenWidget.on() to listen for events.

These hooks let you change widget behavior without altering the core embed code.

For example, to auto-maximize the widget when it loads:

function onReady() {
  OpenWidget.call('maximize');
}
OpenWidget.on('ready', onReady);

You can also destroy the widget with OpenWidget.call('destroy') or respond to user events within the chat. The onReady callback fires when the widget is loaded and ready, or immediately if already loaded.

What can you build with the Chatbot Webflow integration?

Integrating Chatbot with Webflow lets you add AI-driven conversation experiences to any Webflow site without building custom chat infrastructure.

• Lead qualification landing pages: Build a Webflow landing page where the Chatbot widget asks visitors qualifying questions (budget, timeline, company size) and routes the collected data into a Webflow CMS collection via Zapier. Your sales team reviews leads directly in the CMS or a connected Collection List on an internal dashboard page.
• 24/7 product support sites: Deploy the widget across an ecommerce or SaaS marketing site to answer common product questions, guide visitors to relevant documentation, and collect support requests outside business hours. Conversation flows built in Chatbot's visual Story builder handle FAQs while webhook blocks send unresolved issues to your helpdesk.
• Event registration acceleration: Add a chatbot to an event marketing site built in Webflow that walks visitors through registration details, answers schedule questions, and captures attendee information. The bot collects name, email, and session preferences through conversation, then writes that data to a CMS collection for your event team.
• Membership portal chat support: On Webflow sites with third-party membership tools, configure the Chat Widget JS API to pass user attributes (such as membership tier or account ID) to the chatbot. The bot returns personalized responses based on those attributes using webhook-powered server logic.

If you need more control over conditional widget behavior or real-time CMS updates based on conversation data, the API integration path covers those cases with full flexibility.