Pour utiliser Guide avec votre site Web, vous pouvez simplement intégrer Guide sur chaque page de votre site Web où vous souhaitez proposer un engagement.
Toutefois, si vous êtes familiarisé avec le développement Web et que vous souhaitez personnaliser l’apparence et le comportement du gadget logiciel Guide, vous pouvez le faire en utilisant les appels API
Les API vous permettent d’automatiser certaines fonctionnalités en connectant votre système CXone avec d’autres logiciels utilisés par votre organisation. dans le code JavaScript. Voici les types de changements que vous pouvez apporter :
-
Apparence et comportement du gadget logiciel Guide: Personnalisez l’apparence et le comportement du gadget logiciel Guide. Il s’agit notamment de modifier la taille du gadget logiciel ou la taille des boutons, d’afficher le gadget logiciel en mode plein écran, etc.
-
Préférences de clavardage lorsqu’il est proposé dans le gadget logiciel Guide : Personnalisez l’apparence et le comportement du clavardage lorsqu’il est proposé dans le gadget logiciel Guide. Il s’agit notamment de modifier les informations contenues dans la fenêtre de clavardage, de modifier l’apparence de la fenêtre de clavardage, de définir des feuilles de style CSS personnalisées, etc.
-
Préférences en matière de rapports : Personnalisez la façon dont Guide suit les engagements et les conversions. Vous pouvez utiliser ces API pour définir des événements personnalisés, stocker des variables relatives aux visiteurs, stocker des données de conversion, attribuer et supprimer des balises Web, etc.
Comprendre le fonctionnement de Guide
Le gadget logiciel Guide est un module Web que le chargeur CXone charge sur votre site Web. Le module Web contient une application JavaScript construite à l’aide du cadre Svelte. L’application utilise des magasins d’états de base qui assurent le suivi de la configuration Guide, du modèle actif, de l’état du clavardage actif, de l’état de l’interface utilisateur, etc. Les valeurs de ces magasins d’états déterminent ce qui est affiché au visiteur.
Lorsque vous intégrez Guide sur une page de votre site Web et qu’un visiteur consulte la page, Guide récupère la configuration spécifique à votre locataire. Cette demande renvoie un résultat JSON contenant des règles, des boutons, des points d’entrée, des traductions, des articles référencés et des indicateurs de fonctionnalité. Il utilise ensuite le moteur de règles intégré pour traiter les règles et les conditions qui peuvent ou non entraîner l’apparition d’un modèle ou d’une offre proactive sur la page.
Pour gérer les données des visiteurs entre les rechargements de pages, Guide utilise le stockage local et le stockage de session. Cela permet à Guide de fournir la prise en charge interdomaine sur les navigateurs pris en charge. Cela signifie également que Guide n’utilise pas de témoins de navigateur.
Configurez les personnalisations Guide dans un environnement de test avant de les publier dans votre environnement de production. Cela aidera à minimiser les perturbations pour les visiteurs de votre site Web. Cela vous aidera également à vous assurer que vos personnalisations fonctionnent comme prévu.
Ajouter des appels JavaScript
- Cliquez sur le sélecteur d’applications
et sélectionnez ACD. -
Accédez à Digital > Points d’accès numériques.
- Sous Vos canaux, cliquez sur Script de site Web.
- Copiez le code JavaScript de la page et collez-le dans votre code ou dans un programme d’édition de texte. Veillez à inclure les balises d’ouverture et de fermeture <script>.
-
Juste au-dessus de la balise de fermeture </script> du code que vous avez collé, ajoutez les appels JavaScript à utiliser. Dans l’exemple d’image ci-dessous, le commentaire indique où ajouter des appels.
Les appels JavaScript Guide que vous pouvez utiliser sont décrits ci-dessous sur cette page, ainsi que les API liées au clavardageGuide et les API liées aux rapportsGuide.
-
Copiez et collez l’intégralité du script, y compris les balises d’ouverture et de fermeture <script>, dans l’en-tête d’une page de votre site Web.
-
Visitez la page modifiée et assurez-vous que les personnalisations Guide fonctionnent comme prévu.
-
Lorsqu’il a été entièrement testé et qu’il fonctionne comme prévu, copiez le script final dans l’en-tête de chaque page qui doit avoir cette personnalisation Guide.
Personnaliser le gadget logiciel Guide
Cet appel vous permet d’ajuster l’apparence et le comportement du gadget logiciel Guide.
Ajuster CSS
Modifie les éléments CSS du gadget logiciel Guide. Par exemple :
cxone('guide', 'setCustomCss', '[data-selector="GUIDE_ELEMENT"] {background: red !important;}');Pour utiliser cet extrait, remplacez GUIDE_ELEMENT par une valeur du tableau suivant et remplacez l’exemple CSS entre accolades { } par votre CSS personnalisé :
|
Interface Guide |
Valeurs GUIDE_ELEMENT |
|---|---|
| Gadget logiciel Guide et boutons |
|
| Portails |
|
| Articles |
|
|
Clavardages et courriels |
|
|
Offres proactives |
|
Ajuster la taille des boutons de canal
Définit la taille à utiliser pour les boutons de canal. Saisissez une valeur en ems ou en pixels. La taille par défaut des boutons est 3em.
cxone('guide', 'setButtonSize', '80px');Ajuster le décalage des boutons de canal
Définit la valeur de décalage à utiliser pour les boutons de canal. Saisissez une valeur en ems ou en pixels.
cxone('guide', 'setOffsetX', '48px');cxone('guide', 'setOffsetY', '3em');Ouvrir le menuGuide
Affiche le menu Guide des boutons.
cxone('guide', 'openMenu');Fermer le menu Guide
Ferme le menu Guide des boutons.
cxone('guide', 'closeMenu');Modifier la taille de la police
Définit la taille de police par défaut utilisée dans le gadget logiciel Guide. Saisissez une valeur en pixels. La taille de police par défaut est de 13 pixels. La valeur définie ici détermine la taille en em utilisée dans l’ensemble de Guide.
cxone('guide','setFontSize',12);Modifier la hauteur du gadget logiciel Guide
Définit la hauteur du gadget logiciel Guide. Saisissez une valeur en ems ou en pixels. La hauteur par défaut est 40em. La hauteur maximale est de 40em.
cxone('guide','setDesiredGuideHeight','30em');Modifier la largeur du gadget logiciel Guide
Définit la largeur du gadget logiciel Guide. Saisissez une valeur en ems ou en pixels. La largeur par défaut est 23.125em.
cxone('guide','setDesiredGuideWidth','608px');Afficher Guide en mode plein écran
Vous pouvez afficher Guide en mode plein écran. Le contenu de Guide apparaît dans une fenêtre au lieu du gadget logiciel Guide.
cxone('guide','setFullDisplay');En mode plein écran, la meilleure pratique consiste à masquer le bouton Réduire. Pour ce faire, utilisez les commandes suivantes :
cxone('guide','setFullDisplay');cxone('guide', 'setCustomCss', '[data-selector="GUIDE_CHANNEL_CLOSE_BUTTON"] {display: none !important;}');Omettre le sondage Web pré-contact du clavardage
Utilisez cette API pour demander à Guide de démarrer un clavardage sans afficher le sondage Web pré-contact.
cxone('guide','hidePreSurvey');Utilisez les API de clavardage pour prédéfinir les valeurs du sondage Web pré-contact. Vous pouvez également les spécifier en tant que paramètres pour l’API hidePreSurvey. Par exemple :
cxone('guide','hidePreSurvey', 'Dre', 'dre@classics.com');Afficher directement un point d’entrée
Utilisez cette API pour afficher manuellement un point d’entrée dans une fenêtre. Le bouton par défaut du point d’entrée est utilisé.
Cette API est fournie pour les cas spécifiques où quelqu’un peut avoir besoin d’afficher manuellement un point d’entrée dans une fenêtre. Elle n’est généralement pas recommandée et ne doit pas être utilisée en combinaison avec les règles d’engagement Guide.
Pour utiliser cette API, vous devez transmettre l’ID du point d’entrée à afficher. Vous pouvez obtenir l’ID du point d’entrée en cliquant sur Modifier à côté du point d’entrée et en copiant la dernière partie de l’URL de la page.
cxone('guide','openEntrypoint','e1348160-2016-4d91-958e-fd063c669fe6');