Dialogflow messenger – przyglądam się z bliska

Dialogflow CX

Dzisiaj postanowiłem przyjrzeć się nowej integracji od Dialogflow – Dialogflow Messenger, która umożliwia osadzenie agenta, jako widget chatu na stronie internetowej. Przyznam szczerze, że trochę brakowało mi tej opcji, do tego stopnia, że zrobiłem research rozwiązań, które pozwalają osadzić bota na stronie.

Przegląd dotychczasowych możliwości znajdziecie TUTAJ.

Bardzo ważna informacja jest taka, że ta funkcjonalność jest w fazie Beta, więc zanim zaczniecie jej używać produkcyjnie upewnijcie się, że macie Plan B, na wypadek zmian lub porzucenia wsparcia dla tego projektu.

Wracając do meritum – Dialogflow Messenger pozwala zintegrować naszego agenta ze stroną, wykorzystując do tego krótki snippet JavaScript, który należy wkleić na swoją stronę. Wklejając go w takiej postaci, w jakiej otrzymamy od Dialogflow dostaniemy standardowo wyglądający widget, który będzie wyglądać mniej więcej tak:

Dialogflow Messenger
Standardowy widok

Nie jesteśmy jednak skazani na „standardowe” zachowanie widgetu. Twórcy otworzyli nam furtkę, którą możemy wykorzystać do personalizacji bota.

Jakie mamy możliwości? Przyjrzę się temu w dzisiejszym wpisie.

Konfiguracja widgeta Dialogflow Messenger

Dialogflow daje nam kilka możliwości personalizacji widgetu.

Przypomnę jak wygląda przykładowy kod, który należy wkleić na stronę:

<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
	<df-messenger
	  intent="WELCOME"
	  chat-title="Test"
	  agent-id="ae56e905-b8ca-47d5-bd62-33930c66fgdbb84"
	  language-code="pl"
></df-messenger>

Najważniejszy jest tu element df-messenger. To atrybuty, które dodamy do tego elementu będą pełniły rolę konfiguracyjną. Na początku mamy podane 4 atrybuty:

  • intent – event, który zostanie uruchomiony, gdy chat będzie aktywowany. Zazwyczaj będzie to domyślny – WELCOME, ale mamy możliwość zmiany tego (gdybyśmy chcieli np. inny event, na różnych stronach)
  • chat-title – czyli tekst, który będzie wyświetlany w nagłówku czata. Domyślnie podana jest tu nazwa agenta, ale możemy to zmienić (a nawet zazwyczaj musimy), aby chat był bardziej czytelny
  • agent-id – jest to id naszego agenta – nie powinniśmy tego zmieniać i usuwać
  • language-code – język z jakim będą eventy wysyłane do naszego agenta (możemy to zmienić, ale nie możemy usunąć)

Poza powyższymi opcjami, pierwszą rzeczą jaką pewnie będziecie chcieli zmienić to ikona, jaka wyświetlana jest, gdy widget nie jest aktywny. Domyślnie dostajemy ikonę Dialoglow, ale używając atrybutu chat-icon możecie podać url do ikony jaką chcecie ustawić. Wystarczy, że pod tym atrybutem podacie publiczny adres url do ikony (36×36).

Ja dla przykładu wkleiłem ikonę Mozilli:

	<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
	<df-messenger
	  chat-icon="https://cdn-stack.compsmag.com/alternative/wp-content/uploads/sites/28/2020/04/Firefox-Nightly.png"
	  intent="WELCOME"
	  chat-title="Test"
	  agent-id="ae56e905-b8ca-47sdfd5-bd62-3393dsfs0c"
	  language-code="pl"
	></df-messenger>
Dialogflow Messenger
Zmieniona ikona

Kolejną przydatną opcją jest możliwość aktywowania okna czatu, zaraz po załadowaniu strony. Domyślnie chat jest zwinięty i dopiero po akcji użytkownika jest rozwijany, ale wystarczy, że dodamy atrybut expand i ustawimy go na true, wtedy czat będzie automatycznie otwierany po wejściu na stronę.

	<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
	<df-messenger
	  chat-icon="https://cdn-stack.compsmag.com/alternative/wp-content/uploads/sites/28/2020/04/Firefox-Nightly.png"
	  intent="WELCOME"
	  expand=true
	  chat-title="Test"
	  agent-id="uyggvhvn"
	  language-code="pl"
	></df-messenger>

