Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Představte si toto: někdo, kdo používá některý z vašich produktů, narazí na problém. Existuje několik kanálů, které mohou použít k nahlášení problému a pokusu o jeho vyřešení.

Mezi nimi se mohli rozhodnout pro e-mail nebo telefonát. Tyto komunikační kanály však nezaručují rychlé reakce, natož reakce v reálném čase. Ale živý, interaktivní chat s profesionálem zákaznické podpory se může ukázat jako neocenitelný.

Funkce živého chatu se ukázala jako velmi užitečný komunikační nástroj. Je to proto, že vám umožňuje lépe komunikovat s uživateli, zlepšovat uživatelský dojem a odstraňovat problémy rychle a v reálném čase.

Co je to živý chat a proč je důležitý?

Funkce živého chatu je běžně zahrnuta jako widget na straně webové stránky nebo vyskakovací okno, které se objeví po načtení webu. Poskytuje komunikaci v reálném čase mezi uživateli a zástupci zákaznických služeb nebo týmy podpory přímo v aplikaci.

instagram viewer

Uživatelé funkce živého chatu mohou klást naléhavé otázky o produktu, dotazovat se na oblasti, kterým nerozumějí, nebo nahlásit problém a požadovat řešení. Mezitím mohou vaše týmy zákaznické podpory poskytovat v reálném čase podrobnou zpětnou vazbu přizpůsobenou uživateli.

Výhody integrace funkce živého chatu

Integrace funkce živého chatu může přinést několik výhod:

  • Zlepšete úsilí o služby zákazníkům. Skvělý produkt je jen tak dobrý, jak dobrý je jeho použití. Integrace funkce živého chatu pomáhá výrazně zlepšit uživatelské prostředí tím, že poskytuje snadný způsob, jak rychle získat pomoc a odpovědi. V konečném důsledku vám to pomůže nabídnout lepší služby, které zefektivní používání vašeho produktu.
  • Zvyšte zapojení zákazníků. Živý chat umožňuje uživatelům komunikovat s vaší aplikací v reálném čase, díky čemuž se cítí oceňováni. To je vyzve, aby se více zapojili, zaregistrovali se a vyzkoušeli další funkce.
  • Získejte více potenciálních zákazníků a zvyšte prodeje. Tento komunikační kanál poskytuje cestu k osobní interakci s vašimi uživateli. Tuto příležitost můžete využít k zachycení potenciálních zákazníků a proměnit je v zákazníky. Můžete také poskytnout doporučení produktů a prodat je na konkrétních balíčcích vašeho produktu.
  • Zdroj uživatelských dat. V digitální ekonomice vás přístup k přesným údajům o uživatelích může výrazně posunout před konkurenci. Když vám uživatelé říkají o chybách nebo jiných problémech s produktem, je tato zpětná vazba velmi cenná. Můžete se dozvědět více o tom, jak interagují s vaší službou a jak ji používat ke zlepšení vašeho produktu.

Co je Chatwoot?

Chatwoot je platforma zákaznických služeb s otevřeným zdrojovým kódem, která poskytuje personalizovaný způsob interakce s vašimi uživateli. Poskytuje také zjednodušenou platformu, pomocí které můžete reagovat na dotazy uživatelů a poskytovat zpětnou vazbu na více kanálech v reálném čase.

Můžete použít jeho automatizační, analytické a reportovací nástroje k analýze zapojení uživatelů a snadno a efektivně spravovat operace zákaznických služeb.

Pomocí této příručky můžete integrovat Chatwoot s vaší aplikací a vyzkoušet jeho funkci živého chatu s klientem React a řídicím panelem zákaznické podpory.

Nastavení projektu Chatwoot

Chatwoot poskytuje přizpůsobitelný plugin pro živý chat, který můžete snadno integrovat do své aplikace. Můžete si jej co nejvíce přizpůsobit potřebám svých zákaznických služeb.

