Przenoszenie agenta na żywo

1. Wstęp

Ostatnia aktualizacja: 23.08.2021

Przenoszenie agenta na żywo za pomocą Business Messages

Funkcja przenoszenia agenta na żywo w Business Messages umożliwia agentowi rozpoczęcie rozmowy jako bot i przełączenie rozmowy w trakcie rozmowy na pracownika obsługi klienta (człowieka). Twój bot może odpowiedzieć na typowe pytania, np. o godziny otwarcia, a pracownik obsługi klienta na żywo może zapewnić spersonalizowaną obsługę z szerszym dostępem do kontekstu użytkownika. Jeśli przejście między tymi dwoma rozwiązaniami jest płynne, użytkownicy szybko i dokładnie otrzymują odpowiedzi na swoje pytania, co przekłada się na wyższy współczynnik zwrotu z inwestycji i zwiększenie zadowolenia klienta.

Dzięki tym ćwiczeniom z programowania dowiesz się, jak w pełni wykorzystać funkcję transferu na żywo agenta.

Co utworzysz

W tym ćwiczeniu z programowania utworzysz webhooka dla agenta, który będzie mógł wysyłać i odbierać zdarzenia transferu na żywo agenta. Użyjesz podstawowego interfejsu udostępnionego w kodzie startowym, aby przetestować swoją gotowość.

Uwaga: w tym ćwiczeniu z programowania zakładamy, że jesteś już zarejestrowanym partnerem i masz zatwierdzenie od naszego zespołu pomocy. Zanim rozpoczniesz to ćwiczenie z programowania, zarejestruj się w Business Messages i poczekaj na zatwierdzenie.

Czego się nauczysz

• Jak przechowywać stan rozmowy i nim zarządzać.
• Jak używać Business Messages do wysyłania zdarzeń przeniesienia na żywo agenta.
• Jak skonfigurować webhooka i podstawowy interfejs do dołączania do rozmów jako agent.
• Sprawdzone metody korzystania z interfejsu Business Messages API.

To ćwiczenie z programowania dotyczy użycia interfejsu Business Message API do implementacji transferu na żywo agenta. Możesz odczytać kod startowy każdego etapu, ale musisz tylko zaimplementować kod związany z Business Messages.

Czego potrzebujesz

• Agent Business Messages, w tym klucz konta usługi. Aby utworzyć agenta, wykonaj czynności opisane w przewodniku po tworzeniu agenta.
• Działająca konfiguracja Cloud Datastore połączona z projektem GCP agenta. Możesz to skonfigurować w krótkim wprowadzeniu do Cloud Datastore. Nie musisz wiedzieć, jak korzystać z Cloud Datastore.
• Komputer z zainstalowanym pakietem SDK Google Cloud i środowiskem Node.js (w wersji 10 lub nowszej).
• Urządzenie z Androidem (w wersji 5 lub nowszej) lub urządzenie z iOS do testowania wrażeń użytkownika.
• Doświadczenie w programowaniu aplikacji internetowych. Musisz napisać niewielką ilość kodu JavaScript i być może trzeba będzie debugować to, co piszesz.

2. Tworzenie bota echo

W tym kroku wdrożysz podstawowego przedstawiciela bota o nazwie „bot echo”. Bot pobiera wiadomości użytkowników, rejestruje je w wątku rozmowy w Cloud Datastore, a następnie „odtwarza” wiadomość użytkownika, odpowiadając z użyciem tej samej treści. Gdy masz już podstawowego bota i infrastrukturę logowania, możesz je uzupełnić, aby w następnych krokach utworzyć pełną implementację transferu agenta na żywo.

Pobierz kod startowy

W terminalu skopiuj kod startowy transferu agenta na żywo do katalogu roboczego projektu za pomocą tego polecenia:

git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer

Kod startowy

Przyjrzyjmy się strukturze kodu startowego, z której będziesz korzystać podczas ćwiczeń z programowania.

