Incorpore Guide en su sitio web

Debe incrustar el código Guide JavaScript en cada página de su sitio web en la que desee mostrar las Guide reglas de participación que creó.

Para acceder al código de inserción, necesita el permiso Guide Configuration.

Vea un video corto sobre cómo incrustar el código de Guide JavaScript.

  1. Haga clic en el selector de aplicaciones icon of app selector y seleccioneGuide.
  2. Haga clic en Integraciones. Aparece una página con el código JavaScript que es específico de su abonado.

    La imagen de ejemplo contiene áreas difuminadas donde verá valores específicos de su abonado.

  3. Haga clic en Copiar código con Guide para copiar el código.

  4. Paste this code into the header of each webpage on which you want to display a Guide template or proactive offer.

    Como alternativa, si su sitio web está integrado con un administrador de etiquetas, puede usarlo para ejecutar el script del sitio web.

Habilitar Demo Chat y Aplicar Configuración de Desarrollo de marca

Para obtener una vista previa del comportamiento del chat durante la implementación, puede configurar Guide para inicializar el chat en modo Demo. Para habilitar el chat Demo, agregue el parámetro demoMode a la función cxone('guide','init'); en su script incorporado.

cxone('chat', 'init', brandId, channelId, locale, { controlledByGuide: true, demoMode: true, customContainerId: 'customId'});

Cuando demoMode está configurado en true.

  • Guide inicia la ventana de chat en modo demo.

  • El chat se carga en un estado predefinido de solo lectura.

De forma predeterminada, el parámetro está configurado en false.

Una vez que el Chat está inicializado en modo Demo, puede actualizar la vista previa en vivo mediante la API de Desarrollo de marca:

cxone('chat','setThemeColors', {headerBgColor, headerFontColor, primaryMessageBgColor, primaryMessageFontColor, secondaryMessageBgColor, secondaryMessageFontColor});

Cuando usa setThemeColors:

  • El desarrollo de marca se amplía para incluir la personalización del chat.

  • Chat muestra la marca configurada en la ventana de chat.

  • Las actualizaciones de desarrollo de marca se pueden utilizar junto con el chat demo para que pueda previsualizar la apariencia configurada durante la implementación.

Usted también puede usar CSS personalizado con la configuración de marca:

Habilitar la Reevaluación de reglas para Aplicaciones de una Sola Página (SPAs)

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 está configurado en true.

  • Guide supervisa 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 las que tienen evaluaciones estáticas o las que ya se activaron, se vuelven a evaluar de inmediato.

  • Los agentes de escucha y los temporizadores de la regla se reinician como si la página se hubiera cargado recién.

El parámetro está configurado de forma predeterminada en false.

Definir el Idioma para utilizar en Guide

Para anular cualquier configuración de idioma del navegador y forzar que los visitantes de Guide vean 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'});

Sustituir #### con el id de abonado de cuatro dígitos.

El contenido que escriba en una oferta proactiva seguirá apareciendo en el idioma en el que fue escrito. Esto supone que ha configurado las cadenas de traducción de Guide para el francés.

Desactivar seguimiento

Para usar las condiciones de fecha y hora o de disponibilidad del agente, pero sin usar el rastreo web, agregue el siguiente comando de API JavaScript al script de inserción:

cxone('disableModule', 'analytics')

Prácticas recomendadas para sitios web

  • No utilice el !important parámetro en CSS para elementos genéricos en su sitio web. Si lo hace, el CSS de su sitio web puede filtrarse hacia Guide y cambiar su diseño.

  • No sobrescriba las funciones básicas de JavaScript en su sitio web. Si lo hace, Guide podría no funcionar correctamente.

  • Puede personalizar la apariencia y el comportamiento de Guide mediante API de JavaScript.