Przenoszenie agenta na żywo

1. Wprowadzenie

Ostatnia aktualizacja: 23.08.2021

Przekazywanie rozmowy do agenta na żywo za pomocą Business Messages

Funkcja przekazywania rozmowy do pracownika obsługi klienta w Business Messages umożliwia agentowi rozpoczęcie rozmowy jako bot i przełączenie się w trakcie rozmowy na pracownika obsługi klienta (osobę). Bot może odpowiadać na typowe pytania, np. o godziny otwarcia, a pracownik obsługi klienta może zapewnić spersonalizowaną obsługę, mając większy dostęp do kontekstu użytkownika. Gdy przejście między tymi dwoma sposobami obsługi jest płynne, użytkownicy szybko i dokładnie uzyskują odpowiedzi na swoje pytania, co przekłada się na wyższy współczynnik powracających użytkowników i większe zadowolenie klienta.

Z tego ćwiczenia w Codelabs dowiesz się, jak w pełni wykorzystać funkcję przekazywania rozmowy do pracownika obsługi klienta.

Co utworzysz

W tym laboratorium kodowania utworzysz webhooka dla swojego agenta, który będzie mógł wysyłać i odbierać zdarzenia przekazania do agenta na żywo. Aby przetestować utworzone elementy, użyjesz podstawowego interfejsu udostępnionego przez kod startowy.

Uwaga: ten przewodnik zakłada, że jesteś już zarejestrowanym partnerem i masz zgodę naszego zespołu pomocy. Jeśli jeszcze tego nie zrobiono, zarejestruj się w Business Messages i poczekaj na zatwierdzenie, zanim rozpoczniesz ten samouczek.

Czego się nauczysz

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

Ten przewodnik skupia się na używaniu interfejsu Business Messages API do wdrażania przekazywania rozmowy do pracownika obsługi klienta. Możesz zapoznać się z kodem startowym na każdym etapie, ale musisz wdrożyć tylko kod związany z Business Messages.

Czego potrzebujesz

• Agent Business Messages, w tym klucz konta usługi. Aby utworzyć agenta, postępuj zgodnie z instrukcjami w tym przewodniku.
• działająca konfiguracja Cloud Datastore połączona z projektem GCP agenta; Aby to zrobić, skorzystaj z krótkiego wprowadzenia do Cloud Datastore. Nie musisz wiedzieć, jak korzystać z Cloud Datastore.
• Komputer z zainstalowanym pakietem SDK Google Cloud i Node.js (wersja 10 lub nowsza).
• urządzenie z Androidem (w wersji 5 lub nowszej) lub urządzenie z iOS do testowania interfejsu użytkownika;
• Doświadczenie w programowaniu aplikacji internetowych. Napiszesz niewielką ilość kodu JavaScript i może zajść potrzeba debugowania napisanego kodu.

2. Tworzenie bota typu echo

W tym kroku wdrożysz podstawowego bota o nazwie „Echo bot”. Ten bot odbiera wiadomości użytkowników, zapisuje je w wątku rozmowy w Cloud Datastore, a następnie „powtarza” wiadomość użytkownika, odpowiadając tą samą treścią. Gdy będziesz mieć podstawowego bota i infrastrukturę logowania, możesz je rozbudować, aby w dalszych krokach wdrożyć pełną funkcję przekazywania rozmowy do agenta na żywo.

Pobierz kod startowy

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

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

Omówienie kodu startowego

Przyjrzyjmy się strukturze kodu startowego, z którym będziesz pracować w trakcie ćwiczeń z programowania.

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

• bin: ten katalog zawiera skrypt startowy (sieć) WWW, który konfiguruje serwer.
• libs: ten katalog zawiera plik datastore_util.js, który zawiera wygodne metody odczytywania danych z Cloud Datastore i zapisywania ich w tym magazynie. Nie musisz rozumieć, jak działa ten plik. Zwróć uwagę na dostępne metody i ich działanie.
• resources: zawiera klucz konta usługi w pliku o nazwie credentials.json.
• routes: plik index.js zawiera webhooka i wszystkie jego metody pomocnicze. To główny plik, z którego będziesz korzystać i do którego będziesz dodawać informacje.
• views: ten katalog zawiera pliki szablonów EJS dla elementów interfejsu. W kolejnych krokach będzie zawierać więcej plików.
• app.js, app.yaml, package.json: te pliki konfigurują aplikację i jej zależności.

Przed wdrożeniem pobierz klucz konta usługi GCP i skopiuj plik JSON z danymi logowania do każdego katalogu zasobów w przykładowym kodzie. Zrób to w przypadku każdego kroku ćwiczeń 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 kluczyka serwisowego, zapoznaj się z przewodnikiem Google Cloud dotyczącym zarządzania kontami usługi.

