Intégration de Zendesk

Comment intégrer Zendesk avec OpenReplay.

Installation

La façon la plus simple d’intégrer Zendesk avec OpenReplay est de créer une petite application privée de barre latérale à l’aide du Zendesk Apps Framework (ZAF). Cette application ajoute un lien direct vers le profil utilisateur OpenReplay du demandeur dans chaque ticket, où vous pouvez observer ses événements et ses sessions (à condition d’étiqueter les sessions avec l’adresse e-mail comme identifiant utilisateur).

1. Créez les fichiers de l’application

Créez un dossier avec la structure suivante :

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

Veillez à remplacer OPENREPLAY_DOMAIN et PROJECT_ID par les valeurs correctes. Si vous n’êtes pas sûr des valeurs à choisir, consultez l’URL d’un enregistrement existant : la première partie correspond au domaine et le numéro qui le suit est l’ID du projet.

<!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. Empaquetez et installez l’application

Compressez le dossier openreplay-zendesk-app/ en zip (assurez-vous que manifest.json se trouve à la racine du zip, et non imbriqué dans un sous-dossier).
Dans Zendesk, allez dans Centre d’administration → Applications et intégrations → Applications Support.
Cliquez sur Importer une application privée dans le coin supérieur droit.
Donnez un nom à l’application (par exemple « OpenReplay ») et importez le fichier zip.
Cliquez sur Installer.

3. Affichez le lien

Accédez à n’importe quel ticket et ouvrez le panneau Applications en cliquant sur le bouton Applications dans le coin supérieur droit. Vous verrez un lien direct vers le profil utilisateur du demandeur dans OpenReplay.

Des questions ?

Si vous rencontrez des problèmes, rejoignez notre Slack ou consultez notre Forum et obtenez de l’aide de notre communauté.