Ostatnia przydatną rzeczą jaką mamy możliwość skonfigurować jest session-id i user-id. Jak sama nazwa wskazuje, atrybut session-id przetrzymuje id sesji, które domyślnie generowane jest, gdy rozmowa się rozpoczyna. Tak naprawdę podając ten id samemu w odpowiednim momencie, mamy możliwość kontroli tego, kiedy sesja trwa, a kiedy powinna się skończyć. Ciekawą opcją jest też atrybut user-id, który umożliwia śledzenie użytkownika między sesjami. Kiedy możemy go użyć? Załóżmy, że nasz chat wyświetla się zalogowanym użytkownikom naszej strony, wtedy podając taki id, możemy w naszym agencie zidentyfikować go niezależnie od tego kiedy i z jakiego sprzętu napisze do bota.

Konfiguracja wyglądu Dialogflow Messenger

Gdy już skonfigurujemy widget, czas na jego wygląd. Jeśli nie chcemy, aby nagłówek był niebieski, a tło wiadomości od agenta w kolorze szarym, możemy to zmienić ustawiając kilka predefiniowanych zmiennych CSS.

Co możemy zmienić?

  • kolor tła wiadomości od agenta ( df-messenger-bot-message )
  • kolor nagłówka ( df-messenger-button-titlebar-color )
  • kolor czcionki nagłówka ( df-messenger-button-titlebar-font-color )
  • kolor tła czatu ( df-messenger-chat-background-color )
  • kolor czcionki wiadomości ( df-messenger-font-color )
  • kolor tła pola do wpisywania wiadomości ( df-messenger-input-box-color )
  • kolor ikonki wysyłającej wiadomość ( df-messenger-send-icon )
  • tło wiadomości od użytkownika ( df-messenger-user-message )

Jak widać zmienne te pokrywają wygląd całego widgetu, dodając do tego ikonkę, jaką możemy skonfigurować (patrz poprzedni wpis), mamy kompletny zbiór zmiennych, które umożliwiają zmianę wyglądu okna czatu.

W jaki sposób skonfigurować te zmienne?

Należy je zdefiniować w pliku ze stylami (.css) lub bezpośrednio między znacznikami style w kodzie strony w sposób następujący:

df-messenger {
   --df-messenger-bot-message: #878fac;
   --df-messenger-button-titlebar-color: #df9b56;
   --df-messenger-chat-background-color: #fafafa;
   --df-messenger-font-color: white;
   --df-messenger-send-icon: #878fac;
   --df-messenger-user-message: #479b3d;
  }

Przykład zapożyczyłem z dokumentacji Dialogflow, ale pokazuje on dokładnie w jaki sposób możemy używać tych zmiennych.

Warto dodać, że w podanym przykładzie kolory zakodowane są w notacji szesnastkowej, np. #878fac oznacza odcień niebieskiego.

Co jeszcze? Eventy i funkcje w Dialogflow Messenger

Twórcy dali nam możliwość nasłuchiwania na szereg zdarzeń związanych z czatem oraz udostępnili funkcje, które pozwalają manipulować czatem, w odpowiedzi na te zdarzenia. Zdarzenia i funkcje, które wspomniałem dotyczą oczywiście zdarzeń i funkcji JavaScriptowych, które mamy możliwość oprogramować.

Kiedy mogą one nam się przydać?

  • kiedy chcemy manipulować czatem w odpowiedzi na jakieś zdarzenie
  • kiedy chcemy manipulować stroną, na której znajduje się widget w odpowiedzi na jakieś zdarzenie
  • gdy chcemy mierzyć wydajność czata (np. czas reakcji itp.)

Typy wiadomości Dialogflow Messenger

Na koniec trochę o wiadomościach, które możemy wysyłać do czatu. Dobrą informacją jest fakt, że widget pozwala wyświetlać nie tylko sam tekst i obrazki, lecz także inne elementy interaktywne.

Mamy tu do wyboru następujące elementy:

  • Info
  • Description
  • Image
  • Button
  • List
  • Accordion
  • Suggestion chip

Nie będę ich tutaj opisywał, bo wszystko znajdziecie w dokumentacji TU. Więc jęśli chcecie zobaczyć jak poszczególne elementy wyglądają – zapraszam do dokumentacji.

W tym miejscu warto tylko wspomnieć, że jeśli chcemy wykorzystać powyższe elementy musimy w odpowiedzi wysłać odpowiednio sformatowanego JSON, za pomocą Custom Payload, który znajdziecie w zakładce Default w odpowiedziach. Struktura JSON’ów jakie należy wysłać w odpowiedzi podana jest także w dokumentacji.

Dialogflow Messenger
Custom Payload