Intercom, LiveChat & Zendesk Widget Integration

Empower your customer support and sales teams by injecting live session replay links directly into your favorite live chat widgets.

1. How the Integration Works

When a visitor contacts your support team via an on-site chat widget, support agents often struggle to understand what the user is experiencing. Asking customers for screenshots or reproduction steps creates friction and delays resolution.

The MousePlayer Chat Metadata Bridge solves this by running an automated background watcher (initChatMetadataBridge) inside the browser. Once activated, the tracking script detects whether Intercom, LiveChat, or Zendesk is present on the page and automatically injects a custom attribute containing the direct, 1-click playback URL (mouseplayer_session_url) into the chat session metadata.

Zero-Latency & Auto-Retry: Because live chat widgets often load asynchronously after page load, MousePlayer automatically re-checks widget availability every 3 seconds to ensure session links are attached without race conditions.

2. How to Activate the Integration

You can enable the live chat bridge using either our no-code dashboard switch or manually via the JavaScript configuration object.

Method A: No-Code Activation via Dashboard (Recommended)

  1. Log in to your MousePlayer account and navigate to Your Properties.
  2. Click the Settings / Integrations button next to your target domain.
  3. In the Integrations modal, toggle Enable Live Chat Metadata Bridge to ON.
  4. Select your provider (Intercom, LiveChat, or Zendesk) and click Save Settings. The change takes effect instantly across all active users.

Method B: Manual Script Configuration

If you hardcode MousePlayer without the remote configuration loader, pass chat_bridge_active: true inside your window.mp_config object:

<!-- MousePlayer SDK with Chat Bridge Enabled --> <script> window.mp_config = { channel: 'YOUR_CHANNEL_ID', chat_bridge_active: true, chat_provider: 'intercom' // 'intercom', 'livechat', or 'zendesk' }; </script>

3. Technical Data Flow by Provider

Depending on your chat software, MousePlayer invokes the provider-specific SDK method to bind the active replay URL:

Chat Provider Executed JavaScript Method Injected Metadata Key
Intercom window.Intercom('update', { ... }) mouseplayer_session_url
LiveChat window.LiveChatWidget.call('set_session_variables', { ... }) mouseplayer_session_url
Zendesk window.zE('webWidget', 'identify', { ... }) mouseplayer_session_url

4. How It Looks in Agent Interfaces

Once activated, support agents will see a direct link to the live session inside their agent dashboard whenever a user starts a conversation.

1. Intercom Inbox View

When an agent opens a conversation in Intercom, the link appears in the right-hand sidebar under the User Data / Custom Attributes pane. Agents can click the URL to instantly launch the MousePlayer Theatre replay in a new browser tab.

2. LiveChat Agent App

In the LiveChat agent application, navigate to the right-hand sidebar of the active chat window and expand the Details → Custom Variables section. The variable mouseplayer_session_url is displayed as a clickable hyperlink.

3. Zendesk Agent Workspace

Within the Zendesk Agent Workspace, look at the Customer Context / User Information panel on the right side of the ticket view. The metadata link is listed under the user's custom profile fields, allowing instant live co-browsing and debugging.

All trademarks named here belong to their respective owners. MousePlayer has no business relationship with these providers.