Przejdź do katalogu step-1 i wyświetl jego zawartość. Zawiera te elementy:

• bin: ten katalog zawiera skrypt startowy www, który konfiguruje serwer.
• libs: ten katalog zawiera datastore_util.js, który zawiera wygodne metody odczytu i zapisu w Cloud Datastore. Nie musisz wiedzieć, jak działa ten plik. Zwróć uwagę na dostępne metody i ich działanie.
• resources: zawiera klucz konta usługi w postaci pliku o nazwie credentials.json.
• routes: plik index.js zawiera webhooka i wszystkie jego metody pomocnicze. Jest to plik główny, na którym będziesz pracować i do którego będziesz dodawać kolejne elementy.
• views: ten katalog zawiera pliki szablonów EJS dla elementów interfejsu. W późniejszych krokach znajdziesz więcej plików.
• app.js, app.yaml, package.json: te pliki służą do konfigurowania aplikacji i jej zależności.

Przed wdrożeniem pobierz klucz konta usługi GCP i skopiuj plik danych logowania JSON do każdego katalogu zasobów w przykładowym kodzie. Zrób to na każdym etapie ćwiczenia z programowania.

cp credentials.json bm-nodejs-live-agent-transfer/step-<step number>/resources/credentials.json

Wskazówka: jeśli potrzebujesz pomocy przy konfigurowaniu lub pobieraniu klucza usługi, zapoznaj się z przewodnikiem po zarządzaniu kontami usługi w Google Cloud.

Wdrażanie kodu startowego

W terminalu przejdź do katalogu step-1 przykładu. Następnie skonfiguruj w narzędziu gcloud korzystanie z Twojego projektu Google Cloud, ustawiając identyfikator projektu użyty do rejestracji w interfejsach API.

gcloud config set project <PROJECT_ID>

Aby wdrożyć aplikację, uruchom to polecenie:

gcloud app deploy

Zapisz adres URL wdrożonej aplikacji w danych wyjściowych ostatniego polecenia:

