Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Se for deg dette: noen som bruker et av produktene dine støter på et problem. Det er noen få kanaler de kan bruke for å rapportere problemet og prøve å løse det.

Blant dem kunne de velge e-post eller en samtale. Men disse kommunikasjonskanalene garanterer ikke raske, enn si sanntidssvar. Men en live, interaktiv chat med en kundestøttepersonell kan vise seg å være uvurderlig.

En live chat-funksjon har vist seg å være et veldig nyttig kommunikasjonsverktøy. Dette er fordi det lar deg engasjere bedre med brukere, forbedre brukeropplevelsen og feilsøke problemer raskt og i sanntid.

Hva er Live Chat og hvorfor er det viktig?

En live chat-funksjon er vanligvis inkludert som en widget på siden av en nettside, eller et popup-vindu som vises etter at nettstedet er lastet inn. Det gir sanntidskommunikasjon mellom brukere og kundeservicerepresentanter eller støtteteam, direkte i applikasjonen.

instagram viewer

Brukere av live chat-funksjonen kan stille presserende spørsmål om produktet, spørre om områder de ikke forstår, eller rapportere et problem og be om løsninger. I mellomtiden kan kundestøtteteamene dine gi sanntids, detaljert tilbakemelding, tilpasset brukeren.

Fordelene ved å integrere en Live Chat-funksjon

Integrering av en live chat-funksjon kan gi flere fordeler:

  • Forbedre innsatsen for kundeservice. Et flott produkt er bare så bra som bruken. Integrering av en live chat-funksjon bidrar til å forbedre brukeropplevelsen betraktelig ved å tilby en enkel måte å få hjelp og svar raskt. Til syvende og sist vil dette hjelpe deg med å tilby bedre tjenester som effektiviserer bruken av produktet ditt.
  • Øk kundeengasjementet. En live chat gjør det mulig for brukere å samhandle med applikasjonen din i sanntid, slik at de føler seg verdsatt. Dette ber dem om å engasjere seg mer, registrere seg og teste ut flere funksjoner.
  • Generer flere leads og øk salget. Denne kommunikasjonskanalen gir en mulighet til å kommunisere med brukerne dine personlig. Du kan bruke denne muligheten til å fange opp potensielle kunder og gjøre dem om til kunder. Du kan også gi produktanbefalinger og mersalg på spesifikke pakker av produktet ditt.
  • Kilde til brukerdata. I den digitale økonomien kan det å ha tilgang til nøyaktige data om brukere sette deg betydelig foran konkurrentene. Når brukere forteller deg om feil eller andre produktproblemer, er denne tilbakemeldingen svært verdifull. Du kan lære mer om hvordan de samhandler med tjenesten din og bruker den til å forbedre produktet ditt.

Hva er Chatwoot?

Chatwoot er en åpen kildekode-kundeserviceplattform som gir en personlig måte å engasjere seg med brukerne på. Det gir også en forenklet plattform der du kan svare på brukernes spørsmål og gi tilbakemelding på tvers av flere kanaler i sanntid.

Du kan bruke automatiserings-, analyse- og rapporteringsverktøyene til å analysere brukerengasjement og enkelt og effektivt administrere kundeserviceoperasjoner.

Ved å bruke denne veiledningen kan du integrere Chatwoot med applikasjonen din og teste live chat-funksjonen med en React-klient og et kundestøttedashbord.

Chatwoot-prosjektoppsett

Chatwoot tilbyr en tilpassbar live chat-plugin som du enkelt kan integrere i applikasjonen din. Du kan tilpasse den så mye som mulig for å passe dine kundeservicebehov.

