Przenoszenie agenta na żywo

1. Wprowadzenie

Ostatnia aktualizacja: 23.08.2021

Przenoszenie agenta na żywo za pomocą Business Messages

Dostępna w Business Messages funkcja przenoszenia na żywo z pracownikiem obsługi klienta umożliwia agentowi rozpoczęcie rozmowy jako bot i przełączenie rozmowy na pracownika obsługi klienta (członka). Twój bot może odpowiadać na typowe pytania, takie jak godziny otwarcia, a Twój pracownik obsługi klienta może zapewnić użytkownikom dostosowane wrażenia z większym dostępem do kontekstu użytkownika. Gdy przejście między tymi 2 funkcjami przebiega płynnie, użytkownicy otrzymują szybkie i precyzyjne odpowiedzi na swoje pytania, co przekłada się na wyższy współczynnik zwrotów i większe zadowolenie klienta.

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak w pełni wykorzystać funkcję transferu agenta na żywo.

Co utworzysz

W ramach tego ćwiczenia w Codelabs utworzysz webhook dla agenta, który może wysyłać i odbierać zdarzenia przenoszenia agenta na żywo. Skorzystasz z podstawowego interfejsu dostarczonego w kodzie startowym.

Uwaga: w tych ćwiczeniach w Codelabs zakładamy, że jesteś już zarejestrowanym partnerem i masz zgodę naszego zespołu pomocy. Zarejestruj się w Business Messages i poczekaj na zatwierdzenie, zanim rozpoczniesz to ćwiczenie z programowania.

Czego się nauczysz

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

Skupia się on na użyciu interfejsu Business Message API do implementacji przenoszenia agentów na żywo. Możesz przeczytać kod startowy na każdym etapie, ale musisz tylko wdrożyć kod związany z Business Messages.

Czego potrzebujesz

• agenta Business Messages, w tym klucz konta usługi. Aby utworzyć agenta, postępuj zgodnie z instrukcjami podanymi w przewodniku po tworzeniu agenta.
• 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 zainstalowanym systemem 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. Napisanie niewielkiego kodu JavaScript może wymagać debugowania tego, co piszesz.

2. Utwórz bota echo

W tym kroku wdrożysz podstawowego przedstawiciela bota o nazwie „Echo bot”. Ten bot pobiera wiadomości użytkowników, zapisuje je w wątku rozmowy w Cloud Datastore, a następnie rejestruje ich echa. wiadomość użytkownika, odpowiadając na tę samą treść. Gdy już będziesz mieć bota i infrastrukturę logowania, możesz dodać do niego w następnych krokach pełną implementację transferu agenta.

Pobierz kod startowy

W terminalu skopiuj kod początkowy Live Agent Transfer 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, której będziesz używać w trakcie ć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: w tym katalogu znajduje się katalog datastore_util.js, który zawiera wygodne metody odczytu danych z Cloud Datastore i ich zapisu. Nie musisz rozumieć, jak działa ten plik. Wystarczy, że będziesz pamiętać o dostępnych metodach i ich działaniu.
• resources: zawiera klucz konta usługi w postaci pliku o nazwie credentials.json.
• routes: plik index.js zawiera webhooka i wszystkie jego metody pomocnicze. To jest główny plik, z którym będziesz pracować i do którego będziesz dodawać elementy.
• 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 konfiguruje aplikację 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 ć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 klucza usługi, zobacz przewodnik Google Cloud dotyczący zarządzania kontami usługi.

Wdrażanie kodu startowego

W terminalu przejdź do katalogu step-1 z przykładem. Następnie skonfiguruj narzędzie gcloud tak, aby używało 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 przez Ciebie kod startowy zawiera aplikację internetową z webhookiem do odbierania wiadomości z Business Messages. Aplikacja powtarza wiadomości do użytkownika i loguje ich wątki 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 chcesz przypomnieć sobie, jak skonfigurować webhooka. Zapoznaj się z sekcją Konfigurowanie webhooka w przewodniku konfiguracji Business Messages.

Następnie na stronie Informacje o agencie skonfiguruj główne i dodatkowe typy interakcji na bota i człowieka.

Rozmowa z botem echo