Wdrażanie kodu startowego

W terminalu przejdź do katalogu step-1 przykładu. Następnie skonfiguruj narzędzie gcloud tak, aby używało Twojego projektu Google Cloud, ustawiając identyfikator projektu, którego używasz do rejestracji w interfejsach API.

gcloud config set project <PROJECT_ID>

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

gcloud app deploy

Zwróć uwagę na adres URL wdrożonej aplikacji w danych wyjściowych ostatniego polecenia:

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

Wdrożony właśnie kod startowy zawiera aplikację internetową z webhookiem do odbierania wiadomości z Business Messages. Aplikacja odsyła wiadomości do użytkownika i rejestruje wątki wiadomości w Cloud Datastore.

Skonfiguruj agenta

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

Wskazówka: jeśli chcesz sobie przypomnieć, jak skonfigurować webhook. Zapoznaj się z sekcją dotyczącą ustawiania webhooka w przewodniku konfiguracji Business Messages.

Następnie na stronie Informacje o agencie skonfiguruj główne i dodatkowe typy interakcji jako odpowiednio 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 sprawdzić szczegóły dotyczące agenta. Skopiuj adres URL testu agenta pasujący do Twojego mobilnego urządzenia testowego. Użyj tego adresu URL na urządzeniu mobilnym, aby uruchomić platformę konwersacyjną agenta.

Skontaktuj się z agentem, wysyłając kilka wiadomości. Platforma konwersacyjna kopiuje tylko to, co mówisz, co nie jest zbyt wygodne dla użytkownika. Gdyby tylko można było porozmawiać z prawdziwą osobą!

3. Dołączanie do rozmowy

Teraz przyjrzyjmy się rozmowie z perspektywy pracownika obsługi klienta. Jako konsultant na żywo musisz przed dołączeniem do rozmowy znać pewne informacje, np. identyfikator rozmowy. Warto też wiedzieć, czy użytkownik poprosił o rozmowę z agentem. Na tym etapie użyjesz podstawowej strony CRM (Customer Relationship Management), aby wyświetlić te informacje i dołączyć do rozmowy jako agent na żywo.

Kod początkowy na tym etapie dodaje podstawowy system CRM, który zawiera listę wszystkich trwających wątków rozmów agenta. Spójrzmy na ten system CRM, aby sprawdzić, które rozmowy mogą wymagać uwagi pracownika obsługi klienta.

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

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

Pojawi się przycisk Dołącz do czatu, ale nie będzie jeszcze działać. W tym interfejsie nie możesz też sprawdzić, czy użytkownik chce porozmawiać z pracownikiem obsługi klienta.

Business Messages udostępniają zdarzenie prośby o kontakt z pracownikiem obsługi klienta, które wskazuje, kiedy użytkownik chce porozmawiać z pracownikiem obsługi klienta. Musisz śledzić ten stan, aby wyświetlać go w interfejsie.

Zapoznaj się z metodą wywołania zwrotnego w index.js. TODO Komentarz wskazuje, gdzie musisz przechwycić prośbę użytkownika o kontakt z pracownikiem 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 zaktualizować jego stan do QUEUED_THREAD_STATE, musisz użyć metod z libs/datastore_utils.js.

Jeśli nie wiesz, co zrobić, zapoznaj się z rozwiązaniami. Kod startowy zawiera katalog solutions w każdym kroku, w którym musisz uzupełnić kod. Katalogi te 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 pracownika obsługi klienta.

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

Jeśli teraz wrócisz do systemu CRM, w wątku rozmowy powinna się pojawić notatka „Live agent requested” (Poproszono o pomoc agenta na żywo). Ten użytkownik potrzebuje pomocy od człowieka. Aby przycisk działał, musisz zaimplementować punkt końcowy joinConversation.

Znajdź drugi TODO komentarz w zaślepionej 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. Dodatkowo musisz użyć metody conversations.events.create interfejsu Business Messages API, aby opublikować zdarzenie REPRESENTATIVE_JOINED.

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

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

Pomoc znajdziesz na stronie referencyjnej metody create lub na stronie referencyjnej zdarzeń.

Po zakończeniu wdrażania ponownie wdróż aplikację i kliknij przycisk Dołącz do czatu. Pojawi się okno Dołączono do rozmowy, a stan czatu zmieni się na „Czat na żywo”. Jeśli spojrzysz na rozmowę na urządzeniu mobilnym, zobaczysz na czacie informację o dołączeniu agenta.

