Zendesk Chat (Zopim)

Zendesk Messaging (Zopim) drops a chat widget onto any page of your site, giving visitors instant access to live agents, AI bot responses, and help center articles without leaving the page. When agents are offline, conversations continue asynchronously or convert into support requests based on how you configure the widget.

This setup fits marketing teams running lead-gen sites, support managers handling inquiries, e-commerce operators fielding pre- and post-purchase questions, and agencies building client sites. If you need deeper ticket routing or CMS syncing, extend it with APIs.

How to integrate Zendesk Messaging with Webflow

What is Zendesk Messaging (Zopim)? Zendesk Messaging adds live chat, AI-powered bot responses, and persistent conversations to websites and mobile apps. It replaced the legacy product known as Zendesk Chat (formerly Zopim) and is included in all Zendesk Suite plans starting at Suite Team. The Web Widget uses a single JavaScript snippet and supports real-time conversations and persistent asynchronous messaging across sessions.

Add Zendesk Messaging to your site for real-time visitor support, automated FAQ handling, or support request capture outside business hours. The widget works across devices without extra mobile configuration and keeps full conversation history between sessions.

You can add the widget with custom code or build custom workflows with the Data API and Zendesk APIs.

• Custom code embedding lets you drop the Zendesk Messaging widget onto your entire site or specific pages by pasting a JavaScript snippet.
• The Data API and Zendesk APIs let you control form-to-ticket pipelines, CMS syncing, and webhook-driven workflows, but you'll need server-side development.

Add the Zendesk Messaging widget with custom code

Paste the widget's JavaScript snippet into your site's custom code in head and body tags to add a floating chat bubble to every page or a few selected ones. Visitors get access to live agents, AI bot responses, help center article search, and support request capture. You need a paid site plan (Basic or higher) and a Zendesk Suite Team plan or above. You generate the snippet itself inside Zendesk Admin Center, and you don't need any programming knowledge to install it.

Deploy the widget site-wide

Site-wide deployment places the chat widget on every page. This is the recommended approach for most sites.

To add the widget to all pages:

1. In Zendesk Admin Center, go to Channels > Messaging and social > Messaging and click your Web Widget channel.
2. Click the Installation tab and copy the snippet using the Copy icon.
3. Open Site settings > Custom code.
4. Paste the snippet into the Footer Code field.
5. Click Save Changes, then publish your site.
6. Open the live site in an incognito browser window to confirm the widget appears.

Publish the site and check the live URL to confirm the widget works — it won't render inside the Designer's canvas preview. Configure all widget appearance settings (colors, position, launcher text, bot configuration) inside Zendesk Admin Center, not in Site settings.

Deploy the widget on specific pages

If you only want chat on certain pages (like a pricing or contact page), use page-level custom code instead of site-wide settings.

To restrict the widget to individual pages:

1. Copy the Zendesk snippet from Admin Center > Channels > Messaging and social > Messaging > Installation tab.
2. Open the Pages panel and click the settings gear icon for your target page.
3. Scroll to Custom code > Before </body> tag and paste the snippet.
4. Save and publish.

Repeat for each page where you want the widget. Page-level code loads after any site-wide code, so don't paste the snippet in both locations for the same page.

Embed the widget inside a page section

Instead of using the default floating bubble, you can render the Zendesk Messaging widget inside a specific container on your page. This works well for dedicated support pages or help center layouts.

To set up embedded mode:

1. Add a Code Embed element where you want the widget to appear. Add this HTML inside it:

<div id="messaging-container"></div>

Style the element to your required dimensions using the Style panel. 2. In Site settings > Custom code > Footer Code, add the following code before the Zendesk snippet:

window.zEMessenger = { autorender: false };

3. Paste the standard Zendesk snippet immediately after.
4. After the snippet, add:

zE('messenger', 'render', { mode: 'embedded', widget: { targetElement: '#messaging-container' } });

5. Click Save Changes and publish.

Embedded mode requires Zendesk Messaging (not Classic) to be active on your account.

Use a custom launcher button

You can hide the default Zendesk launcher and trigger the chat widget from your own button. This gives you control over button placement and styling.

To set up a custom launcher:

1. Add a button element and give it an ID of help-button (or any ID you choose) using the element settings panel.
2. In Site settings > Custom code > Footer Code, add this code after the Zendesk snippet:

