Implémentation de la discussion en direct (QSC)

À propos de la mise en œuvre de la discussion en direct

Live Chat est une fonctionnalité de connexion sociale Qualtrics qui vous permet d’ajouter un service de chat en direct à votre site Web. Lorsque les clients cliquent sur ce chatbot, il crée une mention dans votre compte Social Connect pour qu’un agent agisse. Lorsqu’un agent répond à cette mention, la réponse provient du chatbot, ce qui offre une expérience conversationnelle fluide au client.

Prise en main de la discussion en direct

Live Chat est un module complémentaire de votre licence Qualtrics. Contactez votre Commercial pour commencer à utiliser Live Chat. Une fois que Live Chat est ajouté à votre compte, un ID d’intégration unique et un ID d’application vous seront fournis. Sauvegardez ces ID pour plus tard.

Personnalisation de votre discussion en direct

Une fois que Live Chat est activé pour votre compte, vous pouvez le trouver dans le Gestionnaire de profils. Ici, vous pouvez personnaliser des aspects de votre discussion en direct, tels que :

• L’aspect et la convivialité de la fenêtre de chat (couleurs et logo).
• Ajoutez les domaines du site Web sur lesquels la fenêtre de chat doit s’afficher.
• Sélectionnez un flux qui commence lorsqu’un client envoie un message initial.
• Joignez une réponse rapide à chaque message sortant.

Consultez la page Profil des discussions en direct pour plus d’informations.

Ajouter une discussion en direct à votre site Web

Pendant la période Gestionnaire de profils, cliquez sur Aperçu pour afficher l’extrait de code de votre discussion en direct. 

Copiez ce code et donnez-le à votre équipe informatique. Ils devront ajouter le code à l’en-tête ou au corps du site Web sur lequel ils souhaitent que Live Chat apparaisse.

Une fois ajouté, Live Chat apparaîtra dans le coin inférieur droit de votre site Web. Vous pouvez ensuite personnaliser davantage votre Live Chat en ajustant le CSS. Consultez cette page de support externe pour en savoir plus sur la personnalisation de votre Live Chat avec CSS.

Création automatique de cas

Lorsque vous utilisez Live Chat, nous vous recommandons vivement d’activer la création de cas automatique. Cela regroupe automatiquement les messages de la même conversation dans un fil de discussion au lieu d’ajouter chaque message comme mention individuelle.

Suivi des pages Web

Si vous avez votre Chat en direct sur plusieurs pages Web, nous vous recommandons d’ajouter le suivi des pages Web. Cela permet aux agents de voir à partir de quelle page Web le client discute. Pour ajouter un suivi de page Web, vous devrez ajouter du code supplémentaire à l’extrait de code pour Live Chat.

