So integrieren Sie eine Live-Chat-Funktion in eine React-App mit Chatwoot

2023/02/09

Stellen Sie sich Folgendes vor: Jemand, der eines Ihrer Produkte verwendet, stößt auf ein Problem. Es gibt einige Kanäle, über die sie das Problem melden und versuchen können, es zu lösen.

Unter ihnen konnten sie sich für E-Mail oder einen Anruf entscheiden. Aber diese Kommunikationskanäle garantieren keine schnellen, geschweige denn Echtzeit-Antworten. Aber ein interaktiver Live-Chat mit einem Kundenbetreuer kann sich als unschätzbar erweisen.

Eine Live-Chat-Funktion hat sich als sehr nützliches Kommunikationstool erwiesen. Dies liegt daran, dass Sie damit besser mit Benutzern interagieren, die Benutzererfahrung verbessern und Probleme schnell und in Echtzeit beheben können.

Was ist Live-Chat und warum ist er wichtig?

Eine Live-Chat-Funktion ist normalerweise als Widget an der Seite einer Webseite oder als Popup-Fenster enthalten, das nach dem Laden der Website angezeigt wird. Es bietet Echtzeitkommunikation zwischen Benutzern und Kundendienstmitarbeitern oder Supportteams direkt in der Anwendung.

Kundendienstmitarbeiter bei einem Anruf, der an einem PC arbeitet

Benutzer der Live-Chat-Funktion können dringende Fragen zum Produkt stellen, sich über Bereiche erkundigen, die sie nicht verstehen, oder ein Problem melden und Lösungen anfordern. In der Zwischenzeit können Ihre Kundensupportteams in Echtzeit detailliertes Feedback geben, das auf den Benutzer zugeschnitten ist.

Die Vorteile der Integration einer Live-Chat-Funktion

Die Integration einer Live-Chat-Funktion kann mehrere Vorteile bringen:

Verbesserung der Kundendienstbemühungen . Ein großartiges Produkt ist nur so gut wie seine Verwendung. Die Integration einer Live-Chat-Funktion trägt dazu bei, die Benutzererfahrung erheblich zu verbessern, indem sie eine einfache Möglichkeit bietet, schnell Hilfe und Antworten zu erhalten. Letztendlich hilft Ihnen dies, bessere Dienste anzubieten, die die Nutzung Ihres Produkts optimieren.
Steigern Sie die Kundenbindung . Ein Live-Chat ermöglicht es Benutzern, in Echtzeit mit Ihrer Anwendung zu interagieren, wodurch sie sich wertgeschätzt fühlen. Dies veranlasst sie, sich mehr zu engagieren, sich anzumelden und weitere Funktionen zu testen.
Generieren Sie mehr Leads und steigern Sie den Umsatz . Dieser Kommunikationskanal bietet eine Möglichkeit, mit Ihren Benutzern persönlich zu interagieren. Sie können diese Gelegenheit nutzen, um Leads zu erfassen und sie in Kunden umzuwandeln. Sie können auch Produktempfehlungen geben und diese für bestimmte Pakete Ihres Produkts verkaufen.
Quelle der Benutzerdaten . In der digitalen Wirtschaft kann Ihnen der Zugriff auf genaue Daten über Benutzer einen erheblichen Vorsprung gegenüber der Konkurrenz verschaffen. Wenn Benutzer Ihnen von Fehlern oder anderen Produktproblemen berichten, ist dieses Feedback sehr wertvoll. Sie können mehr darüber erfahren, wie sie mit Ihrem Service interagieren und sie zur Verbesserung Ihres Produkts verwenden.

Was ist Chatwoot?

Chatwoot ist eine Open-Source-Kundendienstplattform, die eine personalisierte Möglichkeit bietet, mit Ihren Benutzern in Kontakt zu treten. Es bietet Ihnen auch eine vereinfachte Plattform, um auf Benutzeranfragen zu antworten und Feedback über mehrere Kanäle in Echtzeit zu geben.

Sie können die Automatisierungs-, Analyse- und Berichtstools verwenden, um das Benutzerengagement zu analysieren und den Kundendienstbetrieb einfach und effektiv zu verwalten.

Mithilfe dieses Leitfadens können Sie Chatwoot in Ihre Anwendung integrieren und die Live-Chat-Funktion mit einem React-Client und einem Kundensupport-Dashboard testen.

Einrichtung des Chatwoot-Projekts

Chatwoot bietet ein anpassbares Live-Chat-Plugin, das Sie einfach in Ihre Anwendung integrieren können. Sie können es so weit wie möglich an Ihre Kundendienstanforderungen anpassen.

Sobald Sie den Plugin-Code in Ihre Anwendung eingebettet haben, kann ein Benutzer mit Ihren Kundensupportteams kommunizieren und diese Gespräche über das Agenten-Dashboard von Chatwoot verwalten.

