Intégrer Guide à votre site Web

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

Visionnez 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 Intégrations. Une page apparaît avec le code JavaScript spécifique à votre locataire.

   Visualiser l’image

   

   L’image d’exemple contient des zones floutées où vous verrez des valeurs propres à 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.

   Si votre site Web est intégré à un gestionnaire de balises, vous pouvez également l’utiliser pour exécuter le script du site Web.
   

Activer le clavardage de démonstration et appliquer les Paramètres d’image de marque

Pour prévisualiser le comportement du clavardage pendant l’implémentation, vous pouvez configurer Guide pour initialiser le clavardage en mode démonstration. Pour activer le clavardage de démonstration, 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 clavardage en mode démonstration.

• Le clavardage se charge dans un état prédéfini, en lecture seule.

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

Une fois que le clavardage est initialisé en mode démonstration, vous pouvez mettre à jour l’aperçu en direct à l’aide de l’API Image de marque :

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

Lorsque vous utilisez setThemeColors :

• L'image de marque est étendue pour inclure la personnalisation du clavardage.

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

• Les mises à jour de l'image de marque peuvent être utilisées avec le clavardage de démonstration afin que vous puissiez prévisualiser l'apparence configurée pendant l'implémentation.

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

• Si les paramètres d'image de marque et le CSS personnalisé n'entrent pas en conflit, les deux sont appliqués.

• Si les paramètres d'image de marque et le CSS personnalisé entrent en conflit, le CSS personnalisé a préséance.

Activer la réévaluation des Règles pour les Applications d'une seule Page (SPA)

Pour prendre en charge le routage dynamique dans les applications d'une seule page, vous pouvez configurer Guide afin de réévaluer automatiquement les règles lorsqu'un utilisateur navigue vers 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 d'analytique.

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

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

• Les écouteurs de règles et les minuteries redémarrent comme si la page venait tout juste de se charger.

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

Configuration de la Langue à utiliser pour Guide

Pour outrepasser tous les paramètres de langue du navigateur et forcer les visiteurs de Guide à voir le contenu dans une langue précise, modifiez le script d'intégration. Ajoutez le paramètre locale à la commande cxone('guide','init'); à la fin du script, puis précisez la langue désirée. Par exemple, vous pouvez le configurer en français comme suit :

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

Remplacez #### par votre id du locataire à quatre chiffres.

Désactiver le suivi

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

cxone('disableModule', 'analytics')

Meilleures pratiques en matière de site Web

• N'utilisez pas le !important paramètre dans CSS pour les éléments génériques de votre site Web. Si vous le faites, le CSS de votre site Web peut s’infiltrer dans Guide et en modifier la conception.

• Ne contournez pas les fonctions de base JavaScript de votre site Web. Si vous le faites, Guide risque de ne pas fonctionner correctement.

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