Zendesk Integration

How to integrate Zendesk with OpenReplay.

Installation

The easiest way to integrate Zendesk with OpenReplay is to build a small private sidebar app using the Zendesk Apps Framework (ZAF). This app adds a direct link to the requester’s OpenReplay user profile inside every ticket where you can observe their events and sessions (as long as you tag sessions with email as user id).

1. Create the app files

Create a folder with the following structure:

openreplay-zendesk-app/
├── manifest.json
└── assets/
    └── iframe.html

manifest.json

{
  "name": "OpenReplay",
  "author": {
    "name": "Your Name",
    "email": "you@example.com"
  },
  "defaultLocale": "en",
  "private": true,
  "version": "1.0.0",
  "frameworkVersion": "2.0",
  "location": {
    "support": {
      "ticket_sidebar": {
        "url": "assets/iframe.html",
        "flexible": true
      }
    }
  }
}

assets/iframe.html

Make sure to replace OPENREPLAY_DOMAIN and PROJECT_ID with the correct values. If you’re not sure what values to pick, check the URL of any existing recording — the first part is the domain and the number following it is the Project ID.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; margin: 0; }
    a { color: #1f73b7; text-decoration: none; font-size: 14px; }
    a:hover { text-decoration: underline; }
    #status { color: #999; font-size: 13px; }
  </style>
</head>
<body>
  <p id="content">Loading...</p>
  <script>
    const client  = ZAFClient.init();
    const DOMAIN  = '<OPENREPLAY_DOMAIN>';
    const PROJECT = '<PROJECT_ID>';

    client.get('ticket.requester.email').then(data => {
      const userId = data['ticket.requester.email'];

      if (!userId) {
        document.getElementById('content').innerHTML =
          '<span id="status">No OpenReplay user ID found for this requester.</span>';
        return;
      }

      const url = `https://${DOMAIN}/${PROJECT}/data-management/user/${encodeURIComponent(userId)}`;
      document.getElementById('content').innerHTML =
        `<a href="${url}" target="_blank">👤 View User in OpenReplay</a>`;

      client.invoke('resize', { width: '100%', height: '50px' });
    }).catch(() => {
      document.getElementById('content').innerHTML =
        '<span id="status">Could not load requester data.</span>';
    });
  </script>
</body>
</html>

2. Package and install the app

Zip the openreplay-zendesk-app/ folder (make sure manifest.json is at the root of the zip, not nested inside a subfolder).
In Zendesk, go to Admin Center → Apps and Integrations → Support Apps.
Click Upload private app in the top-right corner.
Give the app a name (e.g. “OpenReplay”) and upload the zip file.
Click Install.

3. View the link

Navigate to any ticket and open the Apps panel by clicking the Apps button in the upper-right corner. You will see a direct link to the requester’s user profile in OpenReplay.

Have questions?

If you encounter any issues, connect to our Slack or check out our Forum and get help from our community.