Jak zintegrować funkcję czatu na żywo w aplikacji React za pomocą Chatwoot

2023/02/09

Wyobraź sobie taką sytuację: ktoś korzystający z jednego z Twoich produktów napotyka problem. Istnieje kilka kanałów, za pomocą których mogą zgłosić problem i spróbować go rozwiązać.

Wśród nich mogli wybrać e-mail lub połączenie. Ale te kanały komunikacji nie gwarantują szybkich odpowiedzi, nie mówiąc już o czasie rzeczywistym. Ale interaktywny czat na żywo z pracownikiem obsługi klienta może okazać się nieoceniony.

Funkcja czatu na żywo okazała się bardzo przydatnym narzędziem komunikacji. Dzieje się tak, ponieważ umożliwia lepszą interakcję z użytkownikami, poprawę komfortu użytkowania i szybkie rozwiązywanie problemów w czasie rzeczywistym.

Co to jest czat na żywo i dlaczego jest ważny?

Funkcja czatu na żywo jest zwykle dołączana jako widżet z boku strony internetowej lub wyskakujące okienko, które pojawia się po załadowaniu witryny. Zapewnia komunikację w czasie rzeczywistym między użytkownikami a przedstawicielami obsługi klienta lub zespołami wsparcia, bezpośrednio w aplikacji.

Agent obsługi klienta podczas rozmowy, pracujący na komputerze

Użytkownicy funkcji czatu na żywo mogą zadawać pilne pytania dotyczące produktu, pytać o obszary, których nie rozumieją lub zgłaszać problemy i prosić o rozwiązania. Tymczasem zespoły obsługi klienta mogą dostarczać w czasie rzeczywistym szczegółowe informacje zwrotne, spersonalizowane pod kątem użytkownika.

Korzyści z integracji funkcji czatu na żywo

Integracja funkcji czatu na żywo może przynieść kilka korzyści:

Usprawnij działania związane z obsługą klienta . Świetny produkt jest tak dobry, jak jego użytkowanie. Integracja funkcji czatu na żywo pomaga znacznie poprawić komfort użytkowania, zapewniając łatwy sposób szybkiego uzyskania pomocy i odpowiedzi. Ostatecznie pomoże to oferować lepsze usługi, które usprawnią korzystanie z produktu.
Zwiększ zaangażowanie klientów . Czat na żywo umożliwia użytkownikom interakcję z Twoją aplikacją w czasie rzeczywistym, dzięki czemu czują się docenieni. To skłania ich do większego zaangażowania, rejestracji i testowania większej liczby funkcji.
Generuj więcej leadów i zwiększ sprzedaż . Ten kanał komunikacji umożliwia osobistą interakcję z użytkownikami. Możesz wykorzystać tę okazję do przechwytywania potencjalnych klientów i przekształcania ich w klientów. Możesz również dostarczać rekomendacje produktów i sprzedawać je w określonych opakowaniach swojego produktu.
Źródło danych użytkownika . W gospodarce cyfrowej dostęp do dokładnych danych o użytkownikach może znacznie wyprzedzić konkurencję. Gdy użytkownicy informują Cię o błędach lub innych problemach z produktem, ta opinia jest bardzo cenna. Możesz dowiedzieć się więcej o tym, jak wchodzą w interakcję z Twoją usługą i wykorzystać to do ulepszenia produktu.

Co to jest Chatwoot?

Chatwoot to platforma obsługi klienta typu open source, która zapewnia spersonalizowany sposób interakcji z użytkownikami. Zapewnia również uproszczoną platformę do odpowiadania na zapytania użytkowników i przekazywania informacji zwrotnych w wielu kanałach w czasie rzeczywistym.

Możesz korzystać z narzędzi do automatyzacji, analiz i raportowania, aby analizować zaangażowanie użytkowników oraz łatwo i skutecznie zarządzać operacjami obsługi klienta.

Korzystając z tego przewodnika, możesz zintegrować Chatwoot ze swoją aplikacją i przetestować jego funkcję czatu na żywo z klientem React i pulpitem obsługi klienta.

Konfiguracja projektu Chatwoot

Chatwoot zapewnia konfigurowalną wtyczkę czatu na żywo, którą można łatwo zintegrować ze swoją aplikacją. Możesz dostosować go w jak największym stopniu do potrzeb obsługi klienta.

Po osadzeniu kodu wtyczki w aplikacji użytkownik może komunikować się z zespołami obsługi klienta, a oni mogą zarządzać tymi rozmowami z pulpitu nawigacyjnego agenta Chatwoot.

