Configuration de l’interface Guide

Guide utilise l’image de marque par défaut et les boutons de canal que vous définissez pour déterminer l’apparence du gadget logiciel Guide sur votre site Web.

Meilleures pratiques

• Travaillez avec votre service marketing pour sélectionner des images de boutons de canal et des couleurs d’image de marque qui complètent votre site Web.

• Utilisez des boutons de canal et une image de marque cohérents sur l’ensemble du site Web.

• Si vous avez plusieurs sites Web, déterminez si vous devez définir une image de marque unique pour chacun d’entre eux.

• Pour utiliser la couleur d’image de marque par défaut, ne définissez pas la couleur Theme color lorsque vous définissez les boutons ou les modèles.

• Pour remplacer la couleur d’image de marque par défaut, vous pouvez définir des couleurs différentes dans un bouton ou modèle spécifique. Il convient de noter ce qui suit :

  • Si vous définissez une Theme color pour un modèle, cette couleur remplace la couleur de l’image de marque.

  • Si vous définissez une Theme color 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 l’image de marque.

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

Créer une image de marque

L’image de marque 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 images de marque. Par exemple, si vous envisagez de proposer des modèles Guide Guide sur différents sites Web, vous pouvez utiliser une image de marque unique pour chaque site Web. Lorsque vous définissez la règle d’affichage d’un modèle ou d’une offre proactive, utilisez l’action Guide Set Branding pour déterminer l’image de marque à utiliser.

1. Cliquez sur le sélecteur d’applications et sélectionnezGuide.

2. Cliquez sur Branding.

3. Cliquez sur New Branding.

4. Saisissez un nom de marque unique pour Branding Title.

5. Définissez Theme Color comme la couleur primaire à utiliser pour le gadget logiciel Guide. Définissez la couleur en saisissant une valeur hexadécimale ou en cliquant sur la pipette pour sélectionner une couleur.

   La Theme Color est utilisée pour :

   • La couleur d’arrière-plan de l’en-tête.

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

   Elle est utilisée sauf si :

   • Un bouton de canal définit une couleur de thème qui remplace la couleur de l’image de marque.

   • Un modèle définit une couleur de thème qui remplace la couleur de l’image de marque.

   • Vous pouvez définir d’autres préférences en matière d’image de marque en plus des paramètres principaux. Par exemple, si vous définissez une couleur de bouton pour les offres proactives.

6. Définissez Font Color comme la couleur à utiliser pour le texte qui apparaît dans le gadget logiciel Guide. Cette couleur est utilisée pour le texte de l’en-tête et la flèche qui apparaît dans les boutons Réduire et Retour.

   Pour aider les malvoyants, maintenez un rapport de contraste de 4,5:1 entre la Theme Color et la Font Color. Des outils en ligne sont disponibles pour vérifier le contraste.

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

   Pour en savoir plus sur les champs, consultez l’ongletGeneraltab

   Champ	Détails
   Width (EM)	La largeur du gadget logiciel Guide en ems. La taille par défaut de votre em est basée sur les paramètres CSS ou les paramètres du navigateur. Pour de meilleurs résultats, sélectionnez un modèle de portail client à prévisualiser, puis ajustez la largeur du gadget logiciel Guide si nécessaire.
   Height (EM)	La hauteur du gadget logiciel Guide en ems. La taille par défaut de votre em est basée sur les paramètres CSS ou les paramètres du navigateur. Pour obtenir les meilleurs résultats, sélectionnez un modèle de portail client à prévisualiser, puis ajustez la hauteur du gadget logiciel Guide si nécessaire.
   Close Button Icon Color	La couleur à utiliser pour l’icône de fermeture du gadget logiciel.
   Close Button Background Color	La couleur d’arrière-plan à utiliser pour l’icône de fermeture du gadget logiciel.

   Pour en savoir plus sur les champs, consultez l’ongletGuide TemplateOnglet

   Champ	Détails
   Background Color	La couleur d’arrière-plan à utiliser pour les modèles de portail client.
   Font and Icon Color	La police et la couleur de l’icône à utiliser pour les modèles de portail client.
   Heading Font Size (EM)	La taille de l’en-tête, en ems, à utiliser pour les modèles de portail client. La taille par défaut de votre em est basée sur les paramètres CSS ou les paramètres du navigateur. Pour obtenir de meilleurs résultats, sélectionnez un modèle de portail client à prévisualiser, puis ajustez la taille de la police de l’en-tête si nécessaire.
   Subheading Font Size (EM)	La taille de la police du sous-titre, en ems, à utiliser pour les modèles de portail client. La taille par défaut de votre em est basée sur les paramètres CSS ou les paramètres du navigateur. Pour obtenir les meilleurs résultats, sélectionnez un modèle de portail client à prévisualiser, puis ajustez la taille de la police des sous-titres si nécessaire.

   Pour en savoir plus sur les champs, consultez l’ongletKnowledge BaseOnglet

   Champ	Détails
   Background Color	La couleur d’arrière-plan à utiliser lors de l’affichage des articles de la base de connaissances.
   Font and Icon Color	La police et la couleur de l’icône à utiliser lors de l’affichage des articles de la base de connaissances.

   Pour en savoir plus sur les champs, consultez l’ongletProactive OfferOnglet

   Champ	Détails
   Heading Font Size (EM)	La taille de police en ems à utiliser pour un titre d’offre proactive. La taille par défaut de votre em est basée sur les paramètres CSS ou les paramètres du navigateur. Pour de meilleurs résultats, regardez l’image de prévisualisation de l’offre proactive, puis ajustez la taille de la police de l’en-tête si nécessaire.
   Body Text Font Size (EM)	La taille de police en ems à utiliser pour le corps du texte dans une offre proactive. La taille par défaut de votre em est basée sur les paramètres CSS ou les paramètres du navigateur. Pour de meilleurs résultats, regardez l’image de prévisualisation de l’offre proactive, puis ajustez la taille de la police du corps si nécessaire.
   Header Color	La couleur à utiliser pour la zone d’en-tête de l’offre proactive.
   Background Color	La couleur à utiliser pour l’arrière-plan de l’offre proactive.
   Font Color	La couleur de la police à utiliser pour l’offre proactive. Cela inclut le texte de l’en-tête et le corps du texte.
   Primary Button Background and Font Color	Couleur d’arrière-plan et de police pour le bouton d’appel à l’action principal dans les offres proactives.
   Secondary Button Background and Font Color	Couleur d’arrière-plan et de police pour les boutons secondaires dans les offres proactives.
   Position on Mobile	Si l’offre proactive doit apparaître en Top ou en Bottom de l’écran sur un appareil mobile.