Deployed service [default] to [https://PROJECT_ID.appspot.com]

Wdrożony kod startowy zawiera aplikację internetową z webhookiem, która umożliwia odbieranie wiadomości z Business Messages. Aplikacja odczytuje wiadomości z powrotem do użytkownika i rejestruje wątki wiadomości w Cloud Datastore.

Skonfiguruj agenta

Otwórz stronę ustawień konta w konsoli programisty Business Communications i ustaw webhooka na adres URL wdrożonej aplikacji. na przykład https://PROJECT_ID.appspot.com/callback/.

Wskazówka: jeśli przyda Ci się przypomnienie, jak skonfigurować webhooka. Zapoznaj się z sekcją Konfigurowanie webhooka w przewodniku po konfiguracji Business Messages.

Następnie na stronie Informacje o agencie skonfiguruj typ interakcji głównej i dodatkowej jako Bot i Człowiek.

Rozmowa z botem echo

Otwórz agenta w Konsoli programisty. Wyświetli się strona Przegląd, na której możesz przejrzeć szczegóły agenta. Skopiuj testowy adres URL agenta zgodny z urządzeniem mobilnym. Użyj tego adresu URL na urządzeniu mobilnym, aby uruchomić przestrzeń do rozmowy z agentem.

Skontaktuj się z pracownikiem obsługi klienta, wysyłając kilka wiadomości. Interfejs rozmowy kopiuje tylko to, co mówisz, i nie jest to zbyt przydatne dla użytkownika. Gdyby tylko był jakiś sposób, żeby porozmawiać z prawdziwą osobą!

3. Dołączam do rozmowy

Spójrzmy teraz na rozmowę z perspektywy agenta. Jako pracownik obsługi klienta na żywo musisz dowiedzieć się więcej o rozmowie, zanim dołączysz, np. identyfikator rozmowy. Dobrze jest też sprawdzić, czy użytkownik poprosił o rozmowę z pracownikiem obsługi klienta. W tym kroku użyjesz podstawowej strony zarządzania relacjami z klientami (CRM), aby wyświetlić te informacje i dołączyć do rozmowy jako pracownik obsługi klienta.

Kod startowy tego kroku dodaje podstawowy system CRM, który zawiera listę wszystkich wątków rozmów danego agenta. Przyjrzyjmy się temu systemowi zarządzania relacjami z klientami (CRM), aby dowiedzieć się, które rozmowy wymagają uwagi pracownika obsługi klienta.

Przejdź do katalogu step-2 i wdróż aplikację ponownie, tak jak w poprzednim kroku.

Po wdrożeniu aplikacji zobaczysz docelowy adres URL. Otwórz ten adres URL w przeglądarce, aby wyświetlić stronę z wątkiem rozmowy rozpoczętym w poprzednim kroku. Stan rozmowy to obecnie „Zarządzany przez bota”, ponieważ bot echo działa jako przedstawiciel naszego agenta w tej rozmowie.

Przycisk Dołącz do czatu jest widoczny, ale na Twoim urządzeniu nie ma jeszcze żadnych działań. Interfejs ten nie wskazuje też, czy użytkownik chce porozmawiać z pracownikiem obsługi klienta.

Business Messages udostępnia wydarzenie żądane przez agenta na żywo, które wskazuje, kiedy użytkownik chce porozmawiać z pracownikiem obsługi klienta. Musisz go śledzić, by wyświetlić go w interfejsie.

Przyjrzyj się metodzie wywołania zwrotnego w index.js. Komentarz TODO wskazuje, gdzie musisz przechwycić prośbę użytkownika dotyczącą pracownika obsługi klienta i zaktualizować stan wątku.

step-2/routes/index.js

/**
 * The webhook callback method.
 */
router.post('/callback', async function(req, res, next) {
  ...
    } else if (requestBody.userStatus !== undefined) {
      if (requestBody.userStatus.requestedLiveAgent !== undefined) {
  ...
        // TODO: Update the thread state to QUEUED_THREAD_STATE.
      }
    }
  });
...
});

Aby wczytać bieżący wątek rozmowy i zmienić jego stan na QUEUED_THREAD_STATE, musisz użyć metod w usłudze libs/datastore_utils.js.

Jeśli nie wiesz, co zrobić, zapoznaj się z ich rozwiązaniami. Kod startowy zawiera katalog solutions w każdym kroku, w którym trzeba uzupełnić kod. Katalogi zawierają kopię całej aplikacji z pełną implementacją danego kroku.

Po zakończeniu implementacji i ponownym wdrożeniu aplikacji użyj rozszerzonego menu w rozmowie na urządzeniu mobilnym, aby poprosić o pomoc na żywo.

Wskazówka: jeśli w rozszerzonym menu nie widzisz opcji „Wyślij wiadomość do pracownika obsługi klienta”, sprawdź, czy agent ma skonfigurowany w konsoli Business Messages typ interakcji z pracownikami.

Teraz, gdy wrócisz do systemu CRM, w wątku rozmowy powinien pojawić się komunikat „Wysłano prośbę o rozmowę na żywo z pracownikiem obsługi klienta”. Ten użytkownik potrzebuje pomocy człowieka! Aby przycisk działał, musisz wdrożyć punkt końcowy joinConversation.

Znajdź inny komentarz TODO w skróconej metodzie dla: /joinConversation.

step-2/routes/index.js

/**
 * Updates the thread state and sends a representative join signal to the user.
 */
router.post('/joinConversation', async function(req, res, next) {
  let conversationId = req.body.conversationId;

  // TODO: Update the thread state to LIVE_AGENT_THREAD_STATE and post a REPRESENTATIVE_JOINED event.

  res.json({
    'result': 'ok',
  });
});

Musisz ponownie zaktualizować stan wątku, tym razem na LIVE_AGENT_THREAD_STATE. Oprócz tego musisz użyć metody conversations.events.create interfejsu Business Messages API, aby opublikować zdarzenie REPRESENTATIVE_JOINED.

