Tidio

How to integrate Tidio with Webflow

Live chat support captures leads and answers visitor questions in real time, turning site traffic into qualified prospects. Tidio brings AI-powered chatbots and human support to your Webflow pages.

Embed Tidio's widget through custom code for basic chat functionality, connect form submissions and chat data through Zapier for automation without coding, or build custom workflows using Tidio's REST API and webhooks. API access requires Plus or Premium Tidio plans.

Embed the Tidio widget

The standard installation embeds Tidio's JavaScript snippet in your site footer code. The chat widget then appears across all published pages without additional configuration.

Log into your Tidio account and navigate to Settings > Live Chat > Installation. Click the "open code section" link and select the Manual install tab. Copy your unique JavaScript code snippet. It looks like <script src="<https://code.tidio.co/your-unique-code.js>" async></script>.

In Webflow, open your project and go to site settings > Custom Code. Paste the Tidio snippet into the Footer Code section. This places the script before your closing </body> tag. Click Save Changes and publish your site for the widget to appear (Install Tidio on your Website).

The widget appears on your published site but not in Webflow preview mode. Test on your live domain after publishing. The async attribute ensures the script loads without blocking page render.

Customize widget appearance. Configure colors, position, welcome messages, and visibility settings through your Tidio admin panel at Settings > Live Chat > Appearance. Changes made in the Tidio dashboard apply immediately without requiring you to republish your Webflow site (Customize your chat widget).

Page-specific installation. For widgets on individual pages only, use Webflow's Code Embed element instead of site-wide custom code. Drag a Code Embed element onto your page and paste the Tidio snippet. This method works for landing pages or specific sections where you need different chat configurations. However, site-wide installation via Custom Code is recommended for consistency across your entire site.

Performance consideration. Implement delayed loading with setTimeout to reduce impact on Core Web Vitals if performance metrics are critical (Tidio Loading Speed).

Connect through Zapier

Zapier connects Tidio and Webflow actions through automated workflows without custom development. Sync form submissions to Tidio contacts, create CMS items from chat conversations, or trigger chatbot flows based on Webflow events.

Zapier's Tidio-Webflow integration supports these workflows.

Available Tidio triggers:

• Contact Sent From Bot fires when a chatbot captures lead information
• New chat initiated triggers when visitors start conversations
• New message received activates on incoming messages

Available Webflow triggers:

• New Form Submission provides instant form data
• New Order captures e-commerce order creation
• Updated Order tracks order status changes

Create Webflow CMS contacts from Tidio chat data. When a Tidio contact is created through Tidio's Flow editor, Zapier automatically adds them to your Webflow CMS collection. Map Tidio contact fields like name, email, and phone directly to your CMS collection structure. Multi-reference fields require complex workarounds with custom code in Zapier and manual item ID mapping, making them impractical for most no-code users.

Push form submissions to Tidio. When a Webflow form is submitted, Zapier creates new contacts in Tidio with form data mapped as contact properties. Tag contacts based on form source to segment your audience. Custom properties can be mapped from Webflow form fields, enabling lead qualification automation where captured form data becomes searchable contact properties within Tidio (Zapier Tidio-Webflow Integration).

Example workflow setup. Configure a Zap with "New Form Submission" (Webflow) as the trigger and "Create Contact" (Tidio) as the action. Map fields like email to email, name to name, and custom form fields to Tidio's custom properties. Add filtering logic to route different forms to different Tidio tags or departments.

Rate limits. Zapier operates within Webflow's API rate limits of 60 requests per minute for basic plans and 120 requests per minute for paid plans (Webflow Rate Limits) and Tidio's plan-based restrictions (Tidio Rate Limiting).

Build with Webflow and Tidio APIs

Tidio's REST API and JavaScript Widget SDK enable custom integrations beyond standard embedding. These methods require backend development infrastructure and are intended for engineering teams.

Use the Widget SDK's setVisitorData() method to pass Webflow visitor data to Tidio for personalized chat experiences. Integrate Webflow CMS content into chatbot responses through API calls in Tidio Flow Builder. Identify members in Tidio using the distinct_id parameter to create membership-aware chat experiences with member-specific routing and support tiers.

API access requires a Plus or Premium Tidio plan. Free and Starter plans only support the basic widget embed (Developer resources in Tidio).

Sync Webflow forms to Tidio contacts

Webflow's form submission webhook sends data to your server when users submit forms. Your middleware transforms this data and posts to Tidio's POST /contacts endpoint.

