Tidio

How to integrate Tidio with Webflow

Integrate Tidio with Webflow by embedding the Tidio widget through custom code, connecting through Zapier for automated workflows, or building with Webflow and Tidio APIs for custom data synchronization.

The code embed method works for all users and requires no technical knowledge. Zapier provides no-code automation for syncing contacts and form data. API integration offers advanced customization but requires developer resources and a Tidio Plus or Premium plan.

Embed the Tidio widget

The standard installation embeds Tidio's JavaScript snippet in your Webflow site's footer code, making the chat widget available across all published pages.

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

In Webflow, go to Site settings > Custom Code and paste the snippet into Footer Code. Save and publish your site. The widget appears on your published site but not in Webflow preview. The async attribute ensures the script loads without blocking page render.

Configure colors, positions, and welcome messages in your Tidio admin panel under Settings > Live Chat > Appearance. Changes take effect immediately without republishing.

For page-specific widgets, use Webflow's custom code embed element instead of site-wide code. Site-wide installation is recommended for consistency.

Connect through Zapier

Zapier's Tidio-Webflow integration connects the two platforms via automated workflows without custom development.

Tidio triggers: Contact Sent From Bot (chatbot captures lead info), New chat initiated, New message received.

Webflow triggers: New Form Submission, New Order, Updated Order (all instant).

When a Tidio contact is created through Tidio's Flow editor, Zapier can add them to your Webflow CMS collection. Map Tidio fields like name, email, and phone directly to your CMS structure. When a Webflow form is submitted, Zapier can create Tidio contacts with form data mapped as contact properties.

Limitation: Zapier cannot map Webflow reference or multi-reference fields. Use API integration for CMS structures relying on reference fields.

Build with Webflow and Tidio APIs

Tidio's REST API and JavaScript Widget SDK support custom integrations. The Widget SDK's setVisitorData() method works on all plans including Free. REST API and webhook access require Plus or Premium plans.

Pass visitor data to chat widget

The JavaScript Widget SDK passes user information from Webflow forms and CMS data to the Tidio chat widget using window.tidioChatApi.setVisitorData():

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"
  }
});

Wait for the tidioChatApiReady event before calling SDK methods:

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

Use this to pass e-commerce data, membership status, or browsing behavior for customized chatbot responses.

Sync Webflow forms to Tidio contacts

The Webflow 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. This requires a backend server and is more complex than Zapier for most use cases.

Create contacts 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).

Verify webhook signatures using the x-tidio-signature header with HMAC-SHA256 validation.

Receive webhook events from Tidio

Tidio sends webhook notifications for seven event types to sync chat data to Webflow CMS collections:

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

Configure webhooks at Settings > Developer > Webhooks (Plus and Premium plans only). Verify authenticity using x-tidio-signature with HMAC-SHA256 validation. Return 2xx status codes immediately and process data asynchronously to prevent timeouts.

What you can build

Integrating Tidio with Webflow lets you add real-time chat to published pages, automate lead capture through form submissions, and personalize conversations based on visitor data.

• E-commerce support chat: Add the Tidio widget to product pages so visitors can ask sizing, shipping, or stock questions and receive instant responses through Lyro AI or live agents
• Lead capture landing pages: Create landing pages with pre-chat surveys that collect visitor information through Tidio's visual Flow editor, then sync contacts to your CRM using Zapier
• Automated FAQ responses: Configure Tidio chatbots to answer common questions about pricing, services, or policies, reducing support workload while providing 24/7 visitor assistance
• Form-to-chat contact sync: Use Zapier to automatically create Tidio contacts when visitors submit Webflow forms, enabling follow-up conversations through chat, email, or SMS