Personalizar el widget Guide mediante API

Puede personalizar la apariencia y el comportamiento del widget Guide utilizando 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.

Ejemplo de sintaxis:

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_CHANNEL_BACK_BUTTON"] {color: white !important; background: red !important;}');

Para ocultar un selector de datos, utilice display:none. Por ejemplo, para ocultar el botón de menú Guide:

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_MENU_BUTTON"] {display: none;}');
Interfaz de Guide selectores de datos
Widget Guide y botones

  • GUIDE_CHANNEL_BUTTON

  • GUIDE_CHANNEL_BACK_BUTTON

  • GUIDE_SINGLE_MENU_CLOSE_BUTTON

  • GUIDE_MULTIPLE_MENU_CLOSE_BUTTON

  • GUIDE_CUSTOMER_PORTAL_CLOSE_BUTTON

  • GUIDE_FRAME_CONTENT

  • GUIDE_CHANNEL_ICON

  • GUIDE_CHANNEL_MENU_ICON
Portales

  • PORTAL_HEADER_ICON

  • PORTAL_HEADER

  • PORTAL_TITLE

  • PORTAL_SUBTITLE

  • GUIDE_CHANNEL_BUTTON_1

  • GUIDE_CHANNEL_BUTTON_2

  • GUIDE_CHANNEL_BUTTON_3

  • GUIDE_CHANNEL_BUTTON_4

  • GUIDE_MENU_BUTTON

  • KB_WIDGET_TITLE

  • KB_WIDGET_SEARCHBAR

  • KB_SEE_MORE_BUTTON

  • PORTAL_BODY

  • KB_WIDGET

  • CHANNELS_WIDGET
Artículos

  • KB_HEADER

  • KB_BODY

Chats y correos electrónicos

  • PRECONTACT_SURVEY

  • BEGIN_CHAT

  • SEND_EMAIL

  • INPUT

  • TEXTAREA

  • DROPDOWN

  • TREE

  • PRECONTACT_SURVEY_DESCRIPTION

  • PRECONTACT_SURVEY_ICON

  • TREE_POPUP_BACK_BUTTON

  • CLOSE_TREE_POPUP

  • CLOSE

Ofertas proactivas

  • OFFER_CLOSE_BUTTON

  • OFFER_HEADER

  • OFFER_BODY

  • OFFER_BUTTON_1

  • OFFER_BUTTON_2

  • OFFER_BUTTON_3

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, utilice los dos comandos siguientes:

cxone('guide', 'setFullDisplay');
cxone('guide', 'setCustomCss', '[data-selector="GUIDE_SINGLE_MENU_CLOSE_BUTTON"] {display: none !important;}');

Encuesta de precontacto de Hide 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', {email: 'dre@classics.com'});

Establecer valores de campo personalizados para la encuesta previa al contacto

Utilice esta API para establecer valores para los campos personalizados que aparecen en una encuesta previa al contacto. Puede definir valores para lo siguiente:

  • Nombre

  • Cualquier campo personalizado de contacto

  • Cualquier campo personalizado de cliente

Puede marcar un valor de campo personalizado como oculto:verdadero. El formulario de encuesta previa al contacto no muestra el campo oculto. Pero el valor que establezca 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 API. El visitante puede utilizar los valores predeterminados o cambiarlos a su gusto.

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 personalizados de contacto. El valor del correo electrónico se oculta en la encuesta previa al contacto y se pasa directamente al chat. El valor de la dirección 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 un campo personalizado de contacto y 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'}]});

Condiciones 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 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 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.

Si creó un punto de entrada en el otoño de 2024 o más tarde, 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 Regla para Aplicaciones de Página Única (SPA)

Para admitir el enrutamiento dinámico en aplicaciones de una sola página, puede configurar Guide para que vuelva 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 utilizando el módulo de análisis.

  • 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 ejecutado, se vuelven a evaluar inmediatamente.

  • Los oyentes de Regla y los temporizadores se reinician como si la Página acabara de cargarse.

De forma predeterminada, el parámetro se establece en false.