Gehen Sie zur Website von Chatwoot , melden Sie sich für ein Konto an und navigieren Sie zum Benutzer-Dashboard.
Um die Konversationen Ihrer Benutzer zu verwalten, müssen Sie zunächst einen Posteingang einrichten und ihn Ihren Anforderungen entsprechend anpassen. Klicken Sie auf die Schaltfläche Neuer Posteingang , um zu beginnen.
Wählen Sie nun den Kanal aus, in den Sie Chatwoot integrieren möchten. Wählen Sie für diese Anleitung Website aus, da Sie sie in eine React-App integrieren.
Geben Sie als Nächstes Ihre Website-Details ein. Für die lokale Entwicklung können Sie die Funktion mit einer lokalen Hostdomänen-URL testen. Denken Sie jedoch nach der Bereitstellung in der Produktion daran, die Domäne mit der Live-URL zu aktualisieren.
Fügen Sie schließlich einen oder mehrere Agenten hinzu, um die Konversationen in diesem Posteingang zu verwalten. Dies kann ein Mitglied Ihres Kundensupportteams sein.

Sie haben den Live-Chat von Chatwoot erfolgreich eingerichtet, wobei Ihre Website als Kommunikationskanal festgelegt wurde. Chatwoot generiert den Code, den Sie in Ihre App einbetten müssen, um das Live-Chat-Funktions-Widget hinzuzufügen. Dieser Code ist sehr flexibel, da Sie ihn problemlos in einen Webclient integrieren können, der mit einem der JavaScript-Frontend-Frameworks erstellt wurde.

Wenn Sie das Setup weiter anpassen möchten, klicken Sie auf die Schaltfläche Weitere Einstellungen .

Projekteinrichtung reagieren

Erstellen Sie eine React-Anwendung und binden Sie das Live-Chat-Plugin von Chatwoot ein, um die Funktion zu testen. Erstellen Sie eine React-Anwendung und erstellen Sie eine ENV-Datei im Stammverzeichnis Ihres Projektordners, um Ihr Website-Token zu speichern.

REACT_APP_WEBSITE_TOKEN = token

Erstellen Sie als Nächstes im src- Verzeichnis einen neuen Ordner und nennen Sie ihn components. Erstellen Sie in diesem Ordner eine neue Datei: Livechat.js .

Fügen Sie dieser Datei den folgenden Code hinzu:

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(t), s = d.getElementsByTagName(t)[0];
      g.src = BASE_URL + "/packs/js/sdk.js";
      g.defer = true;
      g.async = true;
      s.parentNode.insertBefore(g, s);
      g.onload = function() {
        window.chatwootSDK.run({
          websiteToken: process.env.REACT_APP_WEBSITE_TOKEN,
          baseUrl: BASE_URL
        })
      }
    })(document, "script");
  }, []);
  return null;
};

export default Livechat;

Dieser Code integriert die Live-Chat-Funktion von Chatwoot in Ihre React-App. Der Hook useEffect führt den Code innerhalb des Callbacks einmal aus, wenn die Komponente bereitgestellt wird. Zuerst werden die Chatwoot-Einstellungen für die Funktion initialisiert. Dann führt es die von Chatwoot bereitgestellte Plugin-Funktion aus, die das Live-Chat-Widget auf der Seite einrichtet.

Es übergibt das websiteToken als Parameter an die Funktion chatwootSDK.run, die die App mit Ihrem Chatwoot-Konto verbindet. Schließlich gibt die Live-Chat-Funktion null zurück, da Sie keine HTML-Elemente rendern müssen.

Testen Sie die Live-Chat-Funktion

Importieren Sie diese Komponente in Ihre app.js -Datei und starten Sie den Entwicklungsserver, um die vorgenommenen Änderungen zu aktualisieren. Sie sollten das Live-Chat-Widget auf Ihrem React im Browser sehen.
Um die Live-Chat-Funktion zu testen, klicken Sie auf das Widget, um die Konversations-Chatwand zu öffnen, und geben Sie eine Nachricht ein.
Gehen Sie jetzt zu Ihrem Chatwoot-Benutzer-Dashboard und navigieren Sie zu Ihrem Posteingang. Sie sollten eine neue Nachricht sehen. Standardmäßig generiert Chatwoot einige Nachrichten und antwortet sofort automatisch, nachdem ein Benutzer eine Nachricht gesendet hat, wie die, die Sie unten sehen. Geben Sie eine Antwort auf die Nachricht ein und klicken Sie auf Senden. Gehen Sie zurück zur Widget-Chatwand in Ihrer App, um die Antwort anzuzeigen.

Sie haben mit wenigen Codezeilen erfolgreich eine Live-Chat-Funktion in Ihre Anwendung integriert.

Lohnt sich eine Live-Chat-Funktion?

Eine Live-Chat-Funktion ist eine großartige Möglichkeit, Kundenservice bereitzustellen, die Kundenzufriedenheit zu steigern und die Benutzererfahrung zu verbessern.

Es bietet einen Kommunikationskanal mit dem Potenzial, das Engagement zu steigern, die Reaktionszeit zu verkürzen und den Kundensupport zu personalisieren. Letztendlich sollte es Ihnen helfen, den Kundenservice mit wenig Aufwand zu verbessern.