Otwórz agenta w Konsoli programisty. Pojawi się strona Przegląd, na której możesz sprawdzić szczegóły agenta. Skopiuj testowy adres URL agenta, który pasuje do 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. W interfejsie konwersacyjnym są kopiowane tylko Twoje wypowiedzi – nie jest to zbyt przydatne dla użytkowników. Gdyby tylko był jakiś sposób na rozmowę z prawdziwą osobą!

3. Dołączam do rozmowy

Teraz spójrzmy na rozmowę z perspektywy pracownika obsługi klienta na żywo. Jako pracownik obsługi klienta musisz dowiedzieć się kilku rzeczy o rozmowie, zanim do niej dołączysz, na przykład jej identyfikatora. Warto też wiedzieć, czy użytkownik poprosił o rozmowę z pracownikiem obsługi klienta. W tym kroku wyświetlisz te informacje i dołączysz do rozmowy jako pracownik obsługi klienta, korzystając z podstawowej strony zarządzania relacjami z klientami (CRM).

Kod startowy tego kroku dodaje podstawowy system CRM, który zawiera listę wszystkich trwających wątków rozmów dotyczących agenta. Spójrzmy na system CRM, aby sprawdzić, jakie rozmowy mogą wymagać 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 zobaczyć listę z wątkiem rozmowy rozpoczętym w poprzednim kroku. Stan rozmowy to obecnie „Zarządzany przez bota” bo bot echo pełni rolę przedstawiciela naszego agenta w tej rozmowie.

Pojawia się przycisk Dołącz do czatu, który nie powoduje jeszcze żadnych działań. Za pomocą tego interfejsu nie można też określić, czy użytkownik chce porozmawiać z pracownikiem obsługi klienta.

Business Messages udostępnia zdarzenie na żywo wymagane przez agenta, które wskazuje, kiedy użytkownik chce porozmawiać z pracownikiem obsługi klienta. Musisz śledzić ten stan, aby wyświetlać go w interfejsie.

Spójrz na metodę wywołania zwrotnego w index.js. Komentarz TODO wskazuje miejsce, w którym musisz przechwycić żądanie użytkownika dotyczące aktywnego agenta 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ć 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 rozwiązaniami. Kod startowy zawiera katalog solutions pod każdym krokiem, który wymaga podania kodu. Katalogi te zawierają kopię całej aplikacji z pełną implementacją danego kroku.

Po zakończeniu wdrażania i ponownym wdrożeniu aplikacji użyj rozszerzonego menu w rozmowie na urządzeniu mobilnym, aby poprosić o pomoc na żywo z pracownikiem obsługi klienta.

Wskazówka: jeśli nie widzisz opcji „Napisz do pracownika obsługi klienta” jako opcję w rozszerzonym menu, sprawdź, czy w konsoli Business Messages Twój agent ma skonfigurowany typ interakcji z członkiem.

Teraz, gdy wrócisz do systemu CRM, w wątku rozmowy powinna pojawić się informacja „Poproszono o pracę z pracownikiem obsługi klienta”. Ten użytkownik potrzebuje pomocy człowieka! Aby przycisk działał, musisz wdrożyć punkt końcowy joinConversation.

Znajdź drugi komentarz TODO w skróconej wersji metody /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. Aby opublikować zdarzenie REPRESENTATIVE_JOINED, musisz też użyć metody conversations.events.create interfejsu Business Messages API.

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

Nazwa pola	Wskazówka
parent	Ustaw dla tego parametru: „confersations/{confersationId}”.
eventId	Wygeneruj losowy identyfikator zdarzenia.
auth	Użyj podanej metody initCredentials.
resource	To jest treść zdarzenia. Należy ustawić typ zdarzenia i reprezentatywny.

Jeśli potrzebujesz pomocy, zajrzyj na stronę z informacjami o metodzie tworzenia lub na stronę z informacjami o zdarzeniach.

Po zakończeniu wdrażania wdróż aplikację ponownie i kliknij przycisk Dołącz do czatu. Pojawi się okno Dołączona rozmowa, a stan czatu zmieni się na „Czat na żywo”. Gdy otworzysz rozmowę na urządzeniu mobilnym, zobaczysz na czacie informację o dołączeniu do rozmowy przez pracownika obsługi klienta.

Gratulacje! W następnym kroku dowiemy się, jak nawiązać kontakt z pracownikiem obsługi klienta na żywo.

4. Czatuj jako pracownik obsługi klienta

