Personalizar Guide usando JavaScript

Para usar Guide con su sitio web, puede simplemente insertar Guide en cada página de su sitio web en la que quiera ofrecer una interacción.

Sin embargo, si está familiarizado con el desarrollo web y quiere realizar personalizaciones en el aspecto y el comportamiento del widget Guide puede hacerlo mediante llamadas APICerrado Interfaz de programación de la aplicación. Permite automatizar determinadas funciones conectando su sistema CXone Mpower con otro software. al código de JavaScript. Estos son los tipos de cambios que puede realizar:

  • Apariencia y comportamiento del widgetGuide: Personalice la apariencia y el comportamiento del widget Guide. Esto incluye cambiar el tamaño del widget, cambiar el tamaño de los botones, mostrar el widget en modo de pantalla completa, etc.

  • Preferencias del chat cuando se ofrece en el widget Guide: Personalice la apariencia y el comportamiento del chat cuando se ofrece en el widget Guide. Esto incluye cambiar la información en la ventana de chat, cambiar la apariencia de la ventana de chat, definir CSS personalizado, etc.

  • Preferencias de generación de informes: Personalice cómo Guide hace un seguimiento de las interacciones y conversiones. Puede usar estas API cuando define eventos personalizados, almacena variables de visitantes, almacena datos de conversión, asigna y elimina etiquetas web, etc.

Entender cómo funciona Guide

El widget Guide es un módulo web que CXone Mpower Loader carga en su sitio web. El módulo web contiene una aplicación de JavaScript que se crea utilizando el framework Svelte. La aplicación utiliza almacenes de estado básicos que realizan un seguimiento de la configuración de Guide, la plantilla activa, el estado del chat activo, el estado de la interfaz de usuario, etc. Los valores de estos almacenes de estado controlan lo que se muestra al visitante.

Cuando integra Guide en una página de su sitio web, y un visitante ve la página, Guide obtiene la configuración específica de su abonado. Esta solicitud devuelve un resultado JSON con reglas, botones, puntos de entrada, traducciones, artículos referenciados e indicadores de funciones. A continuación, utiliza el motor de reglas integrado para procesar las reglas y condiciones que pueden dar lugar o no a la aparición de una plantilla o una oferta proactiva en la página.

Para gestionar los datos de los visitantes entre recargas de página, Guide utiliza almacenamiento local y de sesión. Esto permite que Guide brinde compatibilidad entre dominios en los navegadores compatibles. También significa que Guide no utiliza cookies del navegador.

Configure las personalizaciones de Guide en un entorno de prueba antes de liberarlas en su entorno de producción. Esto ayudará a minimizar las interrupciones para los visitantes de su sitio web. También ayudará a garantizar que sus personalizaciones funcionen según lo previsto.

Agregar JavaScript llamadas

  1. Haga clic en el selector de aplicaciones Icono de selector de aplicaciones y seleccioneGuide.
  2. Hacer clic en Integrations. Aparece una página con un código de JavaScript específico para su abonado.

  3. Haga clic en Copy code with Guide para copiar el código.
  4. Pegue el fragmento de código copiado en su código o en un programa de edición de texto.
  5. Justo arriba de la etiqueta de cierre </script>del código que ha pegado, agregue las llamadas a JavaScript para usar. En la siguiente imagen de ejemplo, el comentario indica dónde agregar llamadas.

    Un script de ejemplo que muestra dónde agregar llamadas a JavaScript

    Para obtener detalles completos sobre las llamadas que puede utilizar, consulte Guide API relacionadas con widgets, API relacionadas con el chat y API relacionadas con informes.

  6. Copie y pegue el script completo, incluidas las etiquetas <script> de apertura y cierre, en el encabezado de una página de su sitio web.

  7. Visite la página modificada y asegúrese de que las personalizaciones de Guide funcionan según lo previsto.

  8. Cuando esté totalmente probado y funcione como se espera, copie el script final en el encabezado de cada página que debe tener esta personalización de Guide.

Establecer el idioma que se utilizará para Guide

Para anular cualquier configuración de idioma del navegador y obligar a los visitantes de Guide a ver el contenido en un idioma específico, modifique el script de inserción. Agregue el parámetro locale al comando cxone('guide','init');al final del script y especifique el idioma deseado. Por ejemplo, puede definirlo a francés de la siguiente manera:

cxone('init','####'); 
cxone('guide','init', { locale: 'ja', templateId:'xxxxxxx'});

Reemplace #### con su ID de inquilino de cuatro dígitos.

El contenido que escribes en una oferta proactiva todavía aparece en el idioma en el que fue escrito. Esto supone que ha configurado las cadenas de traducción de Guide para el francés.

Deshabilitar el almacenamiento en caché del formulario previo al chat

De forma predeterminada, el widget Guide almacena en caché los datos ingresados ​​en los formularios de contacto previos al chat y al correo electrónico en el navegador del usuario. Esto permite que la información persista después de recargas de página o sesiones posteriores.

Sin embargo, en algunos entornos, particularmente aquellos con requisitos de cumplimiento, privacidad o seguridad, este comportamiento puede no ser deseable. Puede desactivar este comportamiento utilizando el indicador de configuración disableFormCaching al inicializar el widget Guía.

Cuando disableFormCaching no está configurado o está configurado en false (predeterminado):

  • Los datos del formulario previo al chat se almacenan en caché en el navegador.

  • Los valores ingresados ​​previamente pueden aparecer automáticamente cuando se recarga el widget o comienza una nueva sesión

cxone('guide', 'init', { locale: 'en-US', disableFormCaching: false});

Cuando disableFormCaching se establece en true y se actualiza la página, se vuelve a cargar el widget o el usuario inicia una nueva sesión:

  • Los campos del formulario previo al chat están vacíos.

  • Los valores ingresados ​​previamente no se restauran.

Como resultado, los usuarios deben volver a ingresar su información previa al chat para cada nueva interacción.