Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Stel je voor: iemand die een van je producten gebruikt, stuit op een probleem. Er zijn een paar kanalen die ze kunnen gebruiken om het probleem te melden en te proberen het op te lossen.

Onder hen konden ze kiezen voor e-mail of bellen. Maar deze communicatiekanalen garanderen geen snelle, laat staan ​​realtime reacties. Maar een live, interactieve chat met een klantenservicemedewerker kan van onschatbare waarde zijn.

Een live chatfunctie is een zeer nuttig communicatiemiddel gebleken. Dit komt omdat het u in staat stelt om beter met gebruikers om te gaan, de gebruikerservaring te verbeteren en problemen snel en in realtime op te lossen.

Wat is livechat en waarom is het belangrijk?

Een live chat-functie wordt meestal opgenomen als een widget aan de zijkant van een webpagina, of een pop-upvenster dat verschijnt nadat de site is geladen. Het biedt real-time communicatie tussen gebruikers en vertegenwoordigers van de klantenservice of ondersteuningsteams, rechtstreeks binnen de applicatie.

instagram viewer

Gebruikers van de livechatfunctie kunnen prangende vragen stellen over het product, vragen stellen over gebieden die ze niet begrijpen, of een probleem melden en om oplossingen vragen. Ondertussen kunnen uw klantenondersteuningsteams real-time, gedetailleerde feedback geven, gepersonaliseerd voor de gebruiker.

De voordelen van het integreren van een livechatfunctie

Het integreren van een livechatfunctie kan verschillende voordelen opleveren:

  • Verbeter de inspanningen van de klantenservice. Een geweldig product is zo goed als het gebruik ervan. Het integreren van een livechatfunctie helpt de ervaring van een gebruiker aanzienlijk te verbeteren door een gemakkelijke manier te bieden om snel hulp en antwoorden te krijgen. Uiteindelijk zal dit u helpen betere services aan te bieden die het gebruik van uw product stroomlijnen.
  • Vergroot klantbetrokkenheid. Een livechat stelt gebruikers in staat om in realtime met uw applicatie te communiceren, waardoor ze zich gewaardeerd voelen. Dit zet hen ertoe aan meer te doen, zich aan te melden en meer functies uit te proberen.
  • Genereer meer leads en verhoog de omzet. Dit communicatiekanaal biedt een manier om persoonlijk met uw gebruikers te communiceren. U kunt deze kans gebruiken om leads vast te leggen en ze om te zetten in klanten. U kunt ook productaanbevelingen geven en deze verkopen voor specifieke pakketten van uw product.
  • Bron van gebruikersgegevens. In de digitale economie kan toegang tot nauwkeurige gegevens over gebruikers u een aanzienlijke voorsprong geven op de concurrentie. Wanneer gebruikers u vertellen over bugs of andere productproblemen, is die feedback zeer waardevol. U kunt meer te weten komen over hoe ze omgaan met uw service en deze gebruiken om uw product te verbeteren.

Wat is Chatwoot?

Chatwoot is een open-source klantenserviceplatform dat een gepersonaliseerde manier biedt om met uw gebruikers in contact te komen. Het biedt ook een vereenvoudigd platform waarop u kunt reageren op vragen van gebruikers en in realtime feedback kunt geven via meerdere kanalen.

U kunt de tools voor automatisering, analyse en rapportage gebruiken om de betrokkenheid van gebruikers te analyseren en de klantenservice eenvoudig en effectief te beheren.

Met behulp van deze gids kunt u Chatwoot integreren met uw applicatie en de livechatfunctie testen met een React-client en een klantenondersteuningsdashboard.

Chatwoot-project instellen

Chatwoot biedt een aanpasbare plug-in voor livechat die u eenvoudig in uw applicatie kunt integreren. U kunt het zoveel mogelijk aanpassen aan de behoeften van uw klantenservice.

