Pour utiliser Conseils avec votre site Web, vous pouvez simplement intégrer Conseils sur chaque page de votre site Web à l’endroit où vous souhaitez offrir une possibilité d’engagement.
Toutefois, si vous pratiquez le développement Web, et souhaitez personnaliser l’aspect et le comportement du widget Conseils, vous pouvez utiliser des appels d’API
Les API vous permettent d'automatiser certaines fonctionnalités en connectant votreCXone système avec d'autres logiciels utilisés par votre organisation. pour le code JavaScript. Vous trouverez ci-dessous les types de modifications réalisables :
-
Aspect et comportement du widget Guide : personnalisez l’aspect et le comportement du widget Guide. Cela inclut la modification de la taille du widget, la modification de la taille des boutons, l’affichage du widget en mode plein écran, etc.
-
Préférences lorsque l’option de chat est proposée dans le widget Guide : personnalisez l’aspect et le comportement du chat lorsqu’il est proposé dans le widget Guide. Cela inclut la modification des informations dans la fenêtre de chat, la modification de l’aspect de la fenêtre de chat, la définition du code CSS personnalisé, etc.
-
Préférences de rapport : personnalisez la façon dont Guide suit les engagements et les conversions. Vous pouvez utiliser ces API lors de la définition d’événements personnalisés, le stockage de variables de visiteurs, le stockage de données de conversion, l’affectation et le retrait de balises Web, etc.
Comprendre le fonctionnement de Conseils
Le widget Conseils est un module Web que CXone Loader charge sur votre site Web. Ce module Web contient une application JavaScript qui est intégrée dans le framework Svelte. L’application utilise des magasins d’état basique qui conservent une trace de la configuration de Conseils, le modèle actif, les états de chat actifs, l’état de l’interface utilisateur, etc. Les valeurs de ces magasins d’état déterminent le contenu visible par l’internaute.
Lorsque vous intégrez Conseils sur une page de votre site Web, et si un internaute visualise cette page, Conseils extrait la configuration propre à votre locataire. Cette requête renvoie un résultat JSON avec des règles, des boutons, des points d’entrée, des traductions, des articles référencés et des indicateurs de fonctionnalités. Elle utilise ensuite le moteur de règles intégré pour traiter les règles et les conditions qui peuvent déboucher ou non sur un modèle ou une offre proactive sur la page.
Pour gérer les données des visiteurs entre les rechargements de page, Conseils utilise le stockage local et le stockage de session. Cela permet à Conseils de prendre en charge les domaines multiples sur les navigateurs compatibles. Cela signifie également que Conseils n’a pas recours aux cookies de navigateurs.
Configurez les personnalisations de 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.
Ajout d’appels JavaScript
- Cliquez sur le sélecteur d'applications
et sélectionnezACD. -
Aller àDigital >Points de contact numériques.
- Dans la section Vos canaux, cliquez sur Script du site Web.
- Copiez le code JavaScript à partir de la page et collez-le dans votre code ou un programme de modification du texte. Veillez à inclure l’ouverture et la fermeture des balises <script>.
-
Juste au-dessus de la balise </script> de fermeture du code que vous avez collé, ajoutez les appels JavaScript à utiliser. Dans l'illustration suivante, le commentaire indique où ajouter des appels.
Les appels Guide JavaScript que vous pouvez utiliser sont décrits ci-dessous, sur cette page, ainsi que les API Guide en relation avec le chat et les API Conseils liées aux rapports.
-
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.
-
Consultez la page modifiée et assurez-vous que les personnalisations de Guide fonctionnent comme prévu.
-
Après avoir procédé à l’ensemble des tests et vous être assuré que le script final fonctionne comme prévu, copiez-le dans l’en-tête des pages devant utiliser cette personnalisation de Guide.
Personnalisation du widget Guide
Cet appel vous permet d’ajuster l’aspect et le comportement du widget Guide.
Ajustement du code CSS
Modifie les éléments CSS pour le widget Guide. Par exemple :
cxone('guide', 'setCustomCss', '[data-selector="GUIDE_ELEMENT"] {background: red !important;}');Pour utiliser ce snippet, remplacez GUIDE_ELEMENT par une valeur provenant du tableau suivant et remplacez l’exemple de code CSS entre accolades { } par votre code CSS personnalisé :
|
Interface Guide |
Valeurs GUIDE_ELEMENT |
|---|---|
| Widget Guide et boutons |
|
| Portails |
|
| Articles |
|
|
Chats et e-mails |
|
|
Offres proactives |
|
Réglage de la taille du bouton de canal
Définit la taille à utiliser pour les boutons de canal. Entrez une valeur en ems ou pixels. La taille du bouton par défaut est 3em.
cxone('guide', 'setButtonSize', '80px');Réglage du décalage du bouton de canal
Définit la valeur de décalage à utiliser pour les boutons de canal. Entrez une valeur en ems ou pixels.
cxone('guide', 'setOffsetX', '48px');cxone('guide', 'setOffsetY', '3em');Ouverture du menu Guide
Affiche le menu de boutons Guide.
cxone('guide', 'openMenu');Fermeture du menu Guide
Ferme le menu de boutons Guide.
cxone('guide', 'closeMenu');Modification de la taille de la police
Définit la taille de la police utilisée dans le widget Guide. Saisissez une valeur en pixels. La taille de la police par défaut est de 13 pixels. La valeur définie ici détermine la taille em utilisée à tous les niveaux de Guide.
cxone('guide','setFontSize',12);Modification de la hauteur du widget Guide
Définit la hauteur du widget Guide. Entrez une valeur en ems ou pixels. La hauteur par défaut est de 40em. La hauteur maximale est de 40em.
cxone('guide','setDesiredGuideHeight','30em');Modification de la largeur du widget Guide
Définit la largeur du widget Guide. Entrez une valeur en ems ou pixels. La valeur par défaut est de 23,125em.
cxone('guide','setDesiredGuideWidth','608px');Affichage de Guide en mode plein écran
Vous pouvez afficher Guide en mode plein écran. Le contenu de Guide s’affiche dans une fenêtre au lieu du widget Guide.
cxone('guide','setFullDisplay');La meilleure méthode en mode plein écran 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;}');Omission de l'enquête Web de pré-contact par chat
Utilisez cette API pour demander à Guide de démarrer un chat sans afficher l'enquête Web de pré-contact.
cxone('guide','hidePreSurvey');Utilisez les API de chat pour prédéfinir les valeurs de l'enquête Web de 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');Affichage direct d’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 prévue pour une situation spécifique lorsque quelqu’un doit afficher manuellement un point d’entrée dans une fenêtre. Elle n’est pas généralement recommandée, et elle ne doit pas être utilisée en combinaison avec les règles d'engagement de Guide.
Pour utiliser cette API, vous devez transférer l’ID du point d’entrée à afficher. Vous pouvez obtenir l'identifiant du point d'entrée en cliquant sur Modifier en regard du point d'entrée, puis en copiant la dernière partie de l'URL de la page.
cxone('guide','openEntrypoint','e1348160-2016-4d91-958e-fd063c669fe6');