Интеграция с Zendesk

Как интегрировать Zendesk с OpenReplay.

Интеграция с Zendesk

Как интегрировать Zendesk с OpenReplay.

Самый простой способ интегрировать Zendesk с OpenReplay — создать небольшое приватное приложение для боковой панели с помощью Zendesk Apps Framework (ZAF). Это приложение добавляет прямую ссылку на профиль пользователя OpenReplay для заявителя внутри каждого тикета, где вы можете наблюдать за его событиями и сессиями (при условии, что вы помечаете сессии адресом электронной почты в качестве идентификатора пользователя).

1. Создайте файлы приложения

Section titled 1. Создайте файлы приложения

Создайте папку со следующей структурой:

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

Обязательно замените OPENREPLAY_DOMAIN и PROJECT_ID правильными значениями. Если вы не уверены, какие значения выбрать, посмотрите URL любой существующей записи: первая часть — это домен, а следующее за ним число — это 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. Упакуйте и установите приложение

Section titled 2. Упакуйте и установите приложение
  1. Заархивируйте папку openreplay-zendesk-app/ в zip (убедитесь, что manifest.json находится в корне архива, а не вложен в подпапку).
  2. В Zendesk перейдите в Центр администрирования → Приложения и интеграции → Приложения Support.
  3. Нажмите Загрузить приватное приложение в правом верхнем углу.
  4. Дайте приложению имя (например, «OpenReplay») и загрузите zip-файл.
  5. Нажмите Установить.

3. Просмотрите ссылку

Section titled 3. Просмотрите ссылку

Перейдите к любому тикету и откройте панель приложений, нажав кнопку «Приложения» в правом верхнем углу. Вы увидите прямую ссылку на профиль пользователя заявителя в OpenReplay.

Если у вас возникнут какие-либо проблемы, подключайтесь к нашему Slack или загляните на наш Форум и получите помощь от нашего сообщества.