Udaj się na stronę Chatwoot , zarejestruj konto i przejdź do pulpitu użytkownika.
Aby zarządzać rozmowami użytkowników, musisz najpierw skonfigurować skrzynkę odbiorczą i dostosować ją do swoich potrzeb. Kliknij przycisk Nowa skrzynka odbiorcza , aby rozpocząć.
Teraz wybierz kanał, w którym chcesz zintegrować Chatwoot. W tym przewodniku wybierz Witryna , ponieważ integrujesz ją z aplikacją React.
Następnie uzupełnij dane swojej witryny. W przypadku programowania lokalnego możesz przetestować tę funkcję z adresem URL lokalnej domeny hosta, jednak po wdrożeniu w środowisku produkcyjnym pamiętaj o zaktualizowaniu domeny za pomocą aktywnego adresu URL.
Na koniec dodaj agenta/ów do zarządzania rozmowami w tej skrzynce odbiorczej. Może to być członek zespołu obsługi klienta.

Pomyślnie skonfigurowałeś czat na żywo Chatwoot ze swoją witryną ustawioną jako kanał komunikacji. Chatwoot wygeneruje kod, który musisz osadzić w swojej aplikacji, aby dodać widżet funkcji czatu na żywo. Ten kod jest bardzo elastyczny, ponieważ można go łatwo zintegrować z klientem internetowym zbudowanym z dowolnym frameworkiem frontendowym JavaScript.

Jeśli chcesz dalej dostosować konfigurację, kliknij przycisk Więcej ustawień .

Konfiguracja projektu React

Utwórz aplikację React i osadź wtyczkę czatu na żywo Chatwoot, aby przetestować tę funkcję. Utwórz aplikację React i utwórz plik ENV w katalogu głównym folderu projektu, aby przechowywać token Twojej witryny.

REACT_APP_WEBSITE_TOKEN = token

Następnie w katalogu src utwórz nowy folder i nazwij go komponentami. W tym folderze utwórz nowy plik: Livechat.js .

Dodaj następujący kod do tego pliku:

import React, {useEffect} from 'react'

function Livechat () { useEffect(() => { window.chatwootSettings = { hideMessageBubble: false, position: "right", locale: "en", type: "standard" };


    (function(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 = true;
      g.async = true;
      s.parentNode.insertBefore(g, s);
      g.onload = function() {
        window.chatwootSDK.run({
          websiteToken: process.env.REACT_APP_WEBSITE_TOKEN,
          baseUrl: BASE_URL
        })
      }
    })(document, "script");
  }, []);
  return null;
};

export default Livechat;

Ten kod integruje funkcję czatu na żywo Chatwoot w Twojej aplikacji React. Hak useEffect uruchamia kod wewnątrz wywołania zwrotnego raz, gdy komponent jest montowany. Najpierw inicjalizuje ustawienia Chatwoota dla tej funkcji. Następnie uruchamia funkcję wtyczki dostarczoną przez Chatwoot, która konfiguruje widżet czatu na żywo na stronie.

Przekazuje websiteToken jako parametr do funkcji chatwootSDK.run, która łączy aplikację z Twoim kontem Chatwoot. Wreszcie funkcja czatu na żywo zwraca wartość null, ponieważ nie jest wymagane renderowanie żadnych elementów HTML.

Przetestuj funkcję czatu na żywo

Zaimportuj ten komponent do pliku app.js i uruchom serwer programistyczny, aby zaktualizować wprowadzone zmiany. Powinieneś zobaczyć widżet czatu na żywo na swoim Reakcie uruchomionym w przeglądarce.
Aby przetestować funkcję czatu na żywo, kliknij widżet, aby otworzyć ścianę czatu konwersacji i wpisz wiadomość.
Teraz przejdź do pulpitu użytkownika Chatwoot i przejdź do skrzynki odbiorczej, powinieneś zobaczyć nową wiadomość. Domyślnie Chatwoot generuje niektóre wiadomości i automatycznie odpowiada natychmiast po wysłaniu przez użytkownika wiadomości, takiej jak te, które widzisz poniżej. Wpisz odpowiedź na wiadomość i kliknij wyślij. Wróć do ściany czatu z widżetami w swojej aplikacji, aby zobaczyć odpowiedź.

Pomyślnie zintegrowałeś funkcję czatu na żywo w swojej aplikacji przy użyciu bardzo niewielu wierszy kodu.

Czy funkcja czatu na żywo jest tego warta?

Funkcja czatu na żywo to świetny sposób na zapewnienie obsługi klienta, zwiększenie satysfakcji klienta i poprawę doświadczenia użytkownika.

Zapewnia kanał komunikacji, który może zwiększyć zaangażowanie, skrócić czas reakcji i spersonalizować obsługę klienta. Ostatecznie powinno to pomóc w usprawnieniu operacji obsługi klienta przy niewielkim wysiłku.