Configure webhooks for form submissions through the Webflow API by setting up a webhook endpoint in your backend server. When a form is submitted on your Webflow site, the platform sends a JSON payload containing form field data to your configured endpoint. The payload includes visitor information, form field values, submission timestamp, and site details. Webhook configuration is managed programmatically through the Webflow Developer API.

Create contacts in Tidio by posting to https://api.tidio.com/v1/contacts with headers X-Tidio-Openapi-Client-Id and X-Tidio-Openapi-Client-Secret. The request body accepts email, name, phone, tags, and custom properties (Tidio Contacts API). Additional fields supported include first_name, last_name, and distinct_id for CMS record matching and external system correlation.

Verify webhook signatures using the x-tidio-signature header to prevent spoofing attacks. Tidio implements HMAC-SHA256 signature verification by concatenating the signing timestamp and request body, then computing an HMAC-SHA256 hash using your webhook secret key. Compare the computed signature with the received signature using constant-time comparison to ensure request authenticity (Tidio Signature Verification).

Pass visitor data to chat widget

The JavaScript Widget SDK provides the window.tidioChatApi.setVisitorData() method for personalized chat experiences by passing user information from Webflow forms and CMS data to the Tidio chat widget (Tidio Widget SDK).

Method signature:

window.tidioChatApi.setVisitorData({
 email: "user@example.com",
 name: "John Doe",
 phone: "+1234567890",
 distinct_id: "custom_identifier",
 tags: ["tag1", "tag2"],
 custom_properties: {
   membership_plan: "premium",
   company: "Acme Corp"
 }
});



Supported properties:

• email (string) for visitor's email address
• name (string) for visitor's full name
• phone (string) for visitor's phone number
• distinct_id (string) for custom identifier and external system correlation
• tags (array) for visitor categorization tags
• custom_properties (object) for extensible custom properties tracking additional data

Use cases:

• Identify returning customers by passing stored email from Webflow CMS
• Set up member-specific support tier based on membership plan
• Track custom business data like company, plan level, and purchase history
• Enable intelligent chat routing based on visitor attributes

Wait for the tidioChatApiReady event before calling SDK methods:

document.addEventListener('tidioChatApiReady', function() {
 window.tidioChatApi.setVisitorData({...});
});



Use this approach to pass e-commerce data, membership status, or browsing behavior for customized chatbot responses (Tidio Widget Visitor Identification).

Build CMS-driven chatbot responses

Create a custom backend service that fetches content from Webflow's CMS API to power Tidio chatbot answers. Call GET /collections/{collectionId}/items to retrieve FAQ collections or help articles, then transform and return relevant content to Tidio based on visitor queries through a webhook or API endpoint configured in Tidio's Flow builder.

Configure API calls in Tidio's Flow Builder using the HTTP request action. Your endpoint receives the visitor's message, queries Webflow CMS, and returns matching content. Tidio displays the response in the chat thread.

Receive webhook events from Tidio

Tidio sends webhook notifications for seven event types. These events sync chat data back to Webflow CMS collections for centralized customer records.

Available webhook events include the following:

• contact.created and contact.updated for new or modified contact information
• ticket.created and ticket.status_updated for support ticket lifecycle events
• conversation.solved_by_operator, conversation.solved_by_lyro, and conversation.solved_automatically for resolution tracking

Configure webhooks at Settings > Developer > Webhooks in your Tidio dashboard. Webhooks are available exclusively on Plus and Premium plans (Tidio Webhooks Introduction).

Verify webhook authenticity using the x-tidio-signature header with HMAC-SHA256 validation (Tidio Signature Verification). Return 2xx status codes immediately and process data asynchronously to prevent timeouts.

Rate limits. Plus plans allow 60 OpenAPI requests per minute. Premium plans increase this to 120 requests per minute. Monitor rate limit headers and implement exponential backoff for 429 responses (Tidio Rate Limiting).

What you can build

Integrating Tidio with Webflow enables real-time chat widgets on published pages, automated lead capture through form webhooks, and conversation routing based on visitor data.

• E-commerce conversion optimization: Build product pages where visitors get instant support through the Tidio chatbot for sizing, shipping, or product questions while configuring cart abandonment workflows using Zapier to trigger personalized messages when customers leave without purchasing
• Lead qualification systems: Create landing pages with pre-chat surveys that capture visitor information through Tidio's Flow editor, automatically qualify leads through targeted questions, and tag contacts for follow-up using Zapier integration with your CRM
• Membership community support: Build member areas where chat widgets identify logged-in users and provide tier-specific support with premium members receiving priority routing and standard members getting automated help documentation
• Multi-language customer service hubs: Design global sites where Tidio detects visitor language preferences and serves chatbot responses in their native language while connecting conversation data to Webflow CMS to display support metrics on status pages