Puede personalizar la apariencia y el comportamiento del widget Guide mediante 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.
Por favor proporcione el texto que desea que traduzca. Aún no ha incluido el segmento a traducir.
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
| Intefaz de Guide | selectores de datos |
|---|---|
| Guide widget y botones |
|
| Portales |
|
| Artículos |
|
|
Chats y correos electrónicos |
|
|
Ofertas proactivas |
|
Ajustar el tamaño del botón de Canal
Define el tamaño de los botones de canales. Intro 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 utilizará para los botones de canal. Ingrese 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 Guide Menú
Cierra el menú Guide de botones.
cxone('guide', 'closeMenu');Cambiar 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. Introduzca 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. Intro 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 Guide.
cxone('guide','setFullDisplay');Una buena práctica cuando se está en modo de pantalla completa es ocultar el botón de minimizar. Para hacerlo, 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 del 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 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', {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 un valor de campo personalizado como hidden:true. El formulario de encuesta previa al contacto no muestra el campo oculto. Pero el valor que establezca para el campo oculto se transmite 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 JavaScript muestra cómo especificar dos valores de campo personalizado de contacto. El valor email está oculto en la encuesta previa al contacto y se pasa directamente al chat. El valor 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 en el otoño de 2024 o después, 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 Reevaluación de reglas para Aplicaciones de Página Única (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 integrado:
cxone('guide','init', {resetRulesOnNewPage: true});
Cuando resetRulesOnNewPage está establecido en true.
-
Guide supervisa las transiciones de página mediante el módulo de Analytics.
-
Al detectar una página nueva, el motor de reglas regresa a su estado inicial.
-
Todas las reglas, incluidas las que tienen evaluaciones estáticas o las que ya se activaron, se vuelven a evaluar de inmediato.
-
Los agentes de escucha de reglas y los temporizadores se reinician como si la página se hubiera cargado por primera vez.
De forma predeterminada, el parámetro se establece en false.