zE("messenger", "hide");
document.getElementById("help-button").addEventListener("click", function() {
  zE("messenger", "open");
});

3. Publish the site.

Hiding the widget with zE('messenger', 'hide') removes both the launcher button and the chat panel. Closing with zE('messenger', 'close') collapses only the panel while keeping the launcher visible. Choose based on whether you want the default button as a fallback. See the Zendesk show/hide documentation for details on both methods.

Build with the Webflow and Zendesk APIs

For custom form-to-ticket pipelines, CMS syncing, or webhook-driven workflows, the Data API and Zendesk APIs let you control the integration in code. You'll need server-side development for this path because custom code on your site runs client-side only. Keep API credentials, JWT tokens, and webhook verification logic inside serverless functions (Vercel, Netlify Functions, AWS Lambda, or Cloudflare Workers) so you don't expose secrets in browser code.

[image placeholder]

Use these APIs for the integration:

• Use the Zendesk Ticketing API for ticket creation, updates, and retrieval.
• Use the Sunshine Conversations API for programmatic messaging, conversation management, and structured message types with buttons.
• Use the Webflow Data API for CMS collections, form submissions, and site publishing.
• Use webhooks to send real-time events (like form_submission) that route data to Zendesk.

Zendesk no longer supports new integrations using the legacy Chat Conversations APIs and Chat Web SDK. Use Zendesk Messaging and the Sunshine Conversations API for any new build. See the Zendesk API changelog for the full deprecation timeline.

Route form submissions to Zendesk tickets via webhook

Register a webhook that fires on form submission, then create a Zendesk ticket through a server-side function.

To implement form-to-ticket routing:

1. Register a webhook on your site using the Webhooks API:

POST /v2/sites/{site_id}/webhooks
{
  "triggerType": "form_submission",
  "url": "https://your-server.com/webhook"
}

2. In your server-side function, verify the webhook signature using the x-webflow-signature and x-webflow-timestamp headers. Return HTTP 200 immediately so you don't hit timeout failures.
3. Map the form submission fields to a Zendesk ticket and create it via the Ticketing API:

POST /api/v2/tickets
Authorization: Basic <Base64("email/token:api_token")>

{
  "ticket": {
    "subject": "Webflow form: [form name]",
    "comment": { "body": "User message from form" },
    "priority": "normal"
  }
}

This approach lets you control field mapping, priority assignment, and ticket tagging without leaning on a third-party automation tool.

Sync Zendesk ticket data to the Webflow CMS

You can push resolved ticket data or support metrics into your CMS collections. A common use case is generating FAQ or knowledge base content from resolved tickets and displaying it in a Collection List.

To set up ticket-to-CMS synchronization:

1. In Zendesk Admin Center, create a webhook at Apps and integrations > Webhooks pointing to your server-side function. Use the Webhooks API or Admin Center UI.
2. Create a trigger at Objects and rules > Triggers with the condition Ticket: Status = Solved and the action Notify active webhook.
3. In your server-side function, extract the ticket data and create or update a CMS item via the Data API:

PATCH /v2/collections/{collection_id}/items/{item_id}/live
Authorization: Bearer <token>

Creating items through the live endpoint publishes them immediately. Use the staged endpoint (/v2/collections/{collection_id}/items) if you want a review step before publishing. Zendesk webhooks have a 12-second timeout and retry up to 5 times, so your server function needs to respond quickly.

What you can build with the Zendesk Messaging Webflow integration

Integrating Zendesk Messaging with your site puts real-time and asynchronous support directly in front of visitors — no custom chat system or separate support tooling required.

• Pre-sales conversion chat: Add the Messaging widget to pricing and product pages so visitors can ask questions before buying. AI agents handle common questions about features or plans while live agents take over for complex inquiries.
• Automated support with knowledge base deflection: Configure AI bot responses and help center article search inside the widget. Visitors find answers without leaving your site, and support requests only escalate when automation can't resolve the question.
• Form-to-ticket routing for contact pages: Use webhooks and Zendesk's Ticketing API so every submission creates a tracked support ticket with proper priority and tagging. Your support team manages requests in one place instead of monitoring form notification emails.
• CMS-powered FAQ pages from resolved tickets: Use the Data API and Zendesk APIs to push resolved ticket content into CMS collections, generating FAQ pages that update as your support team resolves new types of inquiries.