Vous pouvez personnaliser l'apparence et le comportement du widget Guide à l'aide de ces JavaScript API.
Ajustement du code CSS
Modifie les éléments CSS pour le widget Guide. Effectuez toutes les modifications CSS en un seul appel. Un second appel annule les modifications apporté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 |
|---|---|
| Widget Guide et boutons |
|
| Portails |
|
| Articles |
|
|
Discussions et e-mails |
|
|
Offres proactives |
|
Ajuster la taille du bouton 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');Modifier la Taille de police
Définit la taille de la police utilisée dans le widget Guide. Entrez une valeur en pixels. La taille de police par défaut est de 14 pixels. La valeur définie ici détermine la taille em utilisée à tous les niveaux de Guide.
cxone('guide','setFontSize',14);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 Guide apparaît 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 deux commandes suivantes :
cxone('guide', 'setFullDisplay');
cxone('guide', 'setCustomCss', '[data-selector="GUIDE_SINGLE_MENU_CLOSE_BUTTON"] {display: none !important;}');Masquer le Sondage précontact du 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 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 les valeurs de Champ personnalisé pour le Sondage précontact
Utilisez cette API pour définir des valeurs pour les champs personnalisés qui apparaissent dans un sondage précontact. Vous pouvez définir des valeurs pour les éléments suivants :
-
Name (nom)
-
N'importe quel champ personnalisé de contact
-
Tout champ personnalisé client
Vous pouvez marquer une valeur de champ personnalisé comme hidden:true. Le formulaire du sondage 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 chat.
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 préalable au contact avec les valeurs spécifiées par la commande 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 chat :
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 précontact et transmise directement au chat. La valeur address est visible et peut être modifiée dans le sondage 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é 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é 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
Vous pouvez mettre un document de conditions générales à la disposition des visiteurs depuis la fenêtre de discussion. 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 doit pas être vide.
-
url doit commencer par https: ou https: et doit être inférieur à 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 une entrée de Point
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.
Si vous avez créé un point d'entrée à l'automne 2024 ou ultérieurement, 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 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');Activer la réévaluation des règles pour les Single Page Applications (SPAs)
Pour prendre en charge le routage dynamique dans les applications d'une seule page, vous pouvez configurer Guide afin de réévaluer automatiquement les règles lorsqu'un utilisateur accède à 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 analytics.
-
Dès qu'une nouvelle Page est détectée, le moteur de règles revient à son état initial.
-
Toutes les règles, y compris celles comportant des évaluations statiques ou celles qui se sont déjà déclenchées, sont immédiatement réévaluées.
-
Les écouteurs et les minuteries de la règle redémarrent comme si la Page venait juste de se charger.
Par défaut, le paramètre est défini sur false.