Aby utworzyć ładunek żądania, musisz ustawić pola opisane w tej tabeli:

Nazwa pola	Wskazówka
parent	Ustaw jako „conversations/{conversationId}”.
eventId	Wygeneruj losowy identyfikator wydarzenia.
auth	Użyj podanej metody initCredentials.
resource	To jest treść zdarzenia. Należy ustawić wartość eventType i jej reprezentatyw.

Więcej informacji znajdziesz na stronie referencyjnej dotyczącej metody tworzenia lub stronie z informacjami o zdarzeniach.

Po zakończeniu wdrażania wdróż ponownie aplikację i kliknij przycisk Dołącz do czatu. Pojawi się okno Dołączenie do rozmowy, a stan czatu zmieni się na „Czat na żywo”. Jeśli wyświetlisz rozmowę na urządzeniu mobilnym, zobaczysz na czacie informację, że pracownik obsługi klienta dołączył do rozmowy.

Gratulacje! W następnym kroku pokażemy, jak poprosić pracownika obsługi klienta o rozmowę na żywo z użytkownikiem.

4. Wysyłanie wiadomości jako pracownik obsługi klienta

Po dołączeniu do rozmowy należy wysłać kilka wiadomości w roli pracownika obsługi klienta.

Przejdź do katalogu step-3 i ponownie wdróż aplikację. W systemie CRM kliknij wątek rozmowy z poprzedniego kroku. Powinien wyświetlić się podstawowy interfejs czatu. Tutaj możesz wyświetlać wiadomości użytkownika w czasie rzeczywistym.

Jednak wysyłanie wiadomości, ponieważ agent nadal nie jest zaimplementowany. Musisz to zrobić na tym etapie.

Otwórz plik routes/index.js i sprawdź 3 nowo dodane punkty końcowe:

• /messages: pobiera plik widoku messages.ejs i renderuje go w przeglądarce. Gdy w indeksie klikniesz wątek wątku, przejdziesz na jedną z tych stron.
• /retrieveMessages: pobiera treść wiadomości z wątku i zwraca sformatowaną listę wszystkich wiadomości w wątku. Strona wiadomości okresowo wywołuje ten punkt końcowy, aby wyświetlić najnowsze wiadomości.
• /sendMessage: wysyła do użytkownika wiadomość od przedstawiciela agenta. Strona wiadomości wywołuje tę funkcję, gdy klikniesz Wyślij. Obecnie nie jest wdrożona.

Spójrzmy teraz na istniejącą metodę storeAndSendResponse:

step-3/routes/index.js

/**
 * Updates the thread, adds a new message and sends a response to the user.
 *
 * @param {string} message The message content that was received.
 * @param {string} conversationId The unique id for this user and agent.
 * @param {string} threadState Represents who is managing the conversation for the CRM.
 * @param {string} representativeType The representative sending the message, BOT or HUMAN.
 */
async function storeAndSendResponse(message, conversationId, threadState, representativeType) {
...
}

Webhook używa już tej metody do wysyłania odpowiedzi od bota echo. Metoda najpierw zapisuje dane wiadomości przychodzących dla rozmowy w obiekcie Cloud Datastore. Następnie wysyła odpowiedź. Przyjrzyj się uważnie tworzonemu obiektowi wiadomości, zwłaszcza jego reprezentatywnemu typowi.

Teraz samodzielnie zaimplementuj punkt końcowy /sendMessage. Do większości zadań możesz używać istniejącej metody storeAndSendResponse. Ważne jest, aby pamiętać o wyznaczeniu odpowiedniego przedstawiciela.

Gdy to zrobisz, wdróż ponownie aplikację i wróć do rozmowy w systemie CRM. Wiadomości będą teraz widoczne w historii czatu. Wiadomości agenta możesz też zobaczyć na urządzeniu testowym.

