Installer Blitzz Cobrowse pour le Help Desk HubSpot

Blitzz Cobrowse pour HubSpot : guide d'installation

Ce guide vous accompagne dans la configuration de Blitzz Cobrowse dans HubSpot, pour que vos agents voient exactement ce que voit le client et le guident en temps réel, directement à partir d'un billet du Help Desk. Il couvre tout, de l'installation jusqu'à votre première session en direct.

Table des matières

• Avant de commencer
• Étape 1 : Connecter Blitzz à votre compte HubSpot
• Étape 2 : Ajouter le script Blitzz Cobrowse à votre site Web
• Étape 3 : Ajouter la carte Blitzz Cobrowse là où travaillent vos agents
• Étape 4 : Votre client demande de l'aide
• Étape 5 : Le billet est transmis à votre agent
• Étape 6 : Démarrer une session de navigation conjointe (deux façons de se connecter)
• Étape 7 : Voir l'écran du client et régler le problème ensemble

Avant de commencer

Assurez-vous d'avoir ce qui suit :

• Un compte Blitzz avec Cobrowse activé, et l'accès à votre portail Cobrowse (où se trouvent votre clé de licence et votre script d'installation).
• Un compte HubSpot avec un espace de travail Help Desk / Service où vos agents traitent les billets.
• L'autorisation, dans HubSpot, d'installer des applications du marketplace et de personnaliser les barres latérales des fiches et du Help Desk.

Étape 1 : Connecter Blitzz à votre compte HubSpot

D'abord, connectez l'application Blitzz à votre compte HubSpot. C'est ce qui rend les cartes Blitzz Cobrowse disponibles dans vos fiches GRC et dans le Help Desk.

• Suivez les étapes officielles d'installation de l'application dans le guide d'installation de Blitzz pour HubSpot.

Étape 2 : Ajouter le script Blitzz Cobrowse à votre site Web

Pour que Blitzz puisse se connecter à vos clients, un petit script Cobrowse doit s'exécuter sur les pages Web où vos clients demanderont de l'aide.

• Dans votre portail Cobrowse, ouvrez Settings → Installation. Vous y verrez votre License Key (clé de licence) et un script prêt à l'emploi sous « Manually insert your script tag in your application ». Cliquez sur Copy Code pour copier votre version (elle contient déjà votre clé de licence).

Votre script d'installation et votre clé de licence se trouvent dans le portail Cobrowse, sous Settings → Installation.

• Lorsque vous utilisez Cobrowse dans HubSpot, ajoutez isHubSpot: true aux options de initialize : c'est la seule modification nécessaire pour HubSpot. Collez l'extrait final dans la section <head> de votre site Web :

  <!-- Begin Blitzz code --> 
  <script>  
      let blitzz;  
      let st = document.createElement("script");  
      st.src = "https://media.blitzz.co/sdk/blitzzcobrowse.min.js";  
      st.async = 1;  let tx = document.getElementsByTagName("script")[0];
      tx.parentNode.insertBefore(st, tx);  
      st.onload = function () {    
          if (!blitzz) {      
          blitzz = new BlitzzCobrowse({});      
          blitzz.initialize({ license: "YOUR_LICENSE_KEY", isHubSpot: true });    
          }  
      }; 
  </script> <!-- End Blitzz Code -->

À propos de votre widget de clavardage HubSpot. Ce guide suppose que le widget de clavardage HubSpot est déjà sur votre site Web; la plupart des équipes l'ajoutent (ou le personnalisent) lors de leur configuration habituelle de HubSpot. Blitzz Cobrowse fonctionne avec ce widget; vous n'avez pas à modifier l'installation de votre clavardage. Assurez-vous simplement que le script Blitzz ci-dessus s'exécute sur les mêmes pages que votre clavardage.

Étape 3 : Ajouter la carte Blitzz Cobrowse là où travaillent vos agents

Ensuite, rendez la carte Blitzz Cobrowse visible pour vos agents. Blitzz fournit une carte pour chaque emplacement :

• Blitzz Cobrowse : page de fiche GRC
• Blitzz Cobrowse (Sidebar) : barre latérale de fiche GRC
• Blitzz Cobrowse (Preview) : aperçu de fiche GRC
• Blitzz Cobrowse (Help Desk) : barre latérale des billets du Help Desk (recommandée)
  
  Les cartes GRC fonctionnent sur les fiches Contact, Company, Deal et Ticket; la carte Help Desk fonctionne sur les billets. Pour le soutien par clavardage en direct, nous recommandons la carte Help Desk.
  
  

