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 vous fier à 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 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 Couleur du thème pour un modèle, cette couleur remplace le paramètre de couleur de la marque.
-
Si vous définissez une Couleur du thème pour un modèle et une
-
-
Pour une personnalisation avancée du style, vous pouvez utiliser les API Guide ou collaborer avec votre représentant de compte 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 une image de marque par défaut 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 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 pour afficher le modèle ou l'offre proactive, utilisez l'action Définir l'image de marque Guide pour déterminer l'image de marque à utiliser.
Pour configurer l'image de marque, vous avez besoin de l'Autorisation Image de marque Guide.
View a short video on creating branding.
- Cliquez sur le sélecteur d'applications
et sélectionnez Guide. -
Cliquez sur Image de marque.
-
Cliquez sur Nouvelle image de marque.
-
Entrez un nom de la marque unique pour Titre de l'image de marque.
-
Définissez Couleur du thème sur la couleur primaire à utiliser pour le widget Guide. Définissez la couleur en saisissant une valeur hexadécimale ou en cliquant sur la pipette pour sélectionner une couleur.
La Couleur du thème 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 du thème qui remplace la couleur de l'image de marque.
-
Un modèle définit une couleur du thème qui remplace la couleur de l'image de marque.
-
Vous définissez d'autres préférences d'image de marque au-delà des paramètres primaires. Par exemple, si vous définissez une couleur de bouton pour les offres proactives.
-
-
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 et la flèche qui apparaît dans 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 sont disponibles pour vérifier le contraste.
-
Vous pouvez également peaufiner l'image de marque à l'aide des onglets
En savoir plus sur Champ Détails 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.
La couleur à utiliser pour l’icône de fermeture du gadget logiciel. La couleur d'arrière-plan à utiliser pour l'icône de fermeture du widget. En savoir plus sur le Champ Détails La couleur de fond à utiliser pour les modèles de portail client. La police et la couleur de l’icône à utiliser pour les modèles de portail client.
La taille du titre, en ems, à utiliser pour les modèles de portail client.
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.
La taille de police des sous-titres, en ems, à utiliser pour les modèles de portail client.
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.
En savoir plus sur le Champ Détails La couleur de fond à utiliser pour l’en-tête de la fenêtre de clavardage. La couleur à utiliser pour le texte et les icônes dans l’en-tête de la fenêtre de clavardage.
Message d’agent La couleur de fond à utiliser pour les bulles de message d’agent.
La couleur du texte à utiliser pour les messages d’agent.
Message de client La couleur de fond à utiliser pour les bulles de message du client.
La couleur du texte à utiliser pour les messages du client.
En savoir plus sur le Field Détails La couleur de fond à utiliser lors de l’affichage des articles de la base de connaissances. La police et la couleur de l’icône à utiliser lors de l’affichage des articles de la base de connaissances.
En savoir plus sur le Field Détails La taille de police, en ems, à utiliser pour l’en-tête d’une offre proactive.
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.
La taille de police, en ems, à utiliser pour le texte du corps dans une offre proactive.
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.
La couleur à utiliser pour la zone d’en-tête de l’offre proactive. La couleur à utiliser pour l’arrière-plan de l’offre proactive. La couleur de la police à utiliser pour l’offre proactive. Cela inclut le texte de l’en-tête et le corps du texte. Arrière-plan et couleur de la police du bouton principal d'appel à l'action dans les offres proactives. Arrière-plan et couleur de la police des boutons secondaires dans les offres proactives. Indique si l'offre proactive doit apparaître dans le Haut ou dans le Bas de l'écran sur un appareil mobile. -
Prévisualisez les paramètres de l'image de marque dans le panneau situé du côté droit de la page. La prévisualisation est disponible dans tous les onglets, de General jusqu'à Proactive Offer. Au fur et à mesure que vous modifiez les paramètres de l'image de marque, la prévisualisation se met à jour automatiquement pour refléter vos modifications, ce qui vous permet de voir les mises à jour de l'interface de clavardage sans avoir à enregistrer ni à recharger la page.
-
Cliquez sur Default pour définir cette image de marque comme celle par défaut. Lorsque vous définissez une image de marque comme celle par défaut, elle s'applique à tous les modèles existants et nouveaux.
- Cliquez sur Enregistrer.
Working (Travail) avec les Ems
Guide utilise des ems pour préciser la taille des éléments d'interface. Les ems permettent une taille réactive 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 la modifier à l'aide de 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 offrir 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.
Pour créer des boutons, vous devez posséder l'Autorisation Guide Configuration.
View a short video on creating channel buttons.
-
Cliquez sur le sélecteur d'applications
et sélectionnez Guide. -
Cliquez sur
-
Cliquez sur Nouveau bouton.
-
Entrée un Titre pour le bouton.
-
Cliquez sur Upload pour téléverser l'Icône du bouton.
Les images des icônes doivent être inférieures à 50 ko et des fichiers SVG sont recommandés.
-
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 champ
-
Sélectionnez Transparent pour utiliser un arrière-plan transparent pour le bouton.
-
-
Cliquez sur Enregistrer.
Ajouter des variantes de Langue 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.
-
Les traductions pour les langues par défaut seront disponibles dans une prochaine version.
-
Pour utiliser des langues personnalisées, vous devez disposer de l'Autorisation Configuration de Guide.
Ajouter une Langue personnalisée
-
Cliquez sur le sélecteur d'applications
et sélectionnez Guide. -
Cliquez sur Localisation.
-
Cliquez sur Nouvelle Langue pour ajouter une nouvelle langue.
Apprenez-en davantage sur les champs dans cette étape
Field Détails Saisissez un nom pour identifier la langue. Sélectionnez la Langue dans la liste déroulante.
Sélectionnez le Pays dans la liste déroulante. Sélectionnez une langue de Repli à utiliser s'il n'y a pas de traduction pour une étiquette particulière. - Cliquez sur Enregistrer. Les étiquettes d'interface utilisateur par défaut que vous pouvez traduire apparaissent dans la section Traductions. Elles sont en English, que vous devez traduire dans la langue souhaitée.
- Traduisez les étiquettes d'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 la langue Portugais, vous pourriez remplacer Hide Chat par Ocultar Chat.
- You can also translate custom fields that you already created:
- Cliquez sur Ajouter au bas de la section Traductions.
- Pour Clé de traduction, entrez la Clé de traduction de l'Étiquette du champ personnalisé.
- Entrez le texte traduit dans la case Valeur de traduction.
-
Cliquez sur Enregistrer.
Modifier les Étiquettes d’une Langue
-
Cliquez sur le sélecteur d'applications
et sélectionnez Guide. -
Cliquez sur Localisation.
-
Cliquez sur
- Faites défiler jusqu'à l'étiquette à modifier et mettez à jour la Valeur de traduction. Par exemple, vous pouvez changer l'étiquette du bouton pour Démarrer un clavardage de Begin Chat à Start Chat.
-
Cliquez sur Enregistrer.
Interagissez avec un widget Guide
Les visiteurs peuvent interagir avec un gadget logiciel Guide en utilisant leur souris ou leur clavier pour se déplacer entre les boutons. La navigation au clavier est limitée pour les visiteurs utilisant un Apple Mac avec le navigateur Safari ou Mozilla Firefox, à moins qu'elle ne soit activée dans le navigateur. Les touches fonctionnent comme prévu par défaut lorsque vous utilisez le navigateur Chrome.