Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

Imaginez ceci: quelqu'un qui utilise l'un de vos produits rencontre un problème. Il existe quelques canaux qu'ils pourraient utiliser pour signaler le problème et essayer de le résoudre.

Parmi eux, ils pouvaient opter pour le courrier électronique ou un appel. Mais ces canaux de communication ne garantissent pas des réponses rapides, encore moins en temps réel. Mais un chat interactif en direct avec un professionnel du support client peut s'avérer inestimable.

Une fonction de chat en direct s'est avérée être un outil de communication très utile. En effet, cela vous permet de mieux interagir avec les utilisateurs, d'améliorer l'expérience utilisateur et de résoudre les problèmes rapidement et en temps réel.

Qu'est-ce que le chat en direct et pourquoi est-ce important?

Une fonctionnalité de chat en direct est généralement incluse sous la forme d'un widget sur le côté d'une page Web ou d'une fenêtre contextuelle qui apparaît après le chargement du site. Il fournit une communication en temps réel entre les utilisateurs et les représentants du service client ou les équipes de support, directement dans l'application.

instagram viewer

Les utilisateurs de la fonctionnalité de chat en direct peuvent poser des questions urgentes sur le produit, se renseigner sur les domaines qu'ils ne comprennent pas ou signaler un problème et demander des solutions. Pendant ce temps, vos équipes de support client peuvent fournir des commentaires détaillés en temps réel, personnalisés à l'utilisateur.

Les avantages de l'intégration d'une fonctionnalité de chat en direct

L'intégration d'une fonctionnalité de chat en direct peut apporter plusieurs avantages :

  • Améliorer les efforts du service client. Un bon produit est seulement aussi bon que son utilisation. L'intégration d'une fonctionnalité de chat en direct permet d'améliorer considérablement l'expérience d'un utilisateur en offrant un moyen simple d'obtenir de l'aide et des réponses rapidement. En fin de compte, cela vous aidera à offrir de meilleurs services qui rationalisent l'utilisation de votre produit.
  • Augmenter l'engagement des clients. Un chat en direct permet aux utilisateurs d'interagir avec votre application en temps réel, ce qui les fait se sentir valorisés. Cela les incite à s'engager davantage, à s'inscrire et à tester davantage de fonctionnalités.
  • Générez plus de prospects et augmentez vos ventes. Ce canal de communication offre un moyen d'interagir personnellement avec vos utilisateurs. Vous pouvez profiter de cette opportunité pour capturer des prospects et les transformer en clients. Vous pouvez également fournir des recommandations de produits et les vendre sur des packages spécifiques de votre produit.
  • Source des données utilisateur. Dans l'économie numérique, avoir accès à des données précises sur les utilisateurs peut vous donner une longueur d'avance sur la concurrence. Lorsque les utilisateurs vous signalent des bogues ou d'autres problèmes liés au produit, ces commentaires sont très précieux. Vous pouvez en savoir plus sur la façon dont ils interagissent avec votre service et l'utiliser pour améliorer votre produit.

Qu'est-ce que Chatwoot?

Chatwoot est une plate-forme de service client open source qui offre une manière personnalisée d'interagir avec vos utilisateurs. Il fournit également une plate-forme simplifiée pour répondre aux requêtes des utilisateurs et fournir des commentaires sur plusieurs canaux en temps réel.

Vous pouvez utiliser ses outils d'automatisation, d'analyse et de création de rapports pour analyser l'engagement des utilisateurs et gérer facilement et efficacement les opérations du service client.

À l'aide de ce guide, vous pouvez intégrer Chatwoot à votre application et tester sa fonctionnalité de chat en direct avec un client React et un tableau de bord de support client.

Configuration du projet Chatwoot

Chatwoot fournit un plugin de chat en direct personnalisable que vous pouvez facilement intégrer à votre application. Vous pouvez le personnaliser autant que possible pour répondre aux besoins de votre service client.

Une fois que vous avez intégré le code du plug-in dans votre application, un utilisateur peut communiquer avec vos équipes de support client et gérer ces conversations à partir du tableau de bord de l'agent de Chatwoot.

  1. Dirigez-vous vers Site de Chatwoot, créez un compte et accédez au tableau de bord de l'utilisateur.
  2. Pour gérer les conversations de vos utilisateurs, vous devez d'abord configurer une boîte de réception et la personnaliser en fonction de vos besoins. Clique sur le Nouvelle boîte de réception bouton pour commencer.
  3. Maintenant, sélectionnez le canal dans lequel vous souhaitez intégrer Chatwoot. Pour ce guide, sélectionnez Site Internet puisque vous l'intégrez dans une application React.
  4. Ensuite, remplissez les détails de votre site Web. Pour le développement local, vous pouvez tester la fonctionnalité avec une URL de domaine hôte local, cependant, une fois que vous avez déployé en production, n'oubliez pas de mettre à jour le domaine avec l'URL en direct.
  5. Enfin, ajoutez un ou plusieurs agents pour gérer les conversations dans cette boîte de réception. Il peut s'agir d'un membre de votre équipe de support client.

