Chatwoot

Chatwoot drops a live chat widget onto any page of your site and routes conversations into a shared inbox alongside email, WhatsApp, Instagram, and other channels—so a visitor with a question on your pricing page gets an answer before they bounce. Setup is a short JavaScript snippet pasted into the custom code Footer Code field under Site Settings. No plugins, no marketplace apps.

It's a fit for founders running their own support, marketing teams capturing leads from landing pages, agencies deploying chat across client sites, and SaaS or e-commerce operators who need multilingual support and AI-assisted replies.

How to integrate Chatwoot with Webflow

What is Chatwoot? Chatwoot is an open-source customer support platform available as a cloud service or a self-hosted deployment. It unifies website live chat, email, WhatsApp, Instagram, Facebook Messenger, Telegram, and other channels into a single agent dashboard. Chatwoot also includes AI features such as Captain that can draft responses, summarize conversations, and handle common questions from your knowledge base.

Teams use Chatwoot on Webflow sites to talk with visitors while they browse, collect contact information through pre-chat forms, and route conversations to the right agent or team. The combination turns a static marketing site into an active support and lead-qualification point.

You can connect Chatwoot to your site in 3 ways:

• The Chatwoot widget script adds live chat by pasting code into your site settings or individual pages.
• Automation workflows can route form submissions and CMS events to Chatwoot's API for contact creation and conversation routing.
• The Webflow Data API and Chatwoot API let you sync data between systems—including form-to-contact pipelines, CMS-based ticket tracking, and visitor identification—but require server-side development.

Most implementations start with the widget script and add automation or API integrations as needs grow.

Add the Chatwoot widget with custom code

Paste the widget loader script into Site Settings > Custom Code to add Chatwoot to your site. The options available depend on your current plan, and the whole process takes about five minutes. Chatwoot's official Webflow installation guide walks through it step by step. You can deploy the widget site-wide through Site Settings, target specific pages using Code Embed elements, or manage it through Google Tag Manager for more flexibility.

[image placeholder]

Site-wide deployment via site settings

Placing the Chatwoot widget in Site Settings puts it on every page of your site. This is the standard site-wide method documented by Chatwoot.

To generate and install the widget script:

1. Log in to your Chatwoot account and go to Settings > Inboxes > New Inbox.
2. Select Website as the channel type, enter your website name, and click Create Inbox.
3. Open the Configuration tab of the new inbox and copy the generated script.
4. Open your site and click Site Settings (the gear icon).
5. Go to the Custom Code tab and scroll to Footer Code.
6. Paste the Chatwoot script into the Footer Code field and click Save Changes.
7. Click Publish and select your domain to push the changes live.
8. Visit your published site to confirm the chat widget appears.

When you put the script in Footer Code rather than Head Code, your page content loads before the chat JavaScript executes. The widget still works the same way, but it doesn't block page rendering. Custom code only runs on the published site, not in the Designer canvas or preview mode.

Page-specific deployment with Code Embed

When you only need chat on certain pages (pricing, contact, or checkout), a Code Embed element keeps the widget off the rest of your site.

To add the widget to a specific page:

1. Open the target page in the Designer.
2. From the Add panel, drag a Code Embed element onto the page.
3. Double-click the element to open the code editor.
4. Paste the Chatwoot script (including <script> tags) and click Save & Close.
5. Publish the page.

This avoids loading the widget JavaScript on pages where chat isn't needed. Code Embed elements support up to 50,000 characters, well beyond what the Chatwoot snippet requires.

Google Tag Manager deployment

Google Tag Manager lets you manage the Chatwoot widget without touching your site after the initial GTM setup. You can update, pause, or remove the chat widget entirely from the GTM interface. Once GTM is in place, you can manage the widget from there without republishing your site.

To install via GTM:

1. Log in to Google Tag Manager and open your container.
2. Click Add a new tag and rename it (for example, "Chatwoot").
3. Click Tag Configuration, select Custom HTML, and paste your Chatwoot script.
4. Click Triggering, select All Pages (or create a custom trigger for specific pages).
5. Click Save, then Submit, enter a version name, and click Publish.
6. Refresh your live site to confirm the widget appears.

GTM also supports trigger conditions that fire the widget only on specific URLs. This gives you page-level control similar to Code Embed, managed entirely outside the Designer.

Customize the widget from the Chatwoot dashboard

Once the script is installed, all visual customization happens in the Chatwoot dashboard at Settings > Inboxes > your inbox > Widget Builder tab. You don't need to touch code or republish your site. You can configure widget color, screen position (left or right), bubble type (standard circle or expanded pill with custom text), dark mode (auto-adapts to the visitor's OS preference), and display language (50+ languages supported).

For more detailed control, add a window.chatwootSettings block before the loader script in your Footer Code field:

<script>
  window.chatwootSettings = {
    position: "right",
    locale: "en",
    type: "standard",
    darkMode: "auto"
  };
</script>

