Personnaliser le widget Guide à l'aide des API

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

Ajuster CSS

Modifie les éléments CSS du gadget logiciel Guide. Effectuez toutes les modifications CSS en un seul appel. Un deuxième appel annule les modifications du 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;}');
Interface Guide sélecteurs de données
Gadget logiciel Guide et boutons

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

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

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

Masquer le Sondage de 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', {email: 'dre@classics.com'});

Définir des valeurs de champ personnalisées pour le Sondage de pré-contact

Utilisez cette API pour définir des valeurs pour les champs personnalisés qui apparaissent dans une enquête de pré-contact. Vous pouvez définir une valeur pour ce qui suit :

  • Nom

  • Tout champ personnalisé du contact

  • Tout champ personnalisé du client

Vous pouvez marquer une valeur de champ personnalisé comme hidden:true. Le formulaire d'enquête de précontact n'affiche pas le champ masqué. Mais la valeur que vous définissez pour le champ masqué est transmise à la fenêtre de discussion.

Pour les champs personnalisés non marqués comme hidden:false, Guide prédéfinit les champs personnalisés dans l'enquête de pré-contact avec les valeurs spécifiées par la commande API. Le visiteur peut utiliser les valeurs par défaut ou les modifier à sa guise.

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

L'exemple de syntaxe JavaScript suivant montre comment spécifier un nom caché et transmis directement au clavardage :

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

L'exemple de syntaxe JavaScript suivant montre comment spécifier deux valeurs de champ personnalisé de contact. La valeur email est masquée dans l'enquête de pré-contact et transmise directement au chat. La valeur adresse est visible et peut être modifiée dans l'enquête 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 spécifier un champ personnalisé client :

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

L'exemple de syntaxe JavaScript suivant montre comment spécifier à 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 contenir moins de 256 caractères, mais ne doit 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 à Page unique (SPA)

Pour prendre en charge le routage dynamique dans les applications monopages, vous pouvez configurer Guide pour 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.

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

  • Toutes les règles, y compris celles qui ont fait l'objet d'évaluations statiques ou celles qui ont déjà été déclenchées, sont immédiatement réévaluées.

  • Les écouteurs de Règle et les minuteries redémarrent comme si la Page venait de se charger.

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