Puede personalizar la apariencia y el comportamiento del widget Guide usando estas JavaScript API.
Ajustar CSS
Cambia los elementos de CSS del widget Guide. Realice todos los cambios de CSS en una sola llamada. Una segunda llamada anula los cambios de la primera llamada.
Sintaxis de ejemplo:
cxone('guide', 'setCustomCss', '[data-selector="GUIDE_CHANNEL_BACK_BUTTON"] {color: white !important; background: red !important;}');Para ocultar un selector de datos, use display:none. Por ejemplo, para ocultar el botón de menú Guide:
cxone('guide', 'setCustomCss', '[data-selector="GUIDE_MENU_BUTTON"] {display: none;}');
Selectores de datos disponibles
| Interfaz (f) de Guide | selectores de datos |
|---|---|
| widget Guide y botones |
|
| Portales |
|
| Artículos |
|
|
Chats y correos electrónicos |
|
|
Ofertas proactivas |
|
Ajustar el tamaño de los botones de Canal
Define el tamaño de los botones de canales. Introduzca un valor en ems o píxeles. El tamaño del botón predeterminado es 3em.
cxone('guide', 'setButtonSize', '80px');Ajustar el Desplazamiento del botón de Canal
Establece el valor de desplazamiento que se usará para los botones de canal. Intro un valor en ems 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 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. Intro un valor en píxeles. El tamaño de fuente predeterminado es de 14 píxeles. El valor que defina aquí determina el tamaño en em que se utiliza en todo Guide.
cxone('guide','setFontSize',14);Cambiar la Altura del widget de Guide
Define la altura del widget de Guide. Intro un valor en ems o píxeles. La altura predeterminada es 40em. 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. Introduzca un valor en ems o píxeles. El ancho predeterminado es 23.125em.
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 hacer esto, utilice los siguientes DOs comandos:
cxone('guide', 'setFullDisplay');
cxone('guide', 'setCustomCss', '[data-selector="GUIDE_SINGLE_MENU_CLOSE_BUTTON"] {display: none !important;}');Ocultar la Encuesta 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 preestablecer 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', {email: 'dre@classics.com'});Establecer valores de Campo personalizado para la Encuesta previa al contacto
Use esta API para establecer valores para los campos personalizados que aparecen en una encuesta previa al contacto. Puede establecer valores para lo siguiente:
-
Nombre
-
Cualquier campo personalizado de contacto
-
Cualquier campo personalizado de cliente
Puede marcar el valor de un campo personalizado como hidden:true. El formulario de la encuesta previa al contacto no muestra el campo oculto. Sin embargo, el valor que establece para el campo oculto se pasa a la ventana de chat.
Para los campos personalizados que no estén marcados como hidden:false, Guide preestablece los campos personalizados en la encuesta previa al contacto con los valores especificados por el comando de la API. El visitante puede usar los valores predeterminados o cambiarlos según su preferencia.
Los campos personalizados están limitados a 1024 caracteres.
El siguiente ejemplo de sintaxis JavaScript muestra cómo especificar un nombre que está oculto y se pasa directamente al chat:
cxone('guide','setCustomFields', {customerName: {value:'Francis', hidden: true}});El siguiente ejemplo de sintaxis de JavaScript muestra cómo especificar DOs valores de campo personalizado de contacto. El valor de email está oculto en la encuesta previa al contacto y se pasa directamente al chat. El valor de address es visible y se puede editar en la encuesta previa al contacto.
cxone('guide','setCustomFields',
{contactCustomFields:[
{ident:'email', value: 'josey@nice.com', hidden:true},
{ident: 'address', value: '123 Main St', hidden:false}
]});El siguiente ejemplo de sintaxis JavaScript muestra cómo especificar un campo personalizado de cliente:
cxone('guide','setCustomFields',
{contactCustomerFields:[
{ident: 'email', value: 'kaya.sanchez@acme.com'}
]});El siguiente ejemplo de sintaxis JavaScript muestra cómo especificar tanto un campo personalizado de contacto como un campo personalizado de cliente:
cxone('guide','setCustomFields',
{contactCustomFields:[{ident: 'email', value: 'josey@nice.com', hidden:true}, {ident:'address', value: '123 Main St', hidden:false}], contactCustomerFields:[{ident: 'email', value: 'kaya.sanchez@acme.com'}]});Términos de uso
Le permite poner un documento de condiciones de uso a disposición de los visitantes en la ventana de chat. Esta función agrega un botón a la ventana. Puede personalizar la etiqueta y el estilo del botón y lo que sucede cuando los visitantes lo pulsan. La acción al hacer clic puede mostrar los términos de uso como ventana interna o enlace externo.
Dependencias:
-
Las propiedades display, type y url SOn obligatorias.
-
display debe tener menos de 256 caracteres, pero no debe estar vacío.
-
url debe comenzar con https: o https: y debe tener menos de 2048 caracteres.
Una ventana interna:
cxone('guide','showTermsOfUse', 'Show terms of Use', 'modal' , 'Our terms of use are ...');Un enlace externo:
cxone('guide','showTermsOfUse', {display: 'Terms of Use', type: 'externalLink', url: 'https://yourdomain.com/'});Para desactivar la característica:
cxone('guide','hideTermsOfUse');Mostrar directamente un Punto de entrada
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.
Si creó un punto de entrada a partir del otoño de 2024, comuníquese con su representante de cuenta para obtener ayuda para determinar el id del punto de entrada.
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');Habilitar la revaluación de Regla para Aplicaciones de una sola Página (SPA)
Para admitir el enrutamiento dinámico en aplicaciones de una sola página, puede configurar Guide para volver a evaluar automáticamente las reglas cuando un usuario navega a una nueva página. Para habilitar el enrutamiento dinámico, agregue el parámetro resetRulesOnNewPage a la función cxone('guide','init'); en su script incorporado:
cxone('guide','init', {resetRulesOnNewPage: true});
Cuando resetRulesOnNewPage se establece en true.
-
Guide monitorea las transiciones de página mediante el módulo de Analytics.
-
Al detectar una nueva página, el motor de reglas se restablece a su estado inicial.
-
Todas las reglas, incluidas aquellas con evaluaciones estáticas o aquellas que ya se han activado, se vuelven a evaluar de inmediato.
-
Los listeners y temporizadores de la regla se reinician como si la página se hubiera cargado recientemente.
El parámetro está configurado en false de forma predeterminada.