The SDK also supports options like hideMessageBubble, showUnreadMessagesDialog, welcomeTitle, welcomeDescription, and message strings for online and offline states. The complete configuration reference is in Chatwoot's SDK settings documentation.

Build with the Webflow and Chatwoot APIs

If you need direct control over data flow between your site and Chatwoot, both platforms expose REST APIs that cover form capture, contact creation, conversation management, and CMS synchronization. This path needs server-side development and works best when you have developer resources or custom requirements that automation tools can't handle.

The relevant APIs:

• The Chatwoot Application API handles contacts, conversations, messages, labels, custom attributes, and webhook subscriptions
• The Webflow Data API handles CMS collections, form submissions, and site publishing
• Webhooks trigger real-time events for form submissions, CMS item changes, and e-commerce orders

Together, these interfaces cover the main data paths involved in a custom Webflow–Chatwoot integration.

Both APIs use token-based authentication. Chatwoot uses api_access_token headers; the Data API uses Authorization: Bearer headers. All Data API calls must use the /v2/ prefix, since the v1 API was deprecated in March 2025.

Sync Webflow form submissions to Chatwoot contacts

Sending form data to Chatwoot as new contacts with auto-created conversations is the most common API integration pattern. This gives agents immediate context about where the lead came from and what they submitted.

To implement this with webhooks:

1. Register a form_submission webhook via POST /v2/sites/{site_id}/webhooks with your server URL as the target. You'll need the sites:write scope.
2. When a form payload reaches your server, verify the x-webflow-signature HMAC header and reject any request whose x-webflow-timestamp is more than five minutes older than your server's current time.
3. Search for the contact in Chatwoot using GET /api/v1/accounts/{id}/contacts/search?q={email} to avoid duplicates.
4. If the contact is new, create it with POST /api/v1/accounts/{id}/contacts, mapping form fields to name, email, and phone_number.
5. Create a Contact Inbox record with POST /api/v1/accounts/{id}/contacts/{id}/contact_inboxes to get the source_id required for conversations. This step is a prerequisite that the Chatwoot conversation docs call out.
6. Create a conversation using the source_id from the previous step, and attach form metadata as custom attributes.

If you don't have a webhook server, polling works too. Call GET /v2/sites/{site_id}/forms/{form_id}/submissions on a schedule to check for new entries, then follow the same contact and conversation creation sequence.

Sync Chatwoot conversation data back to Webflow CMS

When a conversation resolves in Chatwoot, you can update a "Support Tickets" or "Leads" collection in the CMS to keep a public or internal record.

To implement bidirectional syncing:

1. Register a Chatwoot webhook at POST /api/v1/accounts/{id}/webhooks, subscribing to conversation_created and conversation_status_changed events.
2. When your server receives a conversation_status_changed payload with status: "resolved", use PATCH /v2/collections/{id}/items/{item_id} to update the corresponding CMS item's status field.
3. Publish the updated item with POST /v2/collections/{id}/items/publish.

Verify Chatwoot webhook signatures using the X-Chatwoot-Signature HMAC header and the X-Chatwoot-Timestamp to block spoofed requests. Chatwoot's webhook documentation covers the full event list and payload structure.

Identify known visitors in the chat widget

For sites with authenticated users, you can pass visitor identity data to Chatwoot so chat history persists across sessions. You'll need to generate an HMAC hash on your server using Chatwoot's identity validation secret.

To set up visitor identification:

1. Find your HMAC secret in the Chatwoot dashboard at Inboxes > Settings > Configuration > Identity Validation.
2. Generate the hash server-side using the visitor's unique identifier. In Node.js: crypto.createHmac('sha256', 'YOUR_HMAC_SECRET').update('USER_IDENTIFIER').digest('hex').
3. In your page's custom code (before </body>), call window.$chatwoot.setUser() after the chatwoot:ready event, passing the visitor's unique identifier, name, email, and the generated identifier_hash.

This prevents impersonation and links all conversations to a verified identity. Full setup details are in Chatwoot's identity validation documentation.

Use cases for the Chatwoot Webflow integration

Connecting Chatwoot to your site turns static pages into active support and lead-capture points without a separate backend.

• Real-time lead capture on landing pages: Add a pre-chat form to your pricing or demo pages that collects visitor name and email before a conversation begins. Agents see the lead in Chatwoot's inbox with full context about which page triggered the chat.
• Proactive visitor engagement with campaigns: Configure Chatwoot's Campaigns feature to send an automated message when a visitor spends a set amount of time on a specific page. A pricing page campaign might ask "Have questions about plans?" and connect the visitor to a sales agent directly.
• CMS-backed support ticket tracking: Create a "Support Tickets" collection in the CMS and sync conversation status from Chatwoot via API. Resolved tickets update automatically, and you can display ticket status on a client-facing portal page using a Collection List.
• Multi-channel inbox for agency client sites: Deploy one self-hosted Chatwoot instance with separate inboxes for each client site. Each client gets its own agents, branding, and routing rules, managed from a single Chatwoot dashboard.

If you need more direct control over data mapping between your forms and Chatwoot conversations, the API integration path handles those cases.