1. Dans HubSpot, ouvrez vos connected apps → Blitzz → Settings → App cards et cliquez sur Manage locations sur la carte voulue, par exemple Blitzz Cobrowse (Help Desk).

   Chaque carte Blitzz Cobrowse indique les emplacements pris en charge et comporte un bouton Manage locations.

2. Sélectionner la Default view (vue par défaut) ajoute la carte au bas de la colonne ou de la barre latérale choisie. Pour contrôler précisément l'emplacement de la carte, cliquez sur Customize.

   Manage locations : choisissez la vue, puis Customize pour contrôler la position de la carte.

3. Cliquez sur Add card, ouvrez l'onglet Card library, recherchez Blitzz Cobrowse, cliquez sur Add card, puis sur Save.
   Ajoutez la carte Blitzz Cobrowse à partir de la Card library. Ou, à partir d'un billet du Help Desk

   Vous pouvez aussi le faire directement en consultant un billet : allez dans Service → Help Desk, ouvrez un billet et, en haut à droite, cliquez sur l'icône des paramètres de la barre latérale → Customize the sidebar. Ajoutez ensuite la carte à partir de la Card library comme ci-dessus, puis cliquez sur Save.
   À partir d'un billet, ouvrez l'icône des paramètres pour personnaliser la barre latérale.

   Étape 4 : Votre client demande de l'aide

   Une fois le script en place, votre client utilise simplement votre site Web comme d'habitude.

   1. Le client navigue sur votre site comme il le fait normalement, sans étape supplémentaire.
   2. Lorsqu'il a besoin d'aide, il ouvre votre clavardage Web et décrit son problème, par exemple : « Je ne trouve pas le bouton d'exportation dans mon tableau de bord. »Le client ouvre le clavardage sur votre site et demande de l'aide.

Étape 5 : Le billet est transmis à votre agent

1. Dans HubSpot, allez dans Service → Help Desk. La conversation arrive sous forme de billet et est acheminée à un agent selon vos règles d'acheminement et de disponibilité. L'agent ouvre le billet dans la vue Help Desk.
   Les clavardages entrants apparaissent comme des billets dans le Help Desk.
2. Dans la barre latérale droite du billet, l'agent voit la carte Blitzz Cobrowse (Help Desk) ajoutée à l'étape 3.
   La carte Blitzz Cobrowse sur le billet : vos deux façons de vous connecter.

Étape 6 : Démarrer une session de navigation conjointe (deux façons de se connecter)

Option 1 : Se connecter avec un code

Utilisez cette option lorsque le client a un code à 6 chiffres à communiquer, par exemple si vous avez ajouté un bouton « Start cobrowse » sur votre site Web.

1. Le client clique sur ce bouton et obtient un code à 6 chiffres, qu'il transmet à l'agent par clavardage. (Voir : Démarrer une session de navigation conjointe d'un simple clic.)
2. L'agent saisit ce code dans le champ Connect using the code de la carte et clique sur Connect.
3. La session s'ouvre dans un nouvel onglet et relie les deux parties.

Option 2 : Bouton Start Cobrowse Session

Il s'agit du parcours en un clic sur la carte Help Desk.

1. L'agent clique sur Start Cobrowse Session.
2. Blitzz ouvre une boîte de dialogue « Reaching the visitor » et cherche l'appareil actif lié à ce billet. Comme la page de clavardage du client est ouverte et active, Blitzz la trouve et l'associe automatiquement.
   Start Cobrowse Session joint automatiquement le visiteur tant que sa page est ouverte.
3. L'agent est redirigé vers un nouvel onglet et la session s'établit.

Le client approuve la demande

Pour protéger sa vie privée, le client doit toujours donner son approbation avant que l'agent puisse voir son écran. Il voit le message « An agent would like to temporarily use this web page with you. Do you want to allow this? » (un agent souhaite utiliser temporairement cette page Web avec vous; voulez-vous l'autoriser?) et clique sur Accept.
L'agent attend que le client approuve la demande.

Le client doit accepter avant que la session commence.

Étape 7 : Voir l'écran du client et régler le problème ensemble

Dès que le client accepte, la session de navigation conjointe commence. L'agent voit la page du client en temps réel, peut lui montrer des éléments et le guider vers la solution; dans notre exemple, lui montrer exactement où se trouve le bouton d'exportation. Le client reste sur la page qu'il utilisait déjà; rien de nouveau ne s'ouvre de son côté. Une fois terminé, cliquez sur End Session.

Une session de navigation conjointe en direct : voyez ce que voit le client et réglez le problème ensemble.

Si vous éprouvez des difficultés ou avez simplement besoin d'un peu d'aide, communiquez avec nous; nous serons heureux de vous aider.