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;}');
Sélecteurs de données disponibles
| Interface Guide | sélecteurs de données |
|---|---|
| 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;}');Masquer l'enquête de pré-contact sur le chat
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 l'enquête 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.
L'exemple de syntaxe suivant montre comment spécifier un nom masqué et transmis directement au chat :
cxone('guide','setCustomFields', customerName: {value:"Francis", hidden: true});L'exemple de syntaxe 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 suivant montre comment spécifier un champ personnalisé client :
cxone('guide','setCustomFields',
contactCustomerFields:[
{ident: 'email', value: 'kaya.sanchez@acme.com'}
]);L'exemple de syntaxe suivant montre comment spécifier à la fois un champ personnalisé de contact et un champ personnalisé 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'}]);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');