Para usar Guía con su sitio web, puede simplemente insertar Guía 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 Guía puede hacerlo mediante llamadas API
Las API le permiten automatizar determinadas funciones conectando su CXone sistema con otro software que utiliza su organización. 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 Guía
El widget Guía es un módulo web que CXone 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 Guía, 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 Guía en una página de su sitio web, y un visitante ve la página, Guía 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, Guía utiliza almacenamiento local y de sesión. Esto permite que Guía brinde compatibilidad entre dominios en los navegadores compatibles. También significa que Guía 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 llamadas de JavaScript
- Haga clic en el selector de aplicaciones
y seleccioneACD. -
Ir aDigital >Puntos de contacto digital.
- En Sus canales, haga clic en Script del sitio web.
- Copie el código de JavaScript de la página y péguelo en su código o en un programa de edición de texto. Asegúrese de incluir las etiquetas <script>de apertura y cierre.
-
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.
Las llamadas Guide JavaScript que puede utilizar se describen a continuación en esta página, así como las API relacionadas con el chat Guide y las API relacionadas con informes Guía.
-
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.
-
Visite la página modificada y asegúrese de que las personalizaciones de Guide funcionan según lo previsto.
-
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.
Personalizar el widget Guide
Esta llamada le permite ajustar la apariencia y el comportamiento del widget Guide.
Ajustar CSS
Cambia los elementos de CSS del widget Guide. Por ejemplo:
cxone('guide', 'setCustomCss', '[data-selector="GUIDE_ELEMENT"] {background: red !important;}');Para usar este snippet, reemplace GUIDE_ELEMENT con un valor de la tabla siguiente y reemplace el CSS de ejemplo entre llaves { } con su CSS personalizado:
|
Interfaz de Guide |
Valores de GUIDE_ELEMENT |
|---|---|
| Widget Guide y botones |
|
| Portales |
|
| Artículos |
|
|
Chats y correos electrónicos |
|
|
Ofertas proactivas |
|
Ajustar el tamaño de los botones de canales
Define el tamaño de los botones de canales. Ingrese un valor en em o píxeles. El tamaño predeterminado del botón es 3 em.
cxone('guide', 'setButtonSize', '80px');Ajustar el desplazamiento de los botones de canales
Define el valor de desplazamiento que se usa con los botones de canales. Ingrese un valor en em o píxeles.
cxone('guide', 'setOffsetX', '48px');cxone('guide', 'setOffsetY', '3em');Abrir el menú Guide
Muestra el menú Guide de botones.
cxone('guide', 'openMenu');Cerrar el menú Guide
Cierra el menú Guide de botones.
cxone('guide', 'closeMenu');Cambiar el tamaño de fuente
Define el tamaño de fuente predeterminado que se utilizará en el widget de Guide. Ingrese un valor en píxeles. El valor predeterminado es 13 píxeles. El valor que defina aquí determina el tamaño en em que se utiliza en todo Guide.
cxone('guide','setFontSize',12);Cambiar la altura del widget de Guide
Define la altura del widget de Guide. Ingrese un valor en em o píxeles. La altura predeterminada es 40 em. La altura máxima es 40 rem.
cxone('guide','setDesiredGuideHeight','30em');Cambiar el ancho del widget de Guide
Define el ancho del widget de Guide. Ingrese un valor en em o píxeles. El ancho predeterminado es 23,125 em.
cxone('guide','setDesiredGuideWidth','608px');Mostrar Guide en modo de pantalla completa
Puede mostrar Guide en modo de pantalla completa. El contenido de Guide aparece en una ventana en lugar del widget de Guide.
cxone('guide','setFullDisplay');Una buena práctica cuando se está en modo de pantalla completa es ocultar el botón de minimizar. Para ello, use los siguientes comandos:
cxone('guide','setFullDisplay');cxone('guide', 'setCustomCss', '[data-selector="GUIDE_CHANNEL_CLOSE_BUTTON"] {display: none !important;}');Omitir la encuesta web previa al contacto en el chat
Use esta API para indicar a Guide que inicie el chat sin mostrar la encuesta web previa al contacto.
cxone('guide','hidePreSurvey');Use las API de chat para predefinir los valores de la encuesta web previa al contacto. De manera alternativa, puede especificarlas como parámetros de la API hidePreSurvey. Por ejemplo:
cxone('guide','hidePreSurvey', 'Dre', 'dre@classics.com');Mostrar un punto de entrada directamente
Use esta API para mostrar manualmente un punto de entrada en una ventana. Se usa el botón predeterminado para el punto de entrada.
Esta API se proporciona para casos específicos en los que alguien pueda necesitar mostrar manualmente un punto de entrada en una ventana. En general, no se recomienda y no debe utilizarse en combinación con reglas de participación de Guide.
Para usar esta API, debe pasar el ID del punto de entrada que quiere mostrar. Puede obtener el ID del punto de entrada haciendo clic en Editar junto al punto de entrada y, después, copiando la última parte de la URL de la página.
cxone('guide','openEntrypoint','e1348160-2016-4d91-958e-fd063c669fe6');