Når du bygger inn plugin-koden i applikasjonen din, kan en bruker kommunisere med kundestøtteteamene dine, og de kan administrere disse samtalene fra Chatwoots agents dashbord.

  1. Gå over til Chatwoots nettsted, registrer deg for en konto og naviger til brukerdashbordet.
  2. For å administrere brukernes samtaler, må du først sette opp en innboks og tilpasse den basert på det du trenger. Klikk på Ny innboks knappen for å begynne.
  3. Velg nå kanalen du vil integrere Chatwoot i. For denne veiledningen, velg Nettsted siden du integrerer den i en React-app.
  4. Deretter fyller du inn informasjonen om nettstedet ditt. For lokal utvikling kan du teste ut funksjonen med en lokal vertsdomene-URL, men når du har distribuert til produksjon, husk å oppdatere domenet med den aktive URL-en.
  5. Til slutt legger du til en agent/er for å administrere samtalene i denne innboksen. Dette kan være et medlem av kundestøtteteamet ditt.

Du har satt opp Chatwoots live chat med nettstedet ditt angitt som en kommunikasjonskanal. Chatwoot vil generere koden du trenger for å bygge inn i appen din for å legge til widgeten for live chat-funksjonen. Denne koden er veldig fleksibel siden du enkelt integrerer den i en nettklient bygget med noen av de JavaScript-frontend-rammeverk.

Hvis du vil tilpasse oppsettet ytterligere, klikk på Flere innstillinger knapp.

Reager Prosjektoppsett

Lag en React-applikasjon og innebygd Chatwoots live chat-plugin for å teste ut funksjonen. Opprett en React-applikasjon og lag en ENV-fil i rotkatalogen til prosjektmappen din for å holde nettstedets token.

REACT_APP_WEBSITE_TOKEN = token

Neste, i src katalog, opprett en ny mappe og navngi den komponenter. Lag en ny fil i denne mappen: Livechat.js.

Legg til følgende kode i denne filen:

import Reager, {useEffect} fra'reagere'
funksjonLive chat () {
 useEffect(() => {
vindu.chatwootSettings = {
 hideMessageBubble: falsk,
 posisjon: "Ikke sant", 
 lokalitet: "no", 
type: "standard"
 };

 (funksjon(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.utsette = ekte;
 g.async = ekte;
s.parentNode.insertBefore(g, s);


 g.onload = funksjon() {
vindu.chatwootSDK.løpe({
websiteToken: prosess.env.REACT_APP_WEBSITE_TOKEN,
 baseUrl: BASE_URL
 })
 }
 })(dokument, "manus");
 }, []);


komme tilbakenull;
};
eksportmisligholde Live chat;

Denne koden integrerer Chatwoots Live chat-funksjon i React-appen din. UseEffect-kroken kjører koden inne i tilbakeringingen én gang når komponenten monteres. Først initialiserer den Chatwoots innstillinger for funksjonen. Deretter kjører den plugin-funksjonen, levert av Chatwoot, som setter opp live chat-widgeten på siden.

Den sender websiteToken som en parameter til chatwootSDK.run-funksjonen som kobler appen til Chatwoot-kontoen din. Til slutt returnerer Live chat-funksjonen null siden du ikke er pålagt å gjengi HTML-elementer.

Test ut Live Chat-funksjonen

  1. Importer denne komponenten i din app.js fil og snurr opp utviklingsserveren for å oppdatere endringene som er gjort. Du bør se live chat-widgeten på React kjøre i nettleseren.
  2. For å teste live chat-funksjonen, klikk på widgeten for å åpne samtale-chat-veggen og skriv inn en melding.
  3. Gå nå over til Chatwoot-brukerdashbordet og naviger til innboksen din, du skal se en ny melding. Som standard vil Chatwoot generere noen meldinger og automatisk svare umiddelbart etter at en bruker har sendt en melding, som de du ser nedenfor. Skriv inn et svar på meldingen og klikk send. Gå tilbake til widget-chat-veggen på appen din for å se svaret.

Du har vellykket integrert en live chat-funksjon i applikasjonen din med svært få linjer med kode.

Er en Live Chat-funksjon verdt det?

En live chat-funksjon er en fin måte å tilby kundeservice, øke kundetilfredsheten og forbedre brukeropplevelsen.

Det gir en kommunikasjonskanal med potensial til å øke engasjementet, redusere responstiden og tilpasse kundestøtten. Til syvende og sist bør det hjelpe deg med å forbedre kundeservicedriften med liten innsats.