Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Forestil dig dette: nogen, der bruger et af dine produkter, støder på et problem. Der er et par kanaler, de kan bruge til at rapportere problemet og prøve at løse det.

Blandt dem kunne de vælge e-mail eller et opkald. Men disse kommunikationskanaler garanterer ikke hurtige, endsige realtidssvar. Men en live, interaktiv chat med en kundesupportmedarbejder kan vise sig at være uvurderlig.

En live chat-funktion har vist sig at være et meget nyttigt kommunikationsværktøj. Dette er fordi det giver dig mulighed for at interagere bedre med brugerne, forbedre brugeroplevelsen og fejlfinde problemer hurtigt og i realtid.

Hvad er live chat, og hvorfor er det vigtigt?

En live chat-funktion er almindeligvis inkluderet som en widget på siden af ​​en webside eller et pop-up-vindue, der vises, efter at webstedet er indlæst. Det giver realtidskommunikation mellem brugere og kundeservicerepræsentanter eller supportteams direkte i applikationen.

instagram viewer

Brugere af live chat-funktionen kan stille presserende spørgsmål om produktet, forespørge om områder, de ikke forstår, eller rapportere et problem og anmode om løsninger. I mellemtiden kan dine kundesupportteams give detaljeret feedback i realtid, tilpasset brugeren.

Fordelene ved at integrere en Live Chat-funktion

Integrering af en live chat-funktion kan give flere fordele:

  • Forbedre indsatsen for kundeservice. Et godt produkt er kun så godt som dets brug. Integrering af en live chat-funktion hjælper med at forbedre en brugers oplevelse markant ved at give en nem måde at få hjælp og svar hurtigt. I sidste ende vil dette hjælpe dig med at tilbyde bedre tjenester, der strømliner brugen af ​​dit produkt.
  • Øg kundernes engagement. En live chat giver brugerne mulighed for at interagere med din applikation i realtid, hvilket får dem til at føle sig værdsat. Dette beder dem om at engagere sig mere, tilmelde sig og teste flere funktioner.
  • Generer flere leads og øg salget. Denne kommunikationskanal giver mulighed for at interagere med dine brugere personligt. Du kan bruge denne mulighed til at fange kundeemner og gøre dem til kunder. Du kan også give produktanbefalinger og opsælge dem på specifikke pakker af dit produkt.
  • Kilde til brugerdata. I den digitale økonomi kan det at have adgang til præcise data om brugere bringe dig betydeligt foran konkurrenterne. Når brugere fortæller dig om fejl eller andre produktproblemer, er den feedback meget værdifuld. Du kan lære mere om, hvordan de interagerer med din tjeneste og bruger den til at forbedre dit produkt.

Hvad er Chatwoot?

Chatwoot er en open source-kundeserviceplatform, der giver en personlig måde at interagere med dine brugere på. Det giver også en forenklet platform, hvor du kan svare på brugernes forespørgsler og give feedback på tværs af flere kanaler i realtid.

Du kan bruge dets automatiserings-, analyse- og rapporteringsværktøjer til at analysere brugerengagement og nemt og effektivt administrere kundeservicedrift.

Ved at bruge denne guide kan du integrere Chatwoot med din applikation og teste dens live chat-funktion med en React-klient og et kundesupport-dashboard.

Chatwoot-projektopsætning

Chatwoot leverer et tilpasseligt live chat plugin, som du nemt kan integrere i din applikation. Du kan tilpasse det så meget som muligt, så det passer til dine kundeservicebehov.

