Chatbot

How to integrate Chatbot with Webflow

Automated customer support and lead qualification improve conversion rates while reducing manual response time. Chatbot handles common questions, captures visitor information through conversational forms, and routes complex requests to your team without requiring staff to monitor chat windows constantly.

Embed Chatbot's JavaScript widget in your site's custom code for a conversational interface that works across all pages. Connect Webflow forms to Chatbot through automation platforms like Zapier or Make to trigger personalized chat sequences. Build custom workflows with both platforms' REST APIs to sync conversation data to Webflow CMS collections or query your CMS content during conversations.

Use the chat widget

The chat widget adds a conversational interface to your Webflow site with a JavaScript embed code. Visitors click the widget to start conversations, ask questions, and complete forms without leaving your site. The widget handles common support questions, qualifies leads, and transfers complex requests to your team.

Setup takes about 15-20 minutes. Create a bot using Chatbot's visual builder, copy the embed code from your dashboard, and paste it into Webflow's Site Settings. The widget appears on all published pages automatically.

This integration enables the following actions:

• Train the bot on your FAQs, product docs, and website content using generative AI (chatbot.com features)
• Collect visitor information through conversational forms that replace static contact pages
• Route conversations to your team with full context when human support is needed
• Deploy your bot as a website widget that adjusts position, size, and behavior for different screen sizes automatically (widget installation)
• Match your Webflow design with custom colors, themes, and positioning through the dashboard

Follow these steps to add the widget:

1. Create your bot in Chatbot's visual builder
2. Navigate to Integrations → Chat Widget → Publish in your dashboard
3. Copy the JavaScript snippet provided
4. In Webflow, go to Site Settings → Custom Code → Head Code
5. Paste the snippet and publish your site

All appearance changes happen in your ChatBot.com dashboard through the Integrations panel in the Chat Widget section. Modify bot name, avatar, colors, themes, backgrounds, and mobile positioning without touching the embed code. Changes apply automatically after saving them.

Common issues and solutions:

• Widget not appearing: Check that code is in Head Code section and site is published (not preview mode)
• Widget placement issues: Adjust position settings in Chatbot dashboard under Chat Widget settings
• Conflicts with other scripts: Check browser console for JavaScript errors

Connect forms to Chatbot with automation platforms

Start personalized chatbot conversations when visitors submit Webflow forms using Zapier or Make. These platforms handle the webhook routing between Webflow and Chatbot without requiring custom middleware servers.

Webflow can send webhooks but cannot receive them. This means connecting form submissions to chatbot sequences requires an intermediary service to receive the form webhook and trigger Chatbot's API. Zapier and Make provide managed webhook endpoints that handle this routing automatically.

Configure Zapier to receive Webflow form webhooks through the Chatbot + Zapier integration. Set up Make workflows using the Chatbot + Make integration. Both platforms let you map form fields to chatbot conversation attributes and trigger specific conversation flows based on form data.

This workflow pattern works as follows:

1. Visitor submits Webflow form
2. Webflow sends webhook to Zapier or Make
3. Automation platform receives form data and calls Chatbot API
4. Chatbot widget activates with personalized greeting based on form data

Webflow webhooks attempt delivery 3 times. If your endpoint fails all 3 attempts, the event is lost permanently without a dead letter queue or replay functionality. Zapier and Make handle endpoint reliability automatically, but implement high-availability endpoints with monitoring if building custom middleware. Endpoints must respond with 2xx status within 30 seconds to avoid webhook failure.

Build with Webflow and Chatbot APIs

The REST APIs from both platforms enable custom workflows beyond the standard widget. Sync conversation data to Webflow CMS collections, trigger chatbot sequences from form submissions, or query your CMS during conversations to provide dynamic responses. These integrations require a middleware server to handle authentication and coordinate requests between platforms.

API integrations work best when automating data flow between systems or building custom conversation experiences that reference your CMS content. Common use cases include creating CMS records from chat conversations, personalizing responses based on CMS data, and triggering multi-step workflows.

Both platforms support REST APIs with API key authentication. Keys pass in HTTP Authorization headers as Bearer tokens. Chatbot.com's API manages bot configurations and retrieves conversation data through endpoints like GET /v2/chats and GET /v2/users. Webflow's API (REST API reference) handles CMS content, forms, and site data.

Sync conversation data to Webflow CMS

Pull chat conversations, lead information, and support ticket data from chatbot.com's API endpoints, then create or update corresponding items in Webflow CMS collections through the Webflow API. This workflow requires either webhook-based triggers at specific conversation checkpoints or scheduled API polling to retrieve data from chatbot.com and sync it into Webflow collections.

