Tidio

Tidio brings live chat, an AI agent, and a help desk to your site through a single JavaScript snippet — answering visitor questions in real time, capturing leads, and routing conversations into a ticketing system without a custom backend.

It's a strong fit for e-commerce teams fielding product questions, SaaS companies running onboarding support, agencies managing client sites, and small businesses that need after-hours coverage without adding headcount.

How to integrate Tidio with Webflow

What is Tidio? Tidio is a customer service platform that combines live chat, an AI chatbot called Lyro, a help desk with ticketing, and automated conversation flows. It offers multi-channel messaging across website chat, email, Messenger, Instagram, and WhatsApp, and connects with over 120 third-party apps.

Add Tidio to your site when you need to respond to visitor questions without leaving the page, capture leads through proactive chat triggers, or automate answers to common support queries. The setup method depends on how much control you need over where the widget appears and how data flows between the two platforms.

You can connect Tidio and Webflow in 3 ways:

• Custom code injection adds the Tidio chat widget site-wide or to specific pages without writing application code.
• Zapier connects Tidio triggers and Webflow actions to sync contacts and automate workflows between the two platforms.
• The Data API and Tidio API give you full control over contact syncing, CMS item creation, and widget behavior, but require server-side development.

Most implementations start with custom code injection and add Zapier or API integration as needs grow.

Add the Tidio widget with custom code

Paste a JavaScript snippet into the Footer Code section of Site Settings (before the closing </body> tag). This loads the Tidio chat widget on every published page, including static pages, CMS collection pages, and ecommerce pages. You need a Tidio account (the free plan works for basic widget embedding) and a paid Site plan or paid Workspace plan, since custom code injection isn't available on free plans.

To set up site-wide installation:

1. Log into your Tidio panel and go to Settings > Live Chat > Installation.
2. Click the Manual install tab to reveal your unique JavaScript snippet.
3. Click Copy to clipboard.
4. In Webflow, open Site settings > Custom Code.
5. Paste the snippet into the Footer Code section.
6. Click Save Changes, then publish your site.

The Tidio embed script includes an async attribute, so it loads without blocking page rendering. Once published, the chat widget appears on your live site. Any changes you make to widget appearance, automation behavior, or chatbot flows in the Tidio dashboard apply immediately, with no need to republish. You only need to republish if you modify the embed code itself in the custom code settings.

Add Tidio to a single page

If you only want the chat widget on specific pages (a pricing page or contact page, for example), use page-level custom code instead of site-wide injection.

To add Tidio to one page:

1. Open the target page in the Designer and click the gear icon in the left panel to open Page Settings.
2. Scroll to the Custom Code section.
3. Paste your Tidio snippet into the Footer Code field.
4. Click Save, then publish your site.

Don't use both site-wide and page-level injection for the same page. The widget script would load twice, since page-level code executes after site-wide code.

Place the widget inline with a Code Embed element

For precise placement within a page layout, or to load the widget across all pages in a CMS collection template, use a Code Embed element.

To add Tidio with a Code Embed:

1. Open the Add panel (the + icon) in the Designer.
2. Under the Advanced section, drag a Code Embed element onto the canvas.
3. Paste your Tidio JavaScript snippet into the code editor modal.
4. Click Save and close, then publish your site.

Each Code Embed element supports up to 50,000 characters. Tidio's snippet fits well within this limit. You can also save the Code Embed as a Component to reuse it across multiple pages. Use this method when placement inside the page layout matters more than site-wide coverage.

Open the chat from a custom button or link

By default, Tidio displays a floating chat icon. If you want to hide that icon and trigger the chat from your own button or link instead, add additional JavaScript after the primary Tidio snippet in your footer code.

To set up a custom button trigger:

1. Add an element with the class chat-button to your page in the Designer.
2. Paste the following code into Site settings > Custom Code > Footer Code, below the main Tidio embed snippet:

(function() {
  function onTidioChatApiReady() {
    window.tidioChatApi.hide();
    window.tidioChatApi.on("close", function() {
      window.tidioChatApi.hide();
    });
  }

  if (window.tidioChatApi) {
    window.tidioChatApi.on("ready", onTidioChatApiReady);
  } else {
    document.addEventListener("tidioChat-ready", onTidioChatApiReady);
  }

  document.querySelector(".chat-button").addEventListener("click", function() {
    window.tidioChatApi.show();
    window.tidioChatApi.open();
  });
})();

3. Publish your site and test the button on the live URL.

You can also open the chat from a hyperlink using the data-tidio-open attribute. Add data-tidio-open to any link element, and the widget opens on click. This approach works well for inline CTAs within body copy or CMS-driven content. Full documentation for custom triggers is available in Tidio's widget code snippets guide. This gives you a simple way to match the chat experience to your site's existing buttons and links.

Connect Tidio and Webflow with Zapier

Zapier has a direct Tidio + Webflow integration that connects triggers from one platform to actions on the other. It's a simple way to automate data flow between the two without writing server-side code.

Zapier supports several connection patterns. A documented Tidio-to-Webflow workflow uses the Tidio trigger "Contact Sent From Bot" with the Webflow action "Create Item," adding new contacts captured through chat to a Webflow CMS collection. In the other direction, the Webflow trigger "Form Submission" can create a contact in Tidio, so chat agents can follow up with visitors who submitted a form. Other available triggers include "New Order," "Order Updated," "Site Published," and "New CMS Item."

These options cover simple automation needs without requiring custom middleware.

To set up a Zapier connection:

1. Log into Zapier and create a new Zap.
2. Choose Tidio or Webflow as the trigger app, then select the specific trigger event.
3. Connect your Tidio and Webflow accounts by authenticating through each platform.
4. Choose the corresponding action app and configure field mappings.
5. Test the Zap and turn it on.

Use this option when custom code alone doesn't cover the workflow you need.

Zapier doesn't map reference fields or multi-reference fields. If your CMS structure relies on relationships between collections, use the API integration path. Zapier also polls for some triggers (like "New CMS Item") every 15 minutes on free Zapier plans, so expect a delay for non-instant triggers.

Build with the Webflow and Tidio APIs

Both platforms offer APIs for custom middleware when you need full control over data flow between Tidio and your site. This approach needs server-side code and suits developers building custom integrations, such as syncing Tidio contacts to CMS collections, creating tickets from form submissions, or passing CMS item data into the chat widget for personalized conversations.

The available APIs are:

• The Tidio REST API has endpoints for contacts, tickets, operators, and webhooks. Full OpenAPI access for these endpoints requires a Tidio Plus or Premium plan. Free does not include OpenAPI access, and Starter and Growth only include access to the Products Recommendation endpoint.
• The Tidio JavaScript Widget SDK controls widget behavior, identifies visitors, and fires custom events (available on all Tidio plans, including Free)
• The Webflow Data API has CMS collections, items, form submissions, and site management
• Site webhooks trigger real-time events like form_submission that you can route to Tidio

These APIs support custom sync and automation beyond basic widget installation.

Tidio's REST API authenticates with two custom headers (X-Tidio-Openapi-Client-Id and X-Tidio-Openapi-Client-Secret), generated in the Tidio panel under Settings > Developer > OpenAPI. The Data API uses a Bearer token generated under Apps & Integrations in your dashboard. Store both sets of credentials server-side and never expose them in client-side code.

Sync form submissions to Tidio contacts

When a visitor submits a form on your site, you can automatically create a corresponding contact in Tidio so your support team has full context before the visitor even opens the chat.

To implement this sync:

1. Register a form_submission webhook on your site, pointing to your middleware server. Use the optional filter parameter to scope it to a specific form.
2. When the webhook fires, extract the visitor's email, name, and any other fields from payload.data.
3. Check for an existing Tidio contact by calling GET https://api.tidio.com/contacts?email={email} with your Tidio API headers.
4. If no match exists, call POST https://api.tidio.com/contacts with the mapped field values. Tidio's create endpoint always adds a new contact; it doesn't overwrite existing records, so the duplicate check in step 3 is important.