Zanim przejdziesz dalej, upewnij się, że wiesz, jak działają nowe punkty końcowe. W następnym kroku dodasz własny punkt końcowy, aby opuścić rozmowę.

5. Opuszczanie rozmowy

Po udzieleniu odpowiedzi na pytania użytkownika możesz opuścić rozmowę i pozwolić mu ponownie porozmawiać z botem. W Business Messages ta zmiana jest sygnalizowana przez zdarzenie REPRESENTATIVE_LEFT.

Przejdź do katalogu step-4, wdróż ponownie aplikację i wróć do wątku rozmowy. U dołu wątku znajduje się teraz link Zamknij i opuść rozmowę. Ten link nie działa jeszcze, ponieważ punkt końcowy leaveConversation nie jest zaimplementowany.

Znajdź plik index.js. Pojawi się komentarz do wykonania z prośbą o utworzenie nowego punktu końcowego leaveConversation.

step-4/routes/index.js

/* 
 * TODO: Create a '/leaveConversation' endpoint that does the following:
 * - Updates the thread to BOT_THREAD_STATE.
 * - Sends a REPRESENTATIVE_LEFT event.
 * - Sends a message to the thread informing the user that they are speaking to the echo bot again.
 * 
 * Hint: You can use the same methods that '/joinConversation' uses.
 */

Aby go wdrożyć, połącz wszystko, czego udało Ci się dowiedzieć z ćwiczenia z programowania. Ten punkt końcowy powinien wykonywać te działania:

• Zmień wątek na BOT_THREAD_STATE.
• Wyślij wydarzenie REPRESENTATIVE_LEFT.
• Wyślij wiadomość w rozmowie, aby poinformować użytkownika, że rozmawia z botem echo. Użyj metody storeAndSendResponse. Pamiętaj, że przedstawiciel zmienił się z powrotem na BOT.

W ostatnim kroku jest sprecyzowany stan rozmowy dla użytkownika. Użytkownik zobaczy zdarzenie, gdy przedstawiciel opuści czat, ale niekoniecznie będzie wiedział, że rozmawia z botem echo. Wysyłając wiadomość bezpośrednio z bota, możesz zmniejszyć dezorientację użytkowników i poprawić wygodę korzystania z usługi.

Gdy bot zajmie się resztą, Twój agent na żywo może dołączyć do innej rozmowy. Możesz eksperymentować z kodem przykładowym i systemem CRM tak długo, jak chcesz. Przetestuj kilka pomysłów na rozwiązanie problemu z obsługą agenta na żywo w swojej firmie i zobacz, co wymyślisz.

6. Podsumowanie

Gratulujemy ukończenia ćwiczeń z programowania dotyczących przenoszenia agentów na żywo.

Udało Ci się utworzyć agenta, który może obsługiwać przenoszenie agentów na żywo od początku do końca. Znasz też jeden sposób śledzenia stanu rozmowy w Cloud Datastore.

W przypadku tego rozwiązania zostawiasz typowe żądania botowi, a pracownicy obsługi klienta zajmują się bardziej złożonymi zapytaniami. Użytkownicy będą bardziej zadowoleni z nowej, spersonalizowanej i przydatnej funkcji, co zwiększy prawdopodobieństwo powrotu do Twojej firmy i polecenia Twojej firmy znajomym.

Co dalej?

Skorzystaj z tych ćwiczeń z programowania:

• Kup online odbiór w sklepie, część 1
• Kup online z odbiorem w sklepie, część 2

Więcej informacji

• Zapoznaj się z podstawami przenoszenia agentów na żywo z przewodnika z obsługą agenta na żywo.
• Skorzystaj z przewodnika po Dialogflow, aby przekształcić bota echo w bota z odpowiedziami na najczęstsze pytania.

Dokumentacja

• Metoda: conversation.events.create
• Metoda: conversations.messages.create
• Zasób: Wydarzenie
• Reprezentatywny