Get user profiles and attributes with GET /v2/users. The response includes user profile data with standard attributes and custom attributes collected during conversations.

Create CMS items with POST /collections/{collection_id}/items. Send conversation data as fieldData matching your collection schema. Set isDraft: false to publish immediately or use POST /collections/{collection_id}/items/publish to publish later.

This workflow follows these steps:

1. Poll GET /v2/chats for new conversations at regular intervals to retrieve conversation records and user data
2. Extract lead data (name, email, responses to qualification questions) from conversation attributes and user profiles
3. Create Webflow CMS item with POST /v2/collections/{collection_id}/items to store lead records
4. Store Webflow item ID back to ChatBot user profile with PUT /v2/users/:id for reference and bi-directional syncing

Note that this workflow requires middleware server architecture since Webflow can send webhooks but cannot receive them. For real-time lead capture, configure webhook blocks in chatbot.com conversation flow as complement to scheduled polling.

Webflow's API enforces a rate limit of 250 requests per minute. For high-volume implementations, batch multiple conversation records into single CMS item updates or implement request queuing to stay within rate limits.

Query Webflow CMS during conversations

Provide dynamic responses based on your CMS content using Chatbot's webhook system. Place webhook blocks within your chatbot's conversation flow at points where you need CMS data. When users reach a webhook block, Chatbot sends conversation data (user ID, message, custom attributes) to your server endpoint. Your server queries the Webflow CMS via the Webflow Collections API, formats the response as JSON following Chatbot's response structure, and returns it to the bot for immediate display to the visitor.

Configure webhook blocks in your bot flow through the Chatbot dashboard. When triggered, Chatbot posts a JSON payload containing chatId, userId, userAttributes, and any custom attributes collected during the conversation.

Return responses in this format:

{
 "responses": [{
   "type": "text",
   "delay": 1000,
   "message": "Thanks for providing that information! I'm creating a record in our CMS now."
 }],
 "attributes": {
   "cms_record_id": "webflow_item_123",
   "qualification_score": 85,
   "lead_status": "qualified"
 }
}



Your webhook endpoint calls GET /collections/{collection_id}/items with query parameters including limit, offset, sortBy, and sortOrder, with a maximum of 100 items per request.

For real-time CMS queries during active conversations, implement caching to reduce API calls. Cache frequently accessed product data, FAQ content, or availability information for 5-15 minutes. This prevents hitting Webflow's 250 requests per minute rate limit during high-traffic periods and improves response time for chat visitors.

Store API keys server-side only. Never embed API tokens from chatbot.com or Webflow in client-side code or chatbot flows, as this exposes full account access. API keys function as bearer tokens, granting complete account permissions, making browser-exposed keys a critical security vulnerability.

A visitor asks about product availability. Configure a webhook block in your chatbot flow at that point. When the webhook triggers, your server receives the conversation data including the visitor's location information (if collected). Your server queries Webflow's product collection API filtered by location using the Webflow Collections API endpoint GET /collections/{collection_id}/items with appropriate parameters, then returns matching products to display as the bot's response to the chat.

Extend CMS schemas for chatbot data

Dynamically add fields to Webflow collections to store new data types collected through conversations by using the Webflow CMS API's POST endpoint to create collection fields. Use this when adding new qualification questions or capturing different lead attributes through chatbot interactions, then syncing that data back to your Webflow CMS.

Create new fields with POST /collections/{collection_id}/fields. Supported types include Plain Text, Rich Text, Email, Phone, Number, Date/Time, Switch, and others.

This enables evolving your CMS structure as your chatbot conversations collect new types of information without manually updating collection schemas in Webflow.

What you can build

Integrating Chatbot with Webflow enables automated customer interactions while maintaining your site's design and collecting structured data.

• 24/7 customer support portal: Handle common questions automatically and escalate complex issues to your team. The Wembley Stadium implementation handles 12,000 monthly conversations covering ticketing, hospitality, and merchandise inquiries without proportional staff increases
• Lead qualification system: Capture and qualify prospects through the chat interface, store responses in Webflow CMS collections, and route qualified leads to your team through automation platforms like Zapier or Make
• E-commerce product advisor: Recommend products based on visitor preferences by querying your Webflow product collections during conversations, displaying relevant options, and guiding visitors to purchase. E-commerce implementations report 7-25% revenue increases through personalized recommendations

‍