Static hosting can't receive inbound webhook POST requests directly. Your middleware server can be a serverless function (AWS Lambda, Cloudflare Workers, or similar) that processes the webhook and makes the Tidio API call.

Pass visitor data to the Tidio widget

The Tidio JavaScript Widget SDK lets you identify visitors and set custom properties without any server-side infrastructure. This is available on all Tidio plans.

To pass visitor data before the widget loads, set the document.tidioIdentify object in your site's footer code, above the Tidio embed script:

document.tidioIdentify = {
  distinct_id: 'unique_id',
  email: 'contact@mail',
  name: 'John Doe'
};

The identify object must appear before the Tidio embed script in the page source. If both sit in the same footer code block, place the identify assignment first.

To update visitor data after the widget loads, use the setVisitorData method:

document.addEventListener('tidioChat-ready', function() {
  window.tidioChatApi.setVisitorData({
    email: 'visitor@example.com',
    city: 'Denver',
    country: 'US',
    tags: ['returning-customer']
  });
});

You can also fire custom events to trigger specific Flows in Tidio using tidioChatApi.track('event-name'). Event names support up to 128 characters and can't contain curly braces. Full documentation for custom automation events is available in the Tidio widget SDK reference. Reach for the widget SDK when you need personalization without a full backend integration.

Write Tidio webhook data to Webflow CMS

Tidio webhooks, together with the Tidio REST API, require full OpenAPI access on Plus and Premium plans. Free does not include OpenAPI access, and Starter and Growth only include access to the Products Recommendation endpoint. With webhook access enabled, Tidio can notify your middleware when contacts are created, conversations are resolved, tickets change status, or customers submit satisfaction ratings. Map that data to CMS collection items and publish them through the Data API.

To set up this sync:

1. In the Tidio panel, go to Settings > Developer > Webhooks and create a new stack subscribing to the events you need (e.g., contact.created, customer_satisfaction.rated).
2. Point the stack's endpoint URL to your middleware server.
3. When a webhook fires, extract the relevant fields from the content object in the payload.
4. Map those fields to your CMS collection schema. For example, a contact.created event maps content.email, content.first_name, and content.last_name to corresponding CMS fields.
5. Call POST /v2/collections/{collection_id}/items with the cms:write scope to create the item, then call POST /v2/collections/{collection_id}/items/publish to make it live.

Tidio webhook payloads are delivered as HTTP POST requests with a 4-second processing timeout. Respond immediately with a 2XX status code and process the data asynchronously. Use the webhook_id field to deduplicate, since Tidio may deliver the same event more than once. Full event schemas are documented in the Tidio webhook events reference. Use this pattern when CMS is a lightweight internal dashboard or reporting layer.

What can you build with the Tidio Webflow integration?

Integrating Tidio with your site adds real-time customer communication and AI-powered support to any page without building a custom chat backend.

• Product page support chat: Add Tidio to e-commerce collection pages so visitors can ask sizing, shipping, or stock questions and get instant answers from the Lyro AI agent or a live operator. One Tidio customer, Pastreez, reported a 70% conversion rate on inquiries handled through chat.
• Landing page lead capture: Trigger a pre-chat survey through Tidio Flows when a visitor spends time on a pricing or demo page. Collected contact details sync to a CMS collection via Zapier or the API, building a lead list without requiring a separate form submission.
• 24/7 automated FAQ handling: Train Lyro on your FAQ page URLs or uploaded Q&A content, then embed the widget site-wide. Visitors get immediate answers to common questions about pricing, shipping, or account setup, even outside business hours. Gecko Hospitality reported 90% of conversations handled by Lyro without human intervention.
• Customer satisfaction dashboard: Route customer_satisfaction.rated webhook events from Tidio into a CMS collection, then display CSAT scores and comments on an internal dashboard page using a Collection List. Your team gets a clear record of support quality directly on the site.

Use the API integration path for contact syncing, ticket routing, or multi-site widget deployment.