Imaginez ceci : une personne utilisant l’un de vos produits rencontre un problème. Il existe plusieurs canaux qu’il peut utiliser pour signaler le problème et tenter de le résoudre.
Parmi eux, il peut opter pour l’e-mail ou l’appel. Mais ces canaux de communication ne garantissent pas des réponses rapides, et encore moins en temps réel. En revanche, 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, elle vous permet de mieux dialoguer avec les utilisateurs, d’améliorer leur expérience et de résoudre les problèmes rapidement et en temps réel.
Qu’est-ce que le chat en direct et pourquoi est-il important ?
Une fonction 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 pop-up qui apparaît après le chargement du site. Elle permet une communication en temps réel entre les utilisateurs et les représentants du service clientèle ou les équipes d’assistance, directement dans l’application.
Les utilisateurs de la fonction de chat en direct peuvent poser des questions urgentes sur le produit, s’informer sur les points qu’ils ne comprennent pas, ou signaler un problème et demander des solutions. Pendant ce temps, vos équipes de support client peuvent fournir un retour détaillé en temps réel, personnalisé en fonction de l’utilisateur.
Les avantages de l’intégration d’une fonction de chat en direct
L’intégration d’une fonction de chat en direct peut présenter plusieurs avantages :
- Améliorer les efforts du service client. Un excellent produit ne vaut que par son utilisation. L’intégration d’une fonction de chat en direct permet d’améliorer considérablement l’expérience de l’utilisateur en lui offrant un moyen facile d’obtenir rapidement de l’aide et des réponses. 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 d’autres fonctionnalités.
- Générez plus de prospects et augmentez vos ventes. Ce canal de communication permet d’interagir personnellement avec vos utilisateurs. Vous pouvez utiliser cette opportunité pour capter des prospects et les transformer en clients. Vous pouvez également leur recommander des produits et les inciter à acheter des packs 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 avance considérable sur la concurrence. Lorsque les utilisateurs vous font part de bogues ou d’autres problèmes liés à un produit, ce retour d’information est extrêmement précieux. Vous pouvez en apprendre davantage 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 plateforme de service client open-source qui offre un moyen personnalisé d’entrer en contact avec vos utilisateurs. Elle fournit également une plateforme simplifiée qui vous permet de répondre aux questions des utilisateurs et de leur fournir des commentaires sur plusieurs canaux en temps réel.
Vous pouvez utiliser ses outils d’automatisation, d’analyse et de reporting pour analyser l’engagement des utilisateurs et gérer facilement et efficacement les opérations du service client.
Grâce à ce guide, vous pouvez intégrer Chatwoot à votre application et tester sa fonction 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 à vos besoins en matière de service client.
Une fois que vous avez intégré le code du plugin dans votre application, un utilisateur peut communiquer avec vos équipes de support client, et il peut gérer ces conversations depuis le tableau de bord de l’agent de Chatwoot.
- Rendez-vous sur le site Web de Chatwoot, créez un compte et accédez au tableau de bord de l’utilisateur.
- 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. Cliquez sur le bouton Nouvelle boîte de réception bouton pour commencer.
- Maintenant, sélectionnez le canal dans lequel vous voulez intégrer Chatwoot. Pour ce guide, sélectionnez Site web puisque vous l’intégrez dans une application React.
- Ensuite, remplissez les détails de votre site web. Pour le développement local, vous pouvez tester la fonctionnalité avec l’URL d’un domaine hôte local, cependant, une fois que vous déployez en production, n’oubliez pas de mettre à jour le domaine avec l’URL en direct.
- 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 réussi à configurer le chat en direct de Chatwoot avec votre site web comme canal de communication. Chatwoot va générer le code que vous devez intégrer dans votre application pour ajouter le widget de la fonctionnalité de chat en direct. Ce code est très flexible puisque vous pouvez facilement l’intégrer dans un client web construit avec n’importe quel framework JavaScript frontend.
Si vous souhaitez personnaliser davantage la configuration, cliquez sur l’onglet Plus de paramètres bouton.
Configuration du projet React
Créez une application React et intégrez le plugin de chat en direct de Chatwoot pour tester la fonctionnalité. Créez une application React et créez un fichier ENV dans le répertoire racine de votre dossier de projet pour contenir le jeton de votre site web.
REACT_APP_WEBSITE_TOKEN = token
Ensuite, dans le fichier src créez un nouveau dossier et nommez-le « components ». Dans ce dossier, créez un nouveau fichier : Livechat.js.
Ajoutez le code suivant à ce fichier :
import React, {useEffect} from 'react'
function Livechat () {
useEffect(() => {
window.chatwootSettings = {
hideMessageBubble: false,
position: "right",
locale: "en",
type: "standard"
};
(function(d,t) {
var BASE_URL = "https://app.chatwoot.com";
var g = d.createElement