Personnaliser le gadget logiciel Guide à l'aide des API

Vous pouvez personnaliser l'apparence et le comportement du gadget logiciel Guide à l'aide de ces JavaScript API.

Ajuster CSS

Modifie les éléments CSS du gadget logiciel Guide. Apportez toutes les modifications CSS en un appel unique. Un second appel remplace les modifications effectuées par le premier appel.

Exemple de syntaxe :

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_CHANNEL_BACK_BUTTON"] {color: white !important; background: red !important;}');

Pour masquer un sélecteur de données, utilisez display:none. Par exemple, pour masquer le bouton de menu Guide :

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_MENU_BUTTON"] {display: none;}');

Sélecteurs de données disponibles

Interface Guide	Sélecteurs de données
gadget logiciel Guide et buttons	GUIDE_CHANNEL_BUTTON GUIDE_CHANNEL_BACK_BUTTON GUIDE_SINGLE_MENU_CLOSE_BUTTON GUIDE_MULTIPLE_MENU_CLOSE_BUTTON GUIDE_CUSTOMER_PORTAL_CLOSE_BUTTON GUIDE_FRAME_CONTENT GUIDE_CHANNEL_ICON GUIDE_CHANNEL_MENU_ICON
Portails	PORTAL_HEADER_ICON PORTAL_HEADER PORTAL_TITLE PORTAL_SUBTITLE GUIDE_CHANNEL_BUTTON_1 GUIDE_CHANNEL_BUTTON_2 GUIDE_CHANNEL_BUTTON_3 GUIDE_CHANNEL_BUTTON_4 GUIDE_MENU_BUTTON KB_WIDGET_TITLE KB_WIDGET_SEARCHBAR KB_SEE_MORE_BUTTON PORTAL_BODY KB_WIDGET CHANNELS_WIDGET
Articles	KB_HEADER KB_BODY
Clavardages et courriels	PRECONTACT_SURVEY BEGIN_CHAT SEND_EMAIL INPUT TEXTAREA DROPDOWN TREE PRECONTACT_SURVEY_DESCRIPTION PRECONTACT_SURVEY_ICON TREE_POPUP_BACK_BUTTON CLOSE_TREE_POPUP CLOSE
Offres proactives	OFFER_CLOSE_BUTTON OFFER_HEADER OFFER_BODY OFFER_BUTTON_1 OFFER_BUTTON_2 OFFER_BUTTON_3

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');

Changer la Taille de 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 14 pixels. La valeur définie ici détermine la taille en em utilisée dans l’ensemble de Guide.

cxone('guide','setFontSize',14);

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 deGuide 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 deux commandes suivantes :

cxone('guide', 'setFullDisplay');

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_SINGLE_MENU_CLOSE_BUTTON"] {display: none !important;}');

Masquer le formulaire de Sondage de pré-contact

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 préciser en tant que paramètres pour l’API hidePreSurvey. Par exemple :

cxone('guide','hidePreSurvey', 'Dre', {email: 'dre@classics.com'});

Définir les valeurs des Champs personnalisés pour le Sondage de pré-contact

Utilisez cette API pour définir les valeurs des champs personnalisés qui apparaissent dans un sondage de pré-contact. Vous pouvez définir des valeurs pour les éléments suivants :

Name (Nom)
N’importe quel champ personnalisé de contact
N’importe quel champ personnalisé de client

Vous pouvez marquer la valeur d’un champ personnalisé comme hidden:true. Le formulaire de sondage de pré-contact n’affiche pas le champ masqué. Toutefois, la valeur que vous définissez pour le champ masqué est transmise à la fenêtre de clavardage.

Pour les champs personnalisés qui ne sont pas marqués comme hidden:false, Guide prédéfinit les champs personnalisés dans le sondage de pré-contact avec les valeurs précisées par la commande d’API. Le visiteur peut utiliser les valeurs par défaut ou les modifier à sa convenance.

Les champs personnalisés sont limités à 1024 caractères.

L’exemple de syntaxe JavaScript suivant montre comment préciser un nom qui est masqué et transmis directement au clavardage :

cxone('guide','setCustomFields', {customerName: {value:'Francis', hidden: true}});

L’exemple de syntaxe JavaScript suivant montre comment préciser deux valeurs de champ personnalisé de contact. La valeur email est masquée dans le sondage de pré-contact et transmise directement au clavardage. La valeur address est visible et peut être modifiée dans le sondage de pré-contact.

cxone('guide','setCustomFields', 
{contactCustomFields:[
{ident:'email', value: 'josey@nice.com', hidden:true}, 
{ident: 'address', value: '123 Main St', hidden:false}
]});

L’exemple de syntaxe JavaScript suivant montre comment préciser un champ personnalisé de client :

cxone('guide','setCustomFields', 
{contactCustomerFields:[
{ident: 'email', value: 'kaya.sanchez@acme.com'}
]});

L’exemple de syntaxe JavaScript suivant montre comment préciser à la fois un champ personnalisé de contact et un champ personnalisé de client :

cxone('guide','setCustomFields', 
{contactCustomFields:[{ident: 'email', value: 'josey@nice.com', hidden:true}, {ident:'address', value: '123 Main St', hidden:false}], contactCustomerFields:[{ident: 'email', value: 'kaya.sanchez@acme.com'}]});

Conditions d'utilisation

Permet de mettre un document de conditions d’utilisation à la disposition des visiteurs à partir de la fenêtre de clavardage. Cette fonction ajoute un bouton à la fenêtre. Vous pouvez personnaliser l’étiquette et le style du bouton, ainsi que ce qui se passe lorsque les visiteurs cliquent dessus. L’action au clic peut afficher les conditions d’utilisation sous la forme d’une fenêtre interne ou d’un lien externe.

Dépendances :

Les propriétés display, type et url sont obligatoires.
display doit comporter moins de 256 caractères, mais ne peut pas être vide.
url doit commencer par https: ou https: et doit comporter moins de 2048 caractères.

Une fenêtre interne :

cxone('guide','showTermsOfUse', 'Show terms of Use', 'modal' , 'Our terms of use are ...');

Un lien externe :

cxone('guide','showTermsOfUse', {display: 'Terms of Use', type: 'externalLink', url: 'https://yourdomain.com/'});

Pour désactiver la fonctionnalité :

cxone('guide','hideTermsOfUse');

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.

Si vous avez créé un point d'entrée à l'automne 2024 ou après, contactez votre représentant de compte pour obtenir de l'aide afin de déterminer l'ID du point d'entrée.

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');

Activer la réévaluation des Règles pour les Applications monopages (SPA)

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 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'analyse.
Lorsqu'une nouvelle page est détectée, le moteur de règles revient à son état initial.
Toutes les règles, y compris celles ayant des évaluations statiques ou celles qui se sont déjà déclenchées, sont réévaluées immédiatement.
Les écouteurs de règles et les minuteurs redémarrent comme si la page venait tout juste de se charger.

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