1. Dans votre extrait de code existant, recherchez la ligne de code suivante :

   ClarabridgeChat.init({ appId: 'integration-id' }).then(() => {

2. Insérez un renvoi à la ligne.
3. Ajoutez le bloc de code suivant dans la nouvelle ligne :

   ClarabridgeChat.setDelegate({
   
    beforeSend(message) {
   
    message.metadata = {
   
    ...message.metadata,
   
    originTitle: document.title,
   
    originUrl: window.location.href
   
    };
   
    return message;
   
    }
   
    });

4. Les mentions vous indiquent désormais la page Web à partir de laquelle le client a discuté.

Briseurs de glace

Un brise-glace est un message court qui apparaît à côté de l’icône Chat en direct sur votre site Web. Il agit souvent comme une invite à attirer l’attention du client sur le chat en direct en tant que ressource s’il a des questions. Dans l’exemple ci-dessous, « Pouvons-nous vous aider ? » est le brise-glace.

Pour ajouter un brise-glace, vous devrez ajouter du code supplémentaire à l’extrait de code pour votre chat en direct :

1. Recherchez les lignes de code suivantes dans votre extrait de code existant :

   ClarabridgeChat.init({
   
    // IDIntégration : 'votre_ID_intégration', // Utiliser ce OR appId
   
    appId : '', // Utiliser cet ID d'intégration OR

2. Insérez un renvoi à la ligne.
3. Ajoutez le bloc de code suivant dans la nouvelle ligne :

   icebreaker : {
   
    delay: 1000,
   
    text: 'Pouvons-nous vous aider ?',
   
    styles: {
   
    backgroundColor: '#9FFF04',
   
    textColor: '#F420F5',
   
    borderWidth: '1px', //
   
    borderColor: '#EAFD10',
   
    width: '150px', //
   
    height: '40px' //
   
    }
   
    },

4. Dans l’extrait de code ci-dessus, vous pouvez ajuster les valeurs en gras pour personnaliser votre brise-glace. Vous devrez peut-être demander de l’aide à votre équipe informatique. Vous trouverez ci-dessous des conseils pour chaque champ :
   • Retard : temps que le client doit consacrer à la page avant que le brise-glace n’apparaisse. Saisissez une période de retard en millisecondes.
   • Texte: Entrez le message du brise-glace.
   • Styles : Il s’agit de propriétés CSS supplémentaires pour personnaliser l’apparence du brise-glace. Certains sont obligatoires tandis que d’autres sont facultatifs. Continuez à lire pour plus d’informations sur chaque propriété.
   • backgroundColor : couleur d’arrière-plan. Saisissez un code couleur HEX. Cette propriété est requise.
   • textColor : couleur du texte. Saisissez un code couleur HEX. Cette propriété est requise.
   • Largeur de bordure : largeur de la bordure de la bulle affichant le message. Saisissez une largeur en pixels. Cette propriété est facultative. Lorsqu’il est exclu, le brise-glace n’aura pas de frontière.
   • borderColor : couleur de la bordure. Saisissez un code couleur HEX. Cette propriété est requise si vous utilisez borderWidth.
   • Largeur : Largeur de la bulle du disjoncteur de glace. Saisissez une largeur en pixels. Cette propriété est facultative. Si elle est exclue, la largeur par défaut du brise-glace sera de 150 pixels.
   • Hauteur : Hauteur de la bulle du disjoncteur de glace. Saisissez une hauteur en pixels. Cette propriété est facultative. Si elle est exclue, la hauteur par défaut du brise-glace sera de 50 pixels.
5. Votre icône de chat en direct va maintenant avoir un message de brise-glace à côté.

Flux

Vous pouvez ajouter des flux à votre discussion en direct pour automatiser les réponses via votre discussion en direct. Consultez la page liée pour en savoir plus sur la création de flux. Cette section explique comment ajouter un flux à votre chat en direct.

1. Collez le bloc de code suivant après votre extrait de code de discussion en direct d’origine :

   ClarabridgeChat.on('widget:open', () => {
   
    ClarabridgeChat.createConversation();
   
    });

2. Accédez à l’onglet Gestionnaire de profils et utilisez le menu déroulant Envoyer le flux au démarrage pour sélectionner un flux.
3. Vous pouvez sélectionner 3 flux supplémentaires à joindre à chaque message sortant en offrant aux clients différentes options, telles que le lancement de la discussion en direct ou la modification de la langue du support.

Heures d’ouverture et disponibilité de l’agent

Vous pouvez limiter votre discussion en direct pour qu’elle ne soit disponible que pendant vos heures d’ouverture et lorsque les agents sont en ligne et disponibles. Pour ce faire, vous devez intégrer votre Live Chat à l’API Qualtric Social Connect. Vous devez également créer votre calendrier des heures d’ouverture.

1. Suivez ce guide pour intégrer votre site Web à l’API Qualtrics Social Connect.
2. Appelez ce point de terminaison pour récupérer votre ID d’heures d’ouverture.
3. Utilisez votre ID de gestion pour récupérer ensuite le calendrier des heures d’ouverture à l’aide de ce point de terminaison.
4. Vous obtiendrez un résultat qui se présente comme suit :

   {"nom":"Ma planification","périodes":[{"jourofsemaine":1,"début":"0900""fin":"1900",{"jour de la semaine":2,"début","fin":"semaine","3"

5. Vous pouvez utiliser ces informations pour activer la discussion en direct uniquement pendant les heures de travail.
6. Vous pouvez également utiliser le même appel API pour récupérer des informations sur les agents disponibles et désactiver la discussion en direct si aucune n’est disponible.