Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Predstavte si toto: niekto, kto používa jeden z vašich produktov, narazí na problém. Existuje niekoľko kanálov, ktoré môžu použiť na nahlásenie problému a pokúsiť sa ho vyriešiť.

Medzi nimi sa mohli rozhodnúť pre e-mail alebo telefonát. Tieto komunikačné kanály však nezaručujú rýchle reakcie, nieto ešte reakcie v reálnom čase. Živý, interaktívny rozhovor s profesionálom zákazníckej podpory sa však môže ukázať ako neoceniteľný.

Funkcia živého chatu sa ukázala ako veľmi užitočný komunikačný nástroj. Je to preto, že vám umožňuje lepšie komunikovať s používateľmi, zlepšiť používateľskú skúsenosť a rýchlo a v reálnom čase riešiť problémy.

Čo je to živý chat a prečo je to dôležité?

Funkcia živého rozhovoru je bežne zahrnutá ako miniaplikácia na bočnej strane webovej stránky alebo kontextové okno, ktoré sa zobrazí po načítaní lokality. Poskytuje komunikáciu v reálnom čase medzi používateľmi a zástupcami zákazníckeho servisu alebo tímom podpory priamo v rámci aplikácie.

instagram viewer

Používatelia funkcie živého chatu môžu klásť naliehavé otázky o produkte, pýtať sa na oblasti, ktorým nerozumejú, alebo nahlásiť problém a požadovať riešenia. Medzitým môžu vaše tímy zákazníckej podpory poskytovať podrobnú spätnú väzbu v reálnom čase prispôsobenú používateľovi.

Výhody integrácie funkcie živého rozhovoru

Integrácia funkcie živého chatu môže priniesť niekoľko výhod:

  • Zlepšite úsilie o služby zákazníkom. Skvelý produkt je len taký dobrý, ako dobré je jeho používanie. Integrácia funkcie živého rozhovoru pomáha výrazne zlepšiť používateľskú skúsenosť tým, že poskytuje jednoduchý spôsob, ako rýchlo získať pomoc a odpovede. V konečnom dôsledku vám to pomôže ponúknuť lepšie služby, ktoré zefektívnia používanie vášho produktu.
  • Zvýšte zapojenie zákazníkov. Živý chat umožňuje používateľom interagovať s vašou aplikáciou v reálnom čase, vďaka čomu sa cítia cenní. To ich vyzýva, aby sa viac zapojili, zaregistrovali sa a otestovali ďalšie funkcie.
  • Získajte viac potenciálnych zákazníkov a zvýšte predaj. Tento komunikačný kanál poskytuje cestu na osobnú interakciu s vašimi používateľmi. Túto príležitosť môžete využiť na zachytenie potenciálnych zákazníkov a ich premenu na zákazníkov. Môžete tiež poskytnúť odporúčania produktov a predávať ich na konkrétnych baleniach vášho produktu.
  • Zdroj používateľských údajov. V digitálnej ekonomike vás prístup k presným údajom o používateľoch môže výrazne posunúť pred konkurenciu. Keď vám používatelia hovoria o chybách alebo iných problémoch s produktom, táto spätná väzba je veľmi cenná. Môžete sa dozvedieť viac o tom, ako interagujú s vašou službou a ako ju použiť na zlepšenie vášho produktu.

Čo je Chatwoot?

Chatwoot je platforma zákazníckych služieb s otvoreným zdrojom, ktorá poskytuje prispôsobený spôsob interakcie s vašimi používateľmi. Poskytuje tiež zjednodušenú platformu, pomocou ktorej môžete reagovať na otázky používateľov a poskytovať spätnú väzbu na viacerých kanáloch v reálnom čase.

Môžete použiť jeho automatizačné, analytické a reportovacie nástroje na analýzu zapojenia používateľov a jednoducho a efektívne spravovať operácie služieb zákazníkom.

Pomocou tejto príručky môžete integrovať Chatwoot s vašou aplikáciou a otestovať jej funkciu živého chatu s klientom React a panelom zákazníckej podpory.

Nastavenie projektu Chatwoot

Chatwoot poskytuje prispôsobiteľný doplnok live chat, ktorý môžete jednoducho integrovať do svojej aplikácie. Môžete si ho čo najviac prispôsobiť, aby vyhovoval vašim potrebám zákazníckeho servisu.

