Vous pouvez personnaliser l'apparence et le comportement du widget Guide à l'aide de ces API JavaScript.
Ajustement du code CSS
Modifie les éléments CSS pour le widget 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 |
|---|---|
| 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;}');Masquer l'enquête de pré-contact sur le 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', {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 des valeurs pour les éléments suivants :
-
Nom
-
Tout champ personnalisé de contact
-
Tout champ personnalisé de 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'}]);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');