Configurez l'Interface Guide

Guide reprend les boutons de paramètres de marque et de canal par défaut que vous avez définis pour déterminer l’aspect du widget Guide sur votre site Web.

Meilleures pratiques

• Contactez votre service marketing pour sélectionner les images à utiliser pour les boutons de canal et les couleurs du thème de marque pour rester dans la continuité de votre site Web.

• Utilisez des boutons de canal et des thèmes de marque cohérents à l’échelle du site Web.

• Si vous avez plusieurs sites Web, déterminez si vous devez définir des paramètres de marque uniques pour chacun d'entre eux.

• Pour utiliser la couleur de marque par défaut, ne définissez pas la Couleur du thème lors de la définition des boutons ou des modèles.

• Pour ne pas appliquer les couleurs de marque par défaut, vous pouvez spécifier les couleurs à utiliser pour un bouton ou un modèle spécifique. Remarque :

  • Si vous définissez une Couleur de thème pour un modèle, cette couleur remplace celles qui sont définies dans les paramètres relatifs à la marque.

  • Si vous définissez une Couleur du thème pour un modèle et une Theme color pour un bouton, la couleur du bouton remplace les paramètres de couleur du modèle et de la marque.

• Pour une personnalisation avancée du style, vous pouvez utiliser les Guide API ou travailler avec votre représentant de compte pour créer une apparence personnalisée.

Configuration pour une marque

La fonction Branding définit les couleurs à utiliser par défaut pour les modèles, les boutons et les offres proactives. Guide fournit l'image de marque Default que vous pouvez personnaliser selon vos besoins. Si nécessaire, vous pouvez créer plusieurs paramètres de marque. Par exemple, si vous prévoyez de proposer Guide modèles sur différents sites web, vous pouvez utiliser une image de marque unique pour chaque site web. Lors de la définition de la règle permettant d'afficher un modèle ou une offre proactive, utilisez l'action Set Guide Branding pour déterminer l'image de marque à utiliser.

View a short video on creating branding.

1. Cliquez sur le sélecteur d'applications et sélectionnez Guide.

2. Cliquez sur Identité de marque.

3. Cliquez sur Nouvelle image de marque.

4. Entrez un nom de marque unique pour Titre de l'identité de marque.

5. Définissez Couleur du thème sur la couleur principale à utiliser pour le widget Guide. Pour spécifier la couleur, entrez une valeur hexadécimale ou cliquez sur la pipette afin de sélectionner une couleur.

   La Couleur du thème est utilisée pour :

   • La couleur de fond de l'en-tête.

   • Le bouton Réduire.
   • L'arrière-plan du bouton de canal.

   Il est utilisé sauf si :

   • un bouton de canal définit une couleur de thème qui outrepasse la couleur de la marque ;

   • un modèle définit une couleur de thème qui outrepasse la couleur de la marque ;

   • Vous définissez des préférences de marque supplémentaires au-delà des paramètres primaires. Par exemple, si vous définissez une couleur de bouton pour les offres proactives.

6. Définissez Couleur DE LA police sur la couleur à utiliser pour le texte qui apparaît dans le widget Guide. Cette couleur est utilisée pour le texte de l’en-tête, ainsi que la flèche qui s’affiche sur les boutons Réduire et Retour.

   Pour aider les personnes malvoyantes, maintenez un rapport de contraste de 4,5:1 entre la Couleur du thème et la Couleur DE LA police. Des outils En ligne permettent de vérifier le contraste.

