Implementación de Front End

Esta página cubrirá cómo instalar el Javascript del Front End como mínimo básico en tu sitio de Front End.
Sigue los pasos a continuación para comenzar a implementar la Biblioteca del Front End

Paso 1: Agregando el Javascript

Este es el Javascript que necesitas agregar lo más alto posible en tu página, idealmente en el header.
En el script a continuación hay tres cosas que necesitas reemplazar:
  1. Reemplaza el window.fasttrackbrand con el nombre de marca que te proporcionó tu Gerente de Integración. Este va a ser un valor codificado que va a ser el mismo para tu marca tanto en staging como en producción.
  2. Reemplaza la variable window.sid dinámicamente con el sid del usuario actualmente logueado. Este sid (session id) va a ser el payload en el Endpoint de Autenticación de la API del Operador.
  3. En la parte inferior del script a continuación hay una propiedad llamada fastTrackCrmScript.src. Esta tiene dos valores diferentes que se supone debes usar; uno para staging y uno para producción. Asegúrate de usar el correcto dependiendo de tu entorno actual.
La única diferencia entre usar Notificaciones en Sitio y Notificaciones en Sitio + Rich Inbox es el objeto de configuración principal.
Notificaciones en Sitio y Rich Inbox
Notificaciones en Sitio sin Rich Inbox

Paso 2: Agregando el HTML

Obligatorio: El div principal que contendrá el HTML / Markdown para las Notificaciones en Sitio y Rich Inbox es este elemento:
Coloca este elemento lo más alto posible en tu documento HTML, idealmente directamente después de abrir la etiqueta <body>. Sin importar si solo usas Notificaciones en Sitio y/o el Rich Inbox; necesitas este div.

✅ ¡Terminado con las Notificaciones en Sitio!

Ahora has implementado el mínimo básico para usar las Notificaciones en Sitio en tu front end. Por favor continúa si quieres implementar soporte para el Rich Inbox también ⬇️

Implementando soporte para Rich Inbox

Como habrás visto, el ejemplo de código anterior tiene dos pestañas; una mostrando un ejemplo de solo habilitar las Notificaciones en Sitio, y un ejemplo habilitando TANTO Notificaciones en Sitio COMO Rich Inbox. Ambos están en la misma biblioteca pero para habilitar el Rich Inbox necesitas tomar algunos pasos adicionales:
  1. Habilita la característica Rich Inbox en el objeto de configuración principal (mira el ejemplo de código anterior)
  2. Agrega dos elementos HTML más a tu código de Front End. El div que agregaste a tu página con id fasttrack-crm tiene la capacidad de mostrar el inbox en sí, pero en la mayoría de los casos querrás algún tipo de indicador en tu página indicando cuántos mensajes no leídos tiene el usuario en su inbox. Probablemente también querrás un botón que abra / cierre el inbox.
Aquí vemos un ejemplo de un botón que tiene un elemento span hijo que contiene el conteo de mensajes no leídos. La biblioteca de Javascript ocultará el elemento span para el conteo de no leídos si el conteo de no leídos es cero.
Al hacer clic en el botón, se llama la función window.FasttrackCrm.toggleInbox(). Esta función abrirá el Rich Inbox si está cerrado.

✅ Terminado con Rich Inbox

Si has llegado hasta aquí has implementado tanto las Notificaciones en Sitio como el Rich Inbox.

Paso 3: Aplicar tu propio Diseño

Si quieres sobrescribir los estilos en el inbox, todos los estilos deben estar envueltos dentro del id CSS #fasttrack-crm. Eso protege el CSS de tu sitio y te permite apuntar fácilmente a las clases CSS en el inbox. Coloca un bloque de CSS arriba de la invocación del script de integración.

Ejemplo

Si quieres, puedes estilizar las notificaciones de manera diferente basándote en si es una Notificación en Sitio o un Mensaje de Rich Inbox. También puedes estilizar toda la vista de mensaje de inbox / shoutout o estilizar la lista de mensajes de inbox dependiendo de si están leídos o no leídos. Aquí hay algunos ejemplos de CSS:
Por favor continúa tu lectura a la siguiente página para verificar la Integración y luego más tarde realizar un Envío de Prueba.