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

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.logo d’Ursa Major Solar
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.avatar d’agent d’Ursa Major Solar

Une expérience plus agréable grâce à la personnalisation

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.

  1. Enregistrez les images du logo et de l’avatar d’agent sur votre bureau.
    1. Image du logo : logo d’Ursa Major Solar
    2. Image de l’avatar d’agent : avatar d’agent d’Ursa Major Solar
  2. Dans Configuration, saisissez Static Resources dans la case Recherche rapide, puis sélectionnez Ressources statiques .
  3. Cliquez sur Nouveau.
  4. Saisissez le nom Logo.
  5. 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.
  6. Sélectionnez Public dans Contrôle du cache.
  7. Cliquez sur Enregistrer.
  8. À la page Informations de la ressource statique, cliquez sur Afficher le fichier pour ouvrir l’image dans un nouvel onglet.Lien Afficher le fichier sur la page Informations de la ressource statique
  9. 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.
  10. Répétez les étapes 3 à 9 pour l’image de l’avatar d’agent (l’image du visage d’une personne). Saisissez AgentAvatar dans 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.
  11. Dans Configuration, saisissez Service incorporé dans la case Recherche rapide, puis sélectionnez Déploiement service incorporé.
  12. Cliquez sur la flèche à côté de votre déploiement Service incorporé et sélectionnez Afficher.
  13. Cliquez sur Modifier à côté de Marque.
  14. Sélectionnez les couleurs et une police. Utilisez l’aperçu en direct pour voir où les couleurs apparaissent. Options de personnalisation de Snap-in
    1. Saisissez #006937 comme couleur primaire de marque et couleur de la barre de navigation.
    2. Saisissez #565656 comme couleur secondaire de marque.
    3. Gardez la police Salesforce Sans sélectionnée.
    4. Laissez la couleur primaire de contraste telle quelle.
  15. Cliquez sur Terminer.
    Simple ! Nous devons maintenant ajouter quelques touches supplémentaires à la fenêtre de chat.
  16. À côté de Paramètres de Chat, cliquez sur Modifier.
  17. Si le curseur préalable au chat est placé sur actif, réglez-le sur Inactif.
  18. En regard de Personnalisation supplémentaire de la marque, cliquez sur Modifier.
  19. Collez l’URL de l’image du logo dans le champ Logo.
  20. Collez l’URL de l’image de l’avatar d’agent dans le champ Avatar d’agent.
  21. 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.

Essayez !

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.

  1. Dans Configuration, saisissez Visualforce dans 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.
  2. Cliquez sur Icône de fenêtre contextuelleen regard 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.
    Remarque

    Remarque

    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. Dans un vrai site Web ou une véritable communauté, il aurait cette apparence : Snap-in hors ligne dans une Communauté

  3. Dans le lanceur d’application, cherchez et sélectionnez Console de service.
    Remarque

    Remarque

    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.

  4. Ouvrez l'utilitaire Omni-Channel et définissez votre statut sur Disponible - Chatter. Vous êtes prêt à accepter des chats en tant qu’agent !Statuts dans l’utilitaire Omni-Channel de la console
  5. Revenez dans l’onglet de votre page Visualforce et actualisez-le. Votre fenêtre de chat affiche un bouton de chat en ligne.
    Remarque

    Remarque

    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. Dans un vrai site Web ou une véritable communauté, il aurait cette apparence : Snap-in en ligne dans une Communauté

  6. 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

    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 blanche dans vos paramètres CORS.

  7. Dans la console, acceptez la demande de chat dans l’utilitaire Omni-Channel. La transcription de chat s’ouvre dans la console.
  8. 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.
  9. 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.