Gratulacje! W następnym kroku pokażemy, jak sprawić, aby agent na żywo rozmawiał z użytkownikiem.

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

Teraz, gdy dołączysz do rozmowy, możesz wysyłać wiadomości jako pracownik obsługi klienta.

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

Wysyłanie wiadomości jako agent jest jednak nadal niewdrożone. Musisz to zrobić w tym kroku.

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 klikniesz wątek rozmowy w indeksie, przejdziesz na jedną z tych stron.
• /retrieveMessages: pobiera treść wiadomości z wątku i zwraca sformatowaną listę wszystkich wiadomości w rozmowie. Strona wiadomości okresowo wywołuje ten punkt końcowy, aby wyświetlać najnowsze wiadomości.
• /sendMessage: wysyła wiadomość od pracownika obsługi klienta do użytkownika. Strona wiadomości wywołuje tę funkcję, gdy klikniesz Wyślij. Obecnie nie jest zaimplementowana.

Spójrz 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 z bota echo. Metoda najpierw zapisuje dane wiadomości przychodzącej w obiekcie Cloud Datastore dla rozmowy. Następnie wysyła wiadomość z odpowiedzią. Przyjrzyj się dokładnie utworzonemu obiektowi wiadomości, a zwłaszcza typowi reprezentatywnemu.

Teraz samodzielnie zaimplementuj punkt końcowy /sendMessage. Możesz tu użyć dotychczasowej storeAndSendResponse metody, aby wykonać większość pracy. Najważniejsze jest, aby pamiętać o ustawieniu odpowiedniego przedstawiciela.

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

Zanim przejdziesz dalej, upewnij się, że rozumiesz, 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, ponownie wdróż aplikację i wróć do wątku rozmowy. U dołu wątku znajduje się teraz link Zamknij i opuść rozmowę. Ten link jeszcze nie działa, ponieważ punkt końcowy leaveConversation nie został zaimplementowany.

Sprawdź plik index.js. Znajduje się tam komentarz TODO z instrukcją utworzenia 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 to zrobić, musisz wykorzystać wszystko, czego nauczyłeś się do tej pory w tym ćwiczeniu. Ten punkt końcowy powinien wykonywać te czynności:

• Zaktualizuj wątek do wersji BOT_THREAD_STATE.
• Wysyłaj zdarzenie REPRESENTATIVE_LEFT.
• Wyślij wiadomość w rozmowie, aby poinformować użytkownika, że rozmawia z botem echo. Użyj metody storeAndSendResponse. Pamiętaj, że przedstawiciel wrócił do stanu BOT.

Ostatni krok wyjaśnia użytkownikowi stan rozmowy. Użytkownik widzi zdarzenie, gdy pracownik opuści czat, ale niekoniecznie wie, że znowu rozmawia z botem. Wysyłając wiadomość bezpośrednio z bota, zmniejszasz dezorientację użytkowników i poprawiasz ich wrażenia.

Teraz, gdy bot zajmuje się sprawą, pracownik obsługi klienta może dołączyć do innej rozmowy. Możesz dowolnie eksperymentować z przykładowym kodem i systemem CRM. Wypróbuj różne pomysły na przekazywanie rozmów do konsultanta na żywo i sprawdź, co z tego wyniknie.

6. Podsumowuję

Gratulujemy ukończenia samouczka dotyczącego przekazywania rozmowy do agenta na żywo.

Utworzono agenta, który może obsługiwać przekazywanie do pracownika obsługi klienta od początku do końca. Poznałeś też jeden ze sposobów śledzenia stanu rozmowy za pomocą Cloud Datastore.

Dzięki przekazywaniu do pracownika obsługi klienta na żywo możesz pozostawić typowe prośby botowi, a pracownicy obsługi klienta na żywo będą mogli zajmować się bardziej złożonymi zapytaniami. Użytkownicy będą bardziej zadowoleni z nowych, spersonalizowanych i przydatnych funkcji, co zwiększy prawdopodobieństwo, że wrócą i polecą Twoją firmę znajomym.

Co dalej?

Zapoznaj się z tymi ćwiczeniami z programowania:

• Kup online, odbierz w sklepie, część 1
• Kup online, odbierz w sklepie – część 2

Więcej informacji

• Zapoznaj się z podstawowymi informacjami o przekazywaniu rozmowy agentowi na żywo w przewodniku na temat przekazywania rozmowy z bota do agenta na żywo.
• Ulepsz bota typu echo do bota z najczęstszymi pytaniami, korzystając z przewodnika po Dialogflow.

Dokumentacja

• Metoda: conversations.events.create
• Metoda: conversations.messages.create
• Zasób: Event
• Przedstawiciel