Po vložení kódu doplnku do aplikácie môže používateľ komunikovať s vašimi tímami zákazníckej podpory a tieto konverzácie môžu spravovať z ovládacieho panela agenta Chatwoot.

  1. Zamierte k Web Chatwoot, zaregistrujte si účet a prejdite na informačný panel používateľa.
  2. Ak chcete spravovať konverzácie svojich používateľov, musíte si najprv nastaviť doručenú poštu a prispôsobiť ju podľa toho, čo požadujete. Klikni na Nová schránka tlačidlo na spustenie.
  3. Teraz vyberte kanál, do ktorého chcete integrovať Chatwoot. Pre túto príručku vyberte webové stránky pretože ho integrujete do aplikácie React.
  4. Ďalej vyplňte podrobnosti o svojej webovej lokalite. Pre lokálny vývoj môžete túto funkciu otestovať pomocou adresy URL lokálnej hostiteľskej domény, avšak po nasadení do produkcie nezabudnite doménu aktualizovať pomocou aktívnej adresy URL.
  5. Nakoniec pridajte agenta/ov, ktorí budú spravovať konverzácie v tejto doručenej pošte. Môže to byť člen vášho tímu zákazníckej podpory.

Úspešne ste nastavili chatwoot live chat s vaším webom nastaveným ako komunikačný kanál. Chatwoot vygeneruje kód, ktorý musíte vložiť do svojej aplikácie, aby ste pridali miniaplikáciu funkcie živého rozhovoru. Tento kód je veľmi flexibilný, pretože ho ľahko integrujete do webového klienta vytvoreného s ktorýmkoľvek z nich frontendové rámce JavaScriptu.

Ak chcete nastavenie ďalej prispôsobiť, kliknite na Viac nastavení tlačidlo.

React Project Setup

Vytvorte aplikáciu React a vložte doplnok Chatwoot na live chat, aby ste túto funkciu vyskúšali. Vytvorte aplikáciu React a vytvorte súbor ENV v koreňovom adresári priečinka projektu, v ktorom bude uložený token vašej webovej lokality.

REACT_APP_WEBSITE_TOKEN = token

Ďalej v src vytvorte nový priečinok a pomenujte jeho komponenty. V tomto priečinku vytvorte nový súbor: Livechat.js.

Do tohto súboru pridajte nasledujúci kód:

importovať Reagovať, {useEffect} od'reagovať'
funkciuLivechat () {
 useEffect(() => {
okno.chatwootSettings = {
 hideMessageBubble: falošný,
 pozícia: "správny", 
 miestne nastavenie: "sk", 
typu: "štandard"
 };

 (funkciu(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.odložiť = pravda;
 g.async = pravda;
s.parentNode.insertBefore(g, s);


 g.onload = funkciu() {
okno.chatwootSDK.behať({
websiteToken: proces.env.REACT_APP_WEBSITE_TOKEN,
 baseUrl: BASE_URL
 })
 }
 })(dokument, "skript");
 }, []);


vrátiťnulový;
};
exportpredvolená Livechat;

Tento kód integruje funkciu živého chatu Chatwoot vo vašej aplikácii React. Hák useEffect spustí kód vo vnútri spätného volania raz, keď sa komponent pripojí. Najprv inicializuje nastavenia Chatwoot pre túto funkciu. Potom spustí funkciu doplnku poskytovanú spoločnosťou Chatwoot, ktorá nastaví miniaplikáciu živého rozhovoru na stránke.

WebToken odovzdá ako parameter funkcii chatwootSDK.run, ktorá prepojí aplikáciu s vaším účtom Chatwoot. Nakoniec funkcia živého rozhovoru vráti hodnotu null, pretože nemusíte vykresľovať žiadne prvky HTML.

Vyskúšajte funkciu živého rozhovoru

  1. Importujte tento komponent do svojho app.js súbor a roztočte vývojový server, aby ste aktualizovali vykonané zmeny. Mali by ste vidieť miniaplikáciu živého rozhovoru na vašom React spustenú v prehliadači.
  2. Ak chcete otestovať funkciu živého rozhovoru, kliknutím na miniaplikáciu otvorte stenu konverzácie a napíšte správu.
  3. Teraz prejdite na svoj používateľský panel Chatwoot a prejdite do svojej doručenej pošty, mali by ste vidieť novú správu. V predvolenom nastavení bude Chatwoot generovať nejaké správy a automaticky odpovedať hneď, ako používateľ odošle správu, ako sú tie, ktoré vidíte nižšie. Napíšte odpoveď na správu a kliknite na odoslať. Vráťte sa na zástenu s miniaplikáciou vo svojej aplikácii a zobrazte odpoveď.

Úspešne ste integrovali funkciu živého chatu do vašej aplikácie s veľmi malým počtom riadkov kódu.

Stojí za to funkcia živého chatu?

Funkcia živého chatu je skvelý spôsob, ako poskytovať služby zákazníkom, zvyšovať spokojnosť zákazníkov a zlepšovať používateľskú skúsenosť.

Poskytuje komunikačný kanál s potenciálom zvýšiť angažovanosť, skrátiť čas odozvy a prispôsobiť zákaznícku podporu. V konečnom dôsledku by vám to malo pomôcť zlepšiť operácie služieb zákazníkom s minimálnym úsilím.