Når du har indlejret plugin-koden i din applikation, kan en bruger kommunikere med dine kundesupportteams, og de kan administrere disse samtaler fra Chatwoots agents dashboard.

  1. Gå over til Chatwoots hjemmeside, tilmeld dig en konto, og naviger til brugerbetjeningspanelet.
  2. For at administrere dine brugeres samtaler skal du først oprette en indbakke og tilpasse den baseret på det, du har brug for. Klik på Ny indbakke knappen for at begynde.
  3. Vælg nu den kanal, hvor du vil integrere Chatwoot. For denne vejledning skal du vælge Internet side da du integrerer det i en React-app.
  4. Udfyld derefter dine webstedsoplysninger. For lokal udvikling kan du teste funktionen med en lokal værtsdomæne-URL, men når du først implementerer til produktion, skal du huske at opdatere domænet med den live-URL.
  5. Tilføj endelig en eller flere agenter til at administrere samtalerne i denne indbakke. Dette kan være et medlem af dit kundesupportteam.

Du har med succes opsat Chatwoots livechat med din hjemmeside indstillet som en kommunikationskanal. Chatwoot genererer den kode, du skal indlejre i din app for at tilføje live chat-funktionswidgetten. Denne kode er meget fleksibel, da du nemt integrerer den i en webklient bygget med en hvilken som helst af de JavaScript frontend rammer.

Hvis du ønsker at tilpasse opsætningen yderligere, klik på Flere indstillinger knap.

React Project Setup

Opret en React-applikation og indlejret Chatwoots live chat-plugin for at teste funktionen. Opret en React-applikation og opret en ENV-fil i rodmappen i din projektmappe for at holde dit webstedstoken.

REACT_APP_WEBSITE_TOKEN = token

Dernæst i src mappe, opret en ny mappe og navngiv den komponenter. Opret en ny fil i denne mappe: Livechat.js.

Tilføj følgende kode til denne fil:

importere Reager, {useEffect} fra'reagere'
fungereLivechat () {
 useEffect(() => {
vindue.chatwootSettings = {
 hideMessageBubble: falsk,
 position: "højre", 
 lokalitet: "da", 
type: "standard"
 };

 (fungere(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 = rigtigt;
 g.async = rigtigt;
s.parentNode.insertBefore(g, s);


 g.onload = fungere() {
vindue.chatwootSDK.løb({
websiteToken: behandle.env.REACT_APP_WEBSITE_TOKEN,
 baseUrl: BASE_URL
 })
 }
 })(dokument, "manuskript");
 }, []);


Vend tilbagenul;
};
eksportStandard Livechat;

Denne kode integrerer Chatwoots Live chat-funktion i din React-app. UseEffect-krogen kører koden inde i tilbagekaldet én gang, når komponenten monteres. Først initialiserer den Chatwoots indstillinger for funktionen. Derefter kører den plugin-funktionen, leveret af Chatwoot, der sætter live chat-widgetten op på siden.

Den videregiver websiteToken som en parameter til chatwootSDK.run-funktionen, der forbinder appen med din Chatwoot-konto. Endelig returnerer Live chat-funktionen null, da du ikke er forpligtet til at gengive nogen HTML-elementer.

Test Live Chat-funktionen

  1. Importer denne komponent i din app.js fil og skru udviklingsserveren op for at opdatere de foretagne ændringer. Du bør se live chat-widgetten på din React køre på browseren.
  2. For at teste livechatfunktionen skal du klikke på widgetten for at åbne samtalens chatvæg og skrive en besked.
  3. Gå nu over til dit Chatwoot-brugerdashboard og naviger til din indbakke, du skulle se en ny besked. Som standard vil Chatwoot generere nogle beskeder og automatisk svare umiddelbart efter en bruger har sendt en besked, som dem du ser nedenfor. Skriv et svar på beskeden, og klik på send. Gå tilbage til widget-chatvæggen på din app for at se svaret.

Du har med succes integreret en live chat-funktion i din applikation med meget få linjer kode.

Er en Live Chat-funktion det værd?

En live chat-funktion er en fantastisk måde at yde kundeservice, øge kundetilfredsheden og forbedre brugeroplevelsen.

Det giver en kommunikationskanal med potentiale til at øge engagementet, reducere responstiden og tilpasse kundesupport. I sidste ende skulle det hjælpe dig med at forbedre kundeservicedriften med en lille indsats.