Zodra u de plug-incode in uw applicatie hebt ingesloten, kan een gebruiker communiceren met uw klantenondersteuningsteams en zij kunnen die gesprekken beheren vanaf het dashboard van de agent van Chatwoot.

  1. Ga naar Chatwoots website, meld u aan voor een account en navigeer naar het gebruikersdashboard.
  2. Om de gesprekken van uw gebruikers te beheren, moet u eerst een inbox instellen en deze aanpassen op basis van wat u nodig heeft. Klik op de Nieuwe inbox knop om te beginnen.
  3. Selecteer nu het kanaal waarin je Chatwoot wilt integreren. Selecteer voor deze handleiding Website omdat je het integreert in een React-app.
  4. Vul vervolgens uw websitegegevens in. Voor lokale ontwikkeling kunt u de functie testen met een URL van een lokaal hostdomein. Vergeet echter niet om het domein bij te werken met de live-URL zodra u het in productie heeft genomen.
  5. Voeg tot slot een agent(en) toe om de gesprekken in deze inbox te beheren. Dit kan een lid van uw klantenserviceteam zijn.

Je hebt met succes de livechat van Chatwoot opgezet met je website ingesteld als communicatiekanaal. Chatwoot genereert de code die u nodig heeft om in uw app in te sluiten om de widget voor livechatfuncties toe te voegen. Deze code is zeer flexibel omdat u deze eenvoudig kunt integreren in een webclient die is gebouwd met een van de JavaScript frontend-frameworks.

Als u de instellingen verder wilt aanpassen, klikt u op de Meer instellingen knop.

Projectopstelling reageren

Maak een React-applicatie en ingesloten Chatwoot's live chat-plug-in om de functie uit te testen. Maak een React-applicatie en maak een ENV-bestand in de hoofdmap van uw projectmap om uw websitetoken te bewaren.

REACT_APP_WEBSITE_TOKEN = token

Vervolgens in de src directory, maak een nieuwe map en noem deze componenten. Maak in deze map een nieuw bestand aan: Livechat.js.

Voeg de volgende code toe aan dit bestand:

importeren Reageer, {useEffect} van'Reageer'
functieLive chat () {
 gebruikEffect(() => {
raam.chatwootInstellingen = {
 hideMessageBubble: vals,
 positie: "rechts", 
 plaats: "en", 
type: "standaard"
 };

 (functie(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.uitstellen = WAAR;
 g.async = WAAR;
S.parentNode.insertBefore(G, S);


 g.onload = functie() {
raam.chatwootSDK.loop({
websiteToken: proces.env.REACT_APP_WEBSITE_TOKEN,
 baseUrl: BASE_URL
 })
 }
 })(document, "script");
 }, []);


opbrengstnul;
};
exporterenstandaard Live chat;

Deze code integreert de livechatfunctie van Chatwoot in uw React-app. De useEffect hook voert de code binnen de callback één keer uit wanneer de component wordt gemount. Eerst worden de instellingen van Chatwoot voor de functie geïnitialiseerd. Vervolgens voert het de plug-infunctie uit, geleverd door Chatwoot, die de live chat-widget op de pagina instelt.

Het geeft de websiteToken als een parameter door aan de functie chatwootSDK.run die de app verbindt met uw Chatwoot-account. Ten slotte retourneert de Live chat-functie null omdat u geen HTML-elementen hoeft weer te geven.

Test de Live Chat-functie

  1. Importeer dit onderdeel in uw app.js bestand en start de ontwikkelingsserver om de aangebrachte wijzigingen bij te werken. Je zou de live chat-widget op je React in de browser moeten zien draaien.
  2. Om de livechatfunctie te testen, klikt u op de widget om de conversatiechatmuur te openen en typt u een bericht.
  3. Ga nu naar je Chatwoot-gebruikersdashboard en navigeer naar je inbox, je zou een nieuw bericht moeten zien. Chatwoot genereert standaard enkele berichten en reageert automatisch onmiddellijk nadat een gebruiker een bericht heeft verzonden, zoals de berichten die u hieronder ziet. Typ een antwoord op het bericht en klik op verzenden. Ga terug naar de widget-chatmuur in uw app om het antwoord te bekijken.

U heeft met slechts enkele regels code met succes een livechatfunctie in uw applicatie geïntegreerd.

Is een livechatfunctie de moeite waard?

Een livechatfunctie is een geweldige manier om klantenservice te bieden, de klanttevredenheid te vergroten en de gebruikerservaring te verbeteren.

Het biedt een communicatiekanaal met het potentieel om de betrokkenheid te vergroten, de responstijd te verkorten en de klantenondersteuning te personaliseren. Uiteindelijk zou het u moeten helpen de klantenservice met weinig moeite te verbeteren.