Intégrez Guide sur votre site Web

Vous devez intégrer le code Guide JavaScript sur chaque page de votre site Web sur laquelle vous souhaitez afficher les règles d’engagement Guide que vous avez créées.

Regardez une courte vidéo sur l'intégration du code Guide JavaScript.

1. Cliquez sur le sélecteur d'applications et sélectionnez Guide.

2. Cliquez sur Integrations. Une page s’affiche avec un code JavaScript propre à votre locataire.

   Voir l'image

   

   L'image d'exemple contient des zones floues où vous verrez des valeurs spécifiques à votre locataire.

3. Cliquez sur Copier le code avec Guide pour copier le code.

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

   Vous pouvez également, si votre site Web est intégré à un gestionnaire de balises, utiliser ce dernier pour exécuter le script du site Web.
   

Activer le chat Démo et appliquer les Paramètres d'identité de marque

Pour prévisualiser le comportement du chat pendant l'implémentation, vous pouvez configurer Guide afin d'initialiser le chat en mode démo. Pour activer le chat démo, ajoutez le paramètre demoMode à la fonction cxone('guide','init'); dans votre script intégré.

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

Lorsque demoMode est défini sur true.

• Guide lance la fenêtre de chat en mode démo.

• Le chat se charge dans un état prédéfini et en lecture seule.

Par défaut, le paramètre est défini sur false.

Une fois le Chat initialisé en mode démo, vous pouvez mettre à jour l'aperçu en direct à l'aide de l'API Identité de marque :

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

Lorsque vous utilisez setThemeColors :

• L'identité de marque est étendue pour inclure la personnalisation du chat.

• Chat affiche l'image de marque configurée dans la fenêtre de chat.

• Les mises à jour de l'identité de marque peuvent être utilisées avec le chat de démo afin de pouvoir prévisualiser l'apparence configurée pendant l'implémentation.

Vous pouvez également utiliser du code CSS personnalisé avec les paramètres de marque :

• Si les paramètres de marque et le CSS personnalisé ne sont pas en conflit, les deux sont appliqués.

• Si les paramètres de marque et le CSS personnalisé entrent en conflit, le CSS personnalisé est prioritaire.

Activer la réévaluation des règles pour les Single Page Applications (SPAs)

Pour prendre en charge le routage dynamique dans les applications monopages, vous pouvez configurer Guide afin de réévaluer automatiquement les règles lorsqu'un utilisateur accède à une nouvelle Page. Pour activer le routage dynamique, ajoutez le paramètre resetRulesOnNewPage à la fonction cxone('guide','init'); dans votre script intégré :

cxone('guide','init', {resetRulesOnNewPage: true});

Lorsque resetRulesOnNewPage est défini sur true.

• Guide surveille les transitions de page à l'aide du module analytics.

• Dès la détection d'une nouvelle page, le moteur de règles revient à son état initial.

• Toutes les règles, y compris celles comportant des évaluations statiques ou celles qui se sont déjà déclenchées, sont immédiatement réévaluées.

• Les écouteurs de règle et les minuteurs redémarrent comme si la Page venait d'être chargée.

Par défaut, le paramètre est défini sur false.

Définition de la Langue à utiliser pour Guide

Pour outrepasser tous les paramètres de langue du navigateur et forcer les visiteurs Guide à voir le contenu dans une langue spécifique, modifiez le script d'intégration. Ajoutez le paramètre locale à la commande cxone('guide','init'); à la fin du script et précisez la langue souhaitée. Par exemple, vous pouvez sélectionner le français de la façon suivante :

cxone('init','####'); 
cxone('guide','init', { locale: 'ja', templateId:'xxxxxxx'});

Remplacez #### par l'id du locataire à quatre chiffres.

Désactiver le suivi

Pour utiliser des conditions de date et d'heure ou de disponibilité des Agents, mais sans utiliser le suivi Web, ajoutez la commande JavaScript API suivante au script d'intégration :

cxone('disableModule', 'analytics')

Bonnes pratiques relatives au site Web

• N'utilisez pas le paramètre !important dans la feuille CSS pour les éléments génériques de votre site Web. Si vous le faites, le CSS de votre site Web peut se répercuter sur Guide et modifier sa conception.

• Ne contournez pas les fonctions JavaScript de base de votre site Web. Sinon, Guide risque de ne pas fonctionner correctement.

• Vous pouvez personnaliser l'apparence et le comportement de Guide en utilisant les API JavaScript.