Implementación Front End

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

Paso 1: Agregar el Javascript

Este es el Javascript que necesita agregar lo más arriba posible en su página, idealmente en el encabezado.
En el script a continuación hay tres cosas que necesita reemplazar:
  1. Reemplace el window.fasttrackbrand con el nombre de marca que recibió de su Gerente de Integración. Este va a ser un valor codificado que va a ser el mismo para su marca tanto para staging como para producción.
  2. Reemplace la variable window.sid dinámicamente con el sid del usuario actualmente conectado. Este sid (id de sesión) 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 que debe usar; uno para staging y uno para producción. Asegúrese de usar el correcto dependiendo de su entorno actual.
La única diferencia entre usar Notificaciones en Sitio y Notificaciones en Sitio + Bandeja de Entrada Enriquecida es el objeto de configuración principal.
Notificaciones en Sitio y Bandeja de Entrada Enriquecida
Notificaciones en Sitio sin Bandeja de Entrada Enriquecida

Paso 2: Agregar el HTML

Obligatorio: El div principal que contendrá el HTML / Markdown para las Notificaciones en Sitio y la Bandeja de Entrada Enriquecida es este elemento:
Coloque este elemento lo más arriba posible en su documento HTML, idealmente directamente después de abrir la etiqueta <body>. Sin importar si solo usa Notificaciones en Sitio y/o la Bandeja de Entrada Enriquecida; necesita este div.

✅ ¡Terminado con las Notificaciones en Sitio!

Ahora ha implementado el mínimo básico para usar las Notificaciones en Sitio en su front end. Por favor continúe si desea implementar soporte para la Bandeja de Entrada Enriquecida también ⬇️

Implementando soporte para la Bandeja de Entrada Enriquecida

Como puede haber 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 las Notificaciones en Sitio COMO la Bandeja de Entrada Enriquecida. Ambas están en la misma biblioteca pero para habilitar la Bandeja de Entrada Enriquecida necesita tomar unos pasos adicionales:
  1. Habilite la característica Bandeja de Entrada Enriquecida en el objeto de configuración principal (vea el ejemplo de código anterior)
  2. Agregue dos elementos HTML más a su código Front End. El div que agregó a su página con id fasttrack-crm tiene la capacidad de mostrar la bandeja de entrada en sí, pero en la mayoría de los casos querrá algún tipo de indicador en su página indicando cuántos mensajes no leídos tiene el usuario en su bandeja de entrada. Probablemente también quiera un botón que abra / cierre la bandeja de entrada.
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 Javascript ocultará el elemento span para el conteo no leído si el conteo no leído es cero.
Al hacer clic en el botón, se llama a la función window.FasttrackCrm.toggleInbox(). Esta función abrirá la Bandeja de Entrada Enriquecida si está cerrada.

✅ Terminado con la Bandeja de Entrada Enriquecida

Si ha llegado hasta aquí ha implementado tanto las Notificaciones en Sitio como la Bandeja de Entrada Enriquecida.

Paso 3: Aplicar su propio Diseño

Si desea sobrescribir los estilos en la bandeja de entrada, todos los estilos deben estar envueltos dentro del id CSS #fasttrack-crm. Eso protege el CSS de su sitio y le permite apuntar fácilmente a las clases CSS en la bandeja de entrada. Coloque un bloque de CSS encima de la invocación del script de integración.

Ejemplo

Si desea, puede dar estilo a las notificaciones de manera diferente basándose en si es una Notificación en Sitio o un Mensaje de Bandeja de Entrada Enriquecida. También puede dar estilo a toda la vista de mensaje de bandeja de entrada / shoutout o dar estilo a la lista de mensajes de bandeja de entrada dependiendo de si están leídos o no leídos. Aquí hay algunos ejemplos de CSS:
Por favor continúe leyendo a la siguiente página para verificar la Integración y luego realizar más tarde un Envío de Prueba.