Vous avez configuré avec succès le chat en direct de Chatwoot avec votre site Web défini comme canal de communication. Chatwoot générera le code que vous devez intégrer dans votre application pour ajouter le widget de fonctionnalité de chat en direct. Ce code est très flexible puisque vous l'intégrez facilement dans un client Web construit avec l'un des Frameworks frontaux JavaScript.

Si vous souhaitez personnaliser davantage la configuration, cliquez sur le Plus de réglages bouton.

Réagir à la configuration du projet

Créez une application React et intégrez le plug-in de chat en direct de Chatwoot pour tester la fonctionnalité. Créer une application React et créez un fichier ENV dans le répertoire racine de votre dossier de projet pour contenir votre jeton de site Web.

REACT_APP_WEBSITE_TOKEN = jeton

Ensuite, dans le src répertoire, créez un nouveau dossier et nommez-le composants. Dans ce dossier créez un nouveau fichier: Livechat.js.

Ajoutez le code suivant à ce fichier :

importer Réagissez, {useEffect} depuis'réagir'
fonctionChat en direct () {
 useEffet(() => {
fenêtre.chatwootSettings = {
 hideMessageBubble: FAUX,
 position: "droite", 
 lieu: "fr", 
taper: "standard"
 };

 (fonction(ré, t) {
var BASE_URL = " https://app.chatwoot.com";
var g = d.createElement (t), s = d.getElementsByTagName (t)[0];
 g.src = BASE_URL + "/packs/js/sdk.js";
 g.defer = vrai;
 g.async = vrai;
s.parentNode.insertBefore(g, s);


 g.onload = fonction() {
fenêtre.chatwootSDK.courir({
websiteToken: processus.env.REACT_APP_WEBSITE_TOKEN,
 URL de base: BASE_URL
 })
 }
 })(document, "scénario");
 }, []);


retournul;
};
exporterdéfaut Chat en direct;

Ce code intègre la fonctionnalité de chat en direct de Chatwoot dans votre application React. Le crochet useEffect exécute le code à l'intérieur du rappel une fois lorsque le composant est monté. Tout d'abord, il initialise les paramètres de Chatwoot pour la fonctionnalité. Ensuite, il exécute la fonction de plug-in, fournie par Chatwoot, qui configure le widget de chat en direct sur la page.

Il transmet le websiteToken en tant que paramètre à la fonction chatwootSDK.run qui connecte l'application à votre compte Chatwoot. Enfin, la fonction de chat en direct renvoie null puisque vous n'êtes pas obligé de restituer des éléments HTML.

Testez la fonctionnalité de chat en direct

  1. Importez ce composant dans votre app.js fichier et faites tourner le serveur de développement pour mettre à jour les modifications apportées. Vous devriez voir le widget de chat en direct sur votre React s'exécuter sur le navigateur.
  2. Pour tester la fonctionnalité de chat en direct, cliquez sur le widget pour ouvrir le mur de chat de conversation et saisissez un message.
  3. Maintenant, rendez-vous sur votre tableau de bord utilisateur Chatwoot et accédez à votre boîte de réception, vous devriez voir un nouveau message. Par défaut, Chatwoot génère des messages et répond automatiquement immédiatement après qu'un utilisateur a envoyé un message, comme ceux que vous voyez ci-dessous. Tapez une réponse au message et cliquez sur envoyer. Revenez au mur de discussion du widget sur votre application pour afficher la réponse.

Vous avez réussi à intégrer une fonctionnalité de chat en direct dans votre application avec très peu de lignes de code.

Une fonctionnalité de chat en direct en vaut-elle la peine?

Une fonctionnalité de chat en direct est un excellent moyen de fournir un service client, d'augmenter la satisfaction client et d'améliorer l'expérience utilisateur.

Il fournit un canal de communication avec le potentiel d'augmenter l'engagement, de réduire le temps de réponse et de personnaliser le support client. En fin de compte, cela devrait vous aider à améliorer les opérations du service client avec peu d'effort.