7. Vous pouvez également affiner la personnalisation de la marque en utilisant les onglets General, Guide Template, Knowledge Base et Proactive Offer.

   En savoir plus sur General onglet

   Champ	Détails
   Largeur (EM)	La largeur du widget Guide en ems. La largeur par défaut est de 23,125 ems.
   Height (EM)	La hauteur du widget Guide en ems. La hauteur par défaut est de 40 ems.
   Couleur de l'Icône du bouton Fermer	Couleur à utiliser pour l’icône de fermeture du widget.
   Couleur de fond du bouton Fermer	Couleur de fond à utiliser pour l'icône de fermeture du widget.

   En savoir plus surGuide Templateonglet

   Champ	Détails
   Background Color	Couleur de fond à utiliser pour les modèles de portail client.
   Police et couleur de l'Icône	Couleur d’icône et de police à utiliser pour les modèles de portail client.
   Taille de police du titre (EM)	La taille du titre, en ems, à utiliser pour les modèles de portail client. Pour un résultat optimal, sélectionnez un modèle de portail client pour le prévisualiser, puis ajustez la taille de police du titre, si nécessaire.
   Taille de police du sous-titre (EM)	Taille de police des sous-titres, en em, à utiliser pour les modèles de portail client. Pour un résultat optimal, sélectionnez un modèle de portail client pour le prévisualiser, puis ajustez la taille de police du sous-titre, si nécessaire.

   En savoir plus surChat Windowonglet

   Champ	Détails
   Background Color	Couleur de fond à utiliser pour l'en-tête de la fenêtre de chat.
   Police et couleur de l'Icône	La couleur à utiliser pour le texte et les icônes dans l'en-tête de la fenêtre de chat.
   Message de l'Agent
   Bubble Background Color	Couleur de fond à utiliser pour les bulles de message de l'Agent.
   Couleur DE LA police	La couleur du texte à utiliser pour les messages d’agent.
   Message client
   Bubble Background Color	La couleur de fond à utiliser pour les bulles de Message du client.
   Couleur DE LA police	La couleur du texte à utiliser pour les messages client.

   En savoir plus sur lesKnowledge Baseonglet

   Champ	Détails
   Background Color	Couleur de fond à utiliser pour afficher les articles de base DE connaissances.
   Couleur DE LA police et de l'Icône	Couleur d’icône et de police à utiliser pour afficher les articles de base DE connaissances.

   En savoir plus surProactive Offeronglet

   Champ	Détails
   Taille de police du titre (EM)	Taille de police, en ems, à utiliser pour un titre d'offre proactive. Pour un résultat optimal, examinez l’aperçu de l’offre proactive, puis ajustez la taille de police du titre, si nécessaire.
   Taille de police du texte du corps (EM)	La taille de police, en ems, à utiliser pour le texte du corps dans une offre proactive. Pour un résultat optimal, examinez l’aperçu de l’offre proactive, puis ajustez la taille de police du corps de texte, si nécessaire.
   Couleur de l’en-tête	Couleur à utiliser pour la zone d’en-tête de l’offre proactive.
   Couleur de fond	Couleur à utiliser pour le fond de l’offre proactive.
   Couleur DE LA police	Couleur de police à utiliser pour l’offre proactive. Elle s’applique au texte du titre et du corps de texte.
   Primary Button Background and Font Color	Couleur de fond et de police du bouton d’appel à l’action principal dans les offres proactives.
   Secondary Button Background and Font Color	Couleur d’arrière-plan et de police des boutons secondaires dans les offres proactives.
   Position sur Mobile	Indique si l'offre proactive doit apparaître en Haut ou Bas de l'écran sur un appareil mobile.

8. Affichez un aperçu des paramètres de marque dans le panneau situé sur le côté droit de la page. L'aperçu est disponible dans tous les onglets, de général à Offre proactive. Lorsque vous modifiez les paramètres de marque, l'aperçu se met à jour automatiquement pour refléter vos modifications, ce qui vous permet de visualiser les mises à jour de l'interface de chat sans avoir à enregistrer ni à recharger la page.

9. Cliquez sur Par défaut pour définir cette image de marque comme image de marque par défaut. Lorsque vous définissez des paramètres de marque par défaut, ils sont appliqués à l’ensemble des modèles, qu’ils soient déjà en place ou nouveaux.

10. Cliquez sur enregistrer.

Travailler avec Ems

Guide utilise des em pour préciser la taille des éléments d'interface. Les em permettent un dimensionnement réactif des éléments d'interface sur différents appareils. La taille par défaut d'un em dans Guide est de 14 pixels. Vous pouvez modifier ce paramètre en utilisant l'API setFontSize.

Créer des Boutons de Canal

Créez un bouton pour chaque canal Divers moyens de communication vocale et numérique qui facilitent les interactions avec les clients dans un centre de contacts. que vous prévoyez de proposer dans Guide. une fois les boutons créés, vous pouvez les associer aux points d’entrée. Vous pouvez contourner ce bouton lors de la définition d’un modèle en définissant un autre bouton pour le point d’entrée.

View a short video on creating channel buttons.

1. Cliquez sur le sélecteur d'applications et sélectionnez Guide.

2. Cliquez sur Buttons. La Page Buttons s'affiche et répertorie tous les Boutons précédemment créés.

3. Cliquez sur Nouveau bouton.

4. Entrée un Titre pour le bouton.

5. Cliquez sur Importer pour importer l'Icône pour le bouton.

   Les images d’icône doivent faire moins de 50 Ko et les fichiers SVG sont recommandés.

6. Définissez une préférence d'Arrière-plan pour le bouton.

   • Sélectionnez Uni pour utiliser une couleur de fond pour le bouton de canal. Laissez le Theme color champ vide pour utiliser la couleur de fond par défaut du bouton de canal définie pour la marque. Ou utilisez le sélecteur de couleur pour sélectionner une autre couleur à utiliser comme couleur de fond du bouton. Pour spécifier la couleur, entrez une valeur hexadécimale ou cliquez sur la pipette afin de sélectionner une couleur.

   • Sélectionnez Transparent pour utiliser un arrière-plan transparent pour le bouton.

7. Cliquez sur enregistrer.

Ajouter des variantes de Langue pour la traduction

Vous pouvez créer des variantes de langue à utiliser avec Guide. De plus, vous pouvez modifier les libellés des éléments d’interface utilisateur de Guide.

Ajout d'une Langue personnalisée

1. Cliquez sur le sélecteur d'applications et sélectionnez Guide.

2. Cliquez sur Localisation.

3. Cliquez sur Nouvelle langue pour ajouter une nouvelle langue.

   En savoir plus sur les champs de cette étape

   Champ	Détails
   Name	Saisissez le nom de la langue.
   Language	Sélectionnez la Langue dans la liste déroulante.
   Pays	Sélectionnez le Pays dans la liste déroulante.
   Repli	Sélectionnez une langue de Repli à utiliser s'il n'existe pas de traduction pour une étiquette particulière.

4. Cliquez sur enregistrer. Les étiquettes d'interface utilisateur par défaut que vous pouvez traduire apparaissent dans la Section Traductions. Ces éléments sont en anglais, que vous devez traduire en langue souhaitée.
5. Traduisez les étiquettes de l'interface utilisateur. Pour chaque Valeur de traduction, remplacez le texte anglais par défaut par une version traduite dans la nouvelle langue. Par exemple, si vous ajoutiez le Portugais, vous pourriez remplacer Hide Chat par Ocultar Chat.
6. You can also translate custom fields that you already created:
   1. Cliquez sur ajouter en bas de la section Translations.
   2. Pour Translation Key, entrez la Label Translation Key du champ personnalisé.
   3. Entrez le texte traduit dans la zone Valeur de la traduction.

7. Cliquez sur enregistrer.

Modification du libellé dans une Langue donnée

1. Cliquez sur le sélecteur d'applications et sélectionnez Guide.

2. Cliquez sur Localisation.

3. Cliquez sur Edit à côté de la langue à modifier.

4. Faites défiler l’écran jusqu’au libellé à modifier et mettez à jour la Valeur de la traduction. Par exemple, vous pouvez modifier le libellé du bouton de chat en remplaçant Commencer chat par Commencer la discussion.

5. Cliquez sur enregistrer.

Interagir avec un widget Guide

Les internautes peuvent interagir avec un widget Guide en utilisant leur souris ou clavier pour parcourir les boutons. La navigation au clavier est limitée pour les visiteurs utilisant un Apple Mac avec le navigateur Safari ou Mozilla Firefox, sauf si cette option est activée dans le navigateur. Les touches fonctionnent comme prévu par défaut lors de l'utilisation du navigateur Chrome.