Integración con Zendesk

Cómo integrar Zendesk con OpenReplay.

Instalación

La forma más sencilla de integrar Zendesk con OpenReplay es crear una pequeña aplicación privada de barra lateral utilizando el Zendesk Apps Framework (ZAF). Esta aplicación añade un enlace directo al perfil de usuario de OpenReplay del solicitante dentro de cada ticket, donde puedes observar sus eventos y sesiones (siempre que etiquetes las sesiones con el correo electrónico como ID de usuario).

1. Crea los archivos de la aplicación

Crea una carpeta con la siguiente estructura:

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

Asegúrate de reemplazar OPENREPLAY_DOMAIN y PROJECT_ID con los valores correctos. Si no estás seguro de qué valores elegir, revisa la URL de cualquier grabación existente: la primera parte es el dominio y el número que le sigue es el ID del proyecto.

<!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. Empaqueta e instala la aplicación

Comprime en un zip la carpeta openreplay-zendesk-app/ (asegúrate de que manifest.json esté en la raíz del zip, no anidado dentro de una subcarpeta).
En Zendesk, ve a Centro de administración → Aplicaciones e integraciones → Aplicaciones de Support.
Haz clic en Subir aplicación privada en la esquina superior derecha.
Asigna un nombre a la aplicación (por ejemplo, “OpenReplay”) y sube el archivo zip.
Haz clic en Instalar.

3. Visualiza el enlace

Ve a cualquier ticket y abre el panel de Aplicaciones haciendo clic en el botón Aplicaciones en la esquina superior derecha. Verás un enlace directo al perfil de usuario del solicitante en OpenReplay.

¿Tienes preguntas?

Si encuentras algún problema, conéctate a nuestro Slack o visita nuestro Foro y obtén ayuda de nuestra comunidad.