Po dołączeniu do rozmowy możesz wysłać kilka wiadomości w roli agenta.

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

Jednak wysłanie wiadomości przez agenta nie zostało zaimplementowane. Musisz to zrobić na tym etapie.

Otwórz plik routes/index.js i spójrz na 3 nowo dodane punkty końcowe:

• /messages: pobiera plik widoku messages.ejs i renderuje go w przeglądarce. Kliknięcie wątku rozmowy w indeksie spowoduje przejście na jedną z tych stron.
• /retrieveMessages: pobiera treść wątku i zwraca sformatowaną listę wszystkich wiadomości w wątku. Strona z wiadomościami okresowo wywołuje ten punkt końcowy, aby wyświetlić najnowsze komunikaty.
• /sendMessage: wysyła do użytkownika wiadomość od przedstawiciela agenta. Ta opcja jest wywoływana na stronie wiadomości, gdy klikniesz Wyślij. Obecnie nie jest zaimplementowany.

Teraz spójrz 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 już używa tej metody do wysyłania odpowiedzi bota echo. Ta metoda najpierw zapisuje dane wiadomości przychodzących w obiekcie Cloud Datastore dla danego wątku. Następnie wysyła wiadomość z odpowiedzią. Przyjrzyj się uważnie obiektowi wiadomości, który tworzy, szczególnie w przypadku typu reprezentatywnego.

Teraz zaimplementuj punkt końcowy /sendMessage samodzielnie. Większość czynności możesz wykonać, korzystając z istniejącej metody storeAndSendResponse. Ważne jest, aby pamiętać o wybraniu odpowiedniego przedstawiciela.

Gdy wszystko będzie gotowe, wdróż ponownie aplikację i wróć do rozmowy w systemie CRM. Twoje wiadomości będą teraz wyświetlane w historii czatu. Na urządzeniu mobilnym możesz też zobaczyć wiadomości agenta.

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

Gdy odpowiesz mu na pytania, 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 jeszcze nie działa, ponieważ punkt końcowy leaveConversation nie jest zaimplementowany.

Znajdź plik index.js. Dostępny jest komentarz do zadania TODO 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 wdrożyć to rozwiązanie, musisz wykorzystać wszystkie informacje omówione do tej pory w ramach ćwiczeń z programowania. Ten punkt końcowy powinien:

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

W ostatnim kroku wyjaśniamy stan rozmowy u użytkownika. Użytkownik widzi zdarzenie, gdy przedstawiciel opuści czat, ale nie musi wiedzieć, że ponownie rozmawia z botem echo. Wysyłanie wiadomości bezpośrednio z bota zmniejsza dezorientację użytkowników i poprawia komfort korzystania z usługi.

Skoro bot zajmuje się już sprawami, Twój pracownik obsługi klienta może dołączyć do kolejnej rozmowy. Możesz dowolnie eksperymentować z przykładowym kodem i systemem CRM. Wypróbuj różne pomysły na to, jak nawiązać współpracę z pracownikiem obsługi klienta na żywo, i zobacz, co uda Ci się wymyślić.

6. Podsumowanie

Gratulujemy ukończenia ćwiczenia z programowania dotyczącego przenoszenia agenta na żywo.

Udało Ci się utworzyć agenta, który może w całości zająć się przenoszeniem agenta na żywo. Przedstawiliśmy też jeden sposób śledzenia stanu rozmowy w Cloud Datastore.

Dzięki przenoszeniu pracowników obsługi klienta na żywo nie będziesz otrzymywać typowych próśb u bota, a bardziej złożone zapytania będą zajmować pracownicy obsługi klienta. Użytkownicy będą bardziej zadowoleni z nowej, spersonalizowanej i użytecznej funkcji, co zwiększy prawdopodobieństwo powrotu i polecania Twojej firmy znajomym.

Co dalej?

Zapoznaj się z tymi ćwiczeniami z programowania:

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

Więcej informacji

• Zapoznaj się z podstawowymi informacjami o przenoszeniu pracownika obsługi klienta na żywo, korzystając z przewodnika Handoff from bot to Live agent.
• Uaktualnij bota echo do bota z najczęstszymi pytaniami, korzystając z przewodnika Dialogflow.

Dokumentacja

• Metoda: questions.events.create
• Metoda: questions.messages.create
• Zasób: Zdarzenie
• Reprezentatywny