Jakmile do své aplikace vložíte kód pluginu, může uživatel komunikovat s vašimi týmy zákaznické podpory a tyto konverzace mohou spravovat z řídicího panelu agenta Chatwoot.

  1. Zamiřte k Web Chatwoot, zaregistrujte si účet a přejděte na uživatelský panel.
  2. Chcete-li spravovat konverzace svých uživatelů, musíte nejprve nastavit doručenou poštu a přizpůsobit ji podle toho, co potřebujete. Klikněte na Nová schránka tlačítko pro zahájení.
  3. Nyní vyberte kanál, do kterého chcete integrovat Chatwoot. Pro tuto příručku vyberte webová stránka protože jej integrujete do aplikace React.
  4. Dále vyplňte podrobnosti o svém webu. Pro místní vývoj můžete funkci vyzkoušet pomocí adresy URL místní hostitelské domény, ale jakmile ji nasadíte do produkce, nezapomeňte doménu aktualizovat pomocí živé adresy URL.
  5. Nakonec přidejte zástupce pro správu konverzací v této doručené poště. Může to být člen vašeho týmu zákaznické podpory.

Úspěšně jste nastavili chatwoot live chat s vaším webem nastaveným jako komunikační kanál. Chatwoot vygeneruje kód, který musíte vložit do své aplikace, abyste mohli přidat widget funkce živého chatu. Tento kód je velmi flexibilní, protože jej snadno integrujete do webového klienta vytvořeného pomocí kteréhokoli z nich JavaScript frontend frameworky.

Pokud chcete nastavení dále upravit, klikněte na Více nastavení knoflík.

React Project Setup

Vytvořte aplikaci React a vložte plugin Chatwoot pro živý chat, abyste tuto funkci vyzkoušeli. Vytvořte aplikaci React a v kořenovém adresáři složky projektu vytvořte soubor ENV, do kterého bude uložen token vašeho webu.

REACT_APP_WEBSITE_TOKEN = token

Dále v src vytvořte novou složku a pojmenujte ji komponenty. V této složce vytvořte nový soubor: Livechat.js.

Přidejte do tohoto souboru následující kód:

import Reagovat, {useEffect} z'reagovat'
funkceŽivý chat () {
 useEffect(() => {
okno.chatwootSettings = {
 hideMessageBubble: Nepravdivé,
 pozice: "že jo", 
 národní prostředí: "en", 
typ: "Standard"
 };

 (funkce(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žit = skutečný;
 g.async = skutečný;
s.parentNode.insertBefore(G, s);


 g.onload = funkce() {
okno.chatwootSDK.běh({
websiteToken: proces.env.REACT_APP_WEBSITE_TOKEN,
 baseUrl: BASE_URL
 })
 }
 })(dokument, "skript");
 }, []);


vrátit senula;
};
vývoznívýchozí Živý chat;

Tento kód integruje funkci živého chatu Chatwoot ve vaší aplikaci React. Hák useEffect spustí kód uvnitř zpětného volání jednou, když se komponenta připojí. Nejprve inicializuje nastavení Chatwoot pro tuto funkci. Poté spustí funkci pluginu poskytovanou Chatwootem, která nastaví widget živého chatu na stránce.

Předá websiteToken jako parametr funkci chatwootSDK.run, která propojí aplikaci s vaším účtem Chatwoot. Nakonec funkce živého chatu vrátí hodnotu null, protože nemusíte vykreslovat žádné prvky HTML.

Vyzkoušejte funkci živého chatu

  1. Importujte tuto komponentu do svého app.js soubor a roztočte vývojový server, abyste aktualizovali provedené změny. Měli byste vidět widget živého chatu na vašem Reactu spuštěném v prohlížeči.
  2. Chcete-li vyzkoušet funkci živého chatu, kliknutím na widget otevřete konverzační chatovou zeď a napište zprávu.
  3. Nyní přejděte na svůj uživatelský panel Chatwoot a přejděte do své doručené pošty, měli byste vidět novou zprávu. Ve výchozím nastavení bude Chatwoot generovat nějaké zprávy a automaticky reagovat ihned poté, co uživatel odešle zprávu, jako jsou ty, které vidíte níže. Napište odpověď na zprávu a klikněte na odeslat. Vraťte se na chatovací stěnu widgetu ve vaší aplikaci a zobrazte odpověď.

Úspěšně jste do své aplikace integrovali funkci živého chatu s velmi malým počtem řádků kódu.

Vyplatí se funkce živého chatu?

Funkce živého chatu je skvělý způsob, jak poskytovat zákaznický servis, zvýšit spokojenost zákazníků a zlepšit uživatelskou zkušenost.

Poskytuje komunikační kanál s potenciálem zvýšit zapojení, zkrátit dobu odezvy a personalizovat zákaznickou podporu. V konečném důsledku by vám to mělo pomoci zlepšit operace služeb zákazníkům s minimálním úsilím.