8. Prévisualisez les paramètres de l’image de marque en sélectionnant un modèle dans la liste déroulante située à droite de la page. Ou, pour prévisualiser l’image de marque des offres proactives, cliquez sur l’onglet Proactive Offer. Si vous personnalisez ces paramètres, un aperçu apparaît à droite.

9. Cliquez sur Default pour que cette marque devienne l’image de marque par défaut. Lorsque vous définissez une image de marque par défaut, elle est appliquée à tous les modèles existants et nouveaux.

10. Cliquez sur Save.

Créer des boutons de canal

Créez un bouton pour chaque canal Un moyen pour les contacts d’interagir avec des agents ou des bots. Un canal peut être la voix, la messagerie électronique, le clavardage, les médias sociaux, etc. que vous envisagez de proposer dans Guide. Une fois les boutons créés, vous pouvez les associer aux points d’entrée. Vous pouvez remplacer le 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électionnezACD.

2. Accédez à Digital > Points of Contact Digital.

3. Sous General channel features, cliquez sur Guide.

4. Faites défiler la page jusqu’à la section Buttons et cliquez sur Add button.

   Afficher l’image

   

5. Saisissez un Name pour le bouton.

6. Cliquez sur Choose File pour téléverser l’Icon pour le bouton.

   Les images des icônes doivent être inférieures à 50 ko et des fichiers SVG sont recommandés.

7. Si nécessaire, définissez une couleur d’arrière-plan pour le bouton du canal dans le champ Theme color .

   Laissez ce champ vide pour utiliser la couleur d’arrière-plan du bouton de canal par défaut de la marque.

   Pour utiliser un arrière-plan transparent pour le bouton, sélectionnez Transparent background.

8. Cliquez sur Save.

Ajouter des variantes linguistiques pour la traduction

Vous pouvez créer des variantes linguistiques personnalisées à utiliser avec Guide. En outre, vous pouvez modifier les étiquettes des éléments de l’interface utilisateur Guide.

Ajouter une langue personnalisée

1. Cliquez sur le sélecteur d’applications et sélectionnezACD.

2. Accédez à Digital > Points of Contact Digital.

3. Sous General channel features, cliquez sur Guide.

4. Cliquez sur Translations.

5. Cliquez sur Add Language pour ajouter une nouvelle langue.

   En savoir plus sur les champs de cette étape

   Champ	Détails
   Name	Saisissez un nom pour identifier la langue.
   Language	Sélectionnez le Language dans la liste déroulante.
   Country	Sélectionnez le Country dans la liste déroulante.
   Fallback	Choisissez une langue de Fallback à utiliser s’il n’y a pas de traduction pour une étiquette particulière.

6. Cliquez sur Save. Les étiquettes par défaut fournies avec Guide apparaissent.
7. Pour chaque Translation Key, saisissez une Translation Value. Il s’agit de la chaîne qui est affichée aux visiteurs dans le gadget logiciel Guide. Vous ne pouvez pas modifier la Translation Key pour les étiquettes par défaut fournies avec Guide.
8. Si nécessaire, créez de nouvelles clés de traduction en cliquant sur Ajouter au bas de la page. Définissez la Translation Key et la Translation Value. Vous pouvez modifier la Translation Key pour toutes les nouvelles étiquettes que vous créez. Si vous ajoutez de nouvelles clés de traduction, veillez à fournir des valeurs traduites dans toutes les langues que vous proposez à vos visiteurs.

9. Cliquez sur Enregistrer.

Modifier les étiquettes d’une langue

1. Cliquez sur le sélecteur d’applications et sélectionnezACD.

2. Accédez à > Points of Contact Digital.

3. Sous General channel features, cliquez sur Guide.

4. Cliquez sur Translations.

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

6. Faites défiler jusqu’à l’étiquette pour modifier et mettre à jour la Translation Value. Par exemple, vous pouvez changer l’étiquette du bouton pour démarrer un clavardage de Begin Chat à Start Chat.

7. Cliquez sur Save.

Interagir avec un gadget logiciel Guide

Les visiteurs peuvent interagir avec un gadget logiciel Guide en utilisant leur souris ou leur clavier pour se déplacer entre les boutons. Notez que la navigation au clavier est limitée pour les visiteurs utilisant un Mac avec le navigateur Safari ou Firefox, à moins qu’elle ne soit activée dans le navigateur. Les clés fonctionnent par défaut comme prévu avec le navigateur Chrome.