Personnalisation du chat incorporé
Objectifs de formation
Une fois cette unité terminée, vous pourrez :
- ajouter des personnalisations à la fenêtre de chat de votre client ;
- tester l’implémentation de votre chat Web.
Planification de la personnalisation de la fenêtre de chat
Maria est enthousiaste à l’idée de présenter le chat Web à Sita et Roberto, mais elle souhaite tout d’abord s’assurer que la fenêtre de chat du client s’intègre bien à l’image de marque d’Ursa Major Solar. Elle réfléchit alors à quelques questions à poser à Sita. Les réponses l’aideront à s’assurer que l’apparence reflète bien la marque.
| Question | Réponse |
|---|---|
| Quelle police et quelles couleurs sont utilisées dans les supports marketing d’Ursa Major Solar ? | Selon nos principes en matière d’image de marque, Ursa Major Solar utilise Salesforce Sans. Les couleurs de la marque sont #006937, #565656, et #F5B335. |
| L’entreprise Ursa Major Solar a-t-elle un logo ? | Oui, nous pouvons utiliser l’image suivante.
|
| Devrions-nous ajouter un avatar d’agent qui s’affiche dans la fenêtre de chat du client ? | Oui, nous pouvons utiliser l’image suivante.
|
Personnalisation de la fenêtre de chat
Armée d’éléments de personnalisation, Maria accède à la configuration Service incorporé pour ajouter les couleurs, la police et les images d’Ursa Major Solar. Ces éléments graphiques permettent à la fenêtre de chat de s’intégrer parfaitement au site Web !
Observez Maria qui applique des éléments de personnalisation à sa fenêtre de chat.
Tout d’abord, ajoutons nos images à Salesforce afin de leur attribuer des liens que nous pourrons utiliser pendant la configuration Service incorporé. Cette étape n’est pas nécessaire si vos images sont déjà hébergées et accessibles par un lien public. Comme nous utilisons un site Web de test, nous pouvons importer nos images sous forme de ressources statiques dans Salesforce pour la création des liens.
- Enregistrez les images du logo et de l’avatar d’agent sur votre bureau.
- Image du logo :
- Image de l’avatar d’agent :
- Image du logo :
- Dans Configuration, saisissez Ressources statiques dans la zone Recherche rapide, puis sélectionnez Ressources statiques.
- Cliquez sur Nouveau.
- Saisissez le nom
Logo. - Cliquez sur Choisir un fichier et sélectionnez l’image du logo (l’image du logo d’Ursa Major Solar) que vous avez enregistrée.
- Sélectionnez Public dans Contrôle du cache.
- Cliquez sur Enregistrer.
- Sur la page Informations de la ressource statique, cliquez sur Afficher le fichier pour ouvrir l’image dans un nouvel onglet.
- Copiez l’URL et collez-la en lieu sûr ou laissez l’onglet ouvert afin de pouvoir récupérer l’URL ultérieurement. Vous aurez bientôt besoin de cette URL.
- Répétez les étapes 3 à 9 pour l’image de l’avatar d’agent (l’image du visage d’une personne). Saisissez
AgentAvatardans Nom. Ensuite, Maria définit les couleurs de la fenêtre de chat pour qu’elles correspondent à l’image de marque d’Ursa Major Solar. - Dans Configuration, saisissez
Service incorporédans la case Recherche rapide, puis sélectionnez Déploiement service incorporé. - Cliquez sur la flèche à côté de votre déploiement Service incorporé et sélectionnez Afficher.
- Cliquez sur Modifier à côté de Marque.
- Sélectionnez les couleurs et une police. Utilisez l’aperçu en direct pour voir où les couleurs apparaissent.
- Saisissez
#006937comme couleur primaire de marque et couleur d’en-tête. - Laissez la couleur primaire de contraste, la couleur de texte d’en-tête et la couleur d’en-tête alternatif telles quelles.
- Gardez la police Salesforce Sans sélectionnée.
- Saisissez
- Cliquez sur Terminer. Simple ! Nous devons maintenant ajouter quelques touches supplémentaires à la fenêtre de chat.
- À côté de Paramètres de Chat, cliquez sur Modifier.
- Si le curseur préalable au chat est placé sur actif, réglez-le sur Inactif.
- En regard de Personnalisation supplémentaire de la marque, cliquez sur Modifier.
- Collez l’URL de l’image du logo dans le champ Logo.
- Collez l’URL de l’image de l’avatar d’agent dans le champ Avatar d’agent.
- Cliquez sur Enregistrer.
En quelques clics, la fenêtre de chat des clients s’intègre parfaitement à l’image de marque d’Ursa Major Solar.
Test de la fenêtre de chat
Tout a l’air parfait et Maria est prête à tester son implémentation de chat Web.
Voici comment Maria va tester le chat Web.
- Elle ouvre la page Visualforce qu’elle a créée dans la première unité et retrouve la fenêtre de chat hors ligne.
- Elle ouvre la console de service prête à l’emploi et se connecte en utilisant le statut Disponible - Chat dans l’utilitaire Omni-Channel.
- Elle actualise la page Visualforce et clique sur la fenêtre de chat pour commencer un chat.
- Elle envoie des messages en tant que client et en tant qu’agent pour s’assurer que tout fonctionne correctement.
- Elle termine le chat à partir de la fenêtre de chat client ou agent.
Suivez la même démarche pour tester votre implémentation de chat Web.
- Dans Configuration, saisissez
Visualforcedans la case Recherche rapide, et sélectionnez Pages Visualforce. Si l’option Pages Visualforce n’apparaît pas, assurez-vous que vous êtes bien dans la configuration et non dans la configuration de service. - Cliquez sur
à côté de la page Visualforce Chat Web pour l’ouvrir dans un nouvel onglet ou une nouvelle fenêtre. Votre fenêtre de chat affiche un bouton de chat hors ligne dans le coin inférieur droit.
Votre fenêtre de chat peut sembler un peu étrange dans votre page Visualforce, car celle-ci ne comprend ni style ni mise en forme. Sur un vrai site Web ou un site Experience, elle aurait cette apparence :
- Dans le lanceur d’application, cherchez et sélectionnez Console de service. Utilisez la console de service prête à l’emploi et non une application de console que vous auriez créée. C’est là que nous avons tout activé lors du flux de configuration de Chat.
- Ouvrez l'utilitaire Omni-Channel et définissez votre statut sur Disponible - Chatter. Vous êtes prêt à accepter des chats en tant qu’agent !
- Revenez dans l’onglet de votre page Visualforce et actualisez-le. Votre fenêtre de chat affiche un bouton de chat en ligne.
Votre fenêtre de chat peut sembler un peu étrange dans votre page Visualforce, car celle-ci ne comprend ni style ni mise en forme. Sur un vrai site Web ou un site Experience, elle aurait cette apparence :
- Cliquez sur la fenêtre de chat pour demander un chat. Une fois que vous avez demandé le chat, réduisez la fenêtre de chat client pour afficher l’image du logo sur la fenêtre de chat.
Conseil : Vous avez des difficultés à démarrer un chat ? Vérifiez l’URL sur votre page Visualforce. Si l’URL se termine par .visualforce.com au lieu de .force.com, vous devez ajouter https://*.visualforce.com à la liste d’autorisation dans vos paramètres CORS. - Dans la console, acceptez la demande de chat dans l’utilitaire Omni-Channel. La transcription de chat s’ouvre dans la console.
- Prenez quelques instants pour vous envoyer des messages à vous-même et y répondre. Dans la fenêtre de chat client, remarquez les couleurs d’Ursa Major Solar et l’image de l’avatar d’agent.
- Terminez le chat à partir de la fenêtre de chat agent ou client. Fermez l’enregistrement de la transcription de chat et les enregistrements associés dans la console.
Pas mal, non ? Maria vient juste d’installer et de tester le chat Web, et cela n’a pris que quelques minutes. Maria dispose à présent d’un chat Web fonctionnel qu’elle peut présenter à Sita et Roberto. Elle a hâte de leur montrer à quel point l’expérience est simple, à la fois pour les agents et pour les clients.
Ressources
- Aide Salesforce : Personnalisation de la marque générale de votre fenêtre de chat
- Aide Salesforce : Personnalisation supplémentaire du chat pour la marque
- Aide Salesforce : Test de votre fenêtre de chat incorporé
- Aide Salesforce : Ajout de votre site Web à la liste d’autorisation CORS
