Jak zintegrować Dialogflow ze stroną internetową? (akt. 21.04.2020)

Dialogflow po polsku

Ostatnio miałem potrzebę osadzenia bezpośrednio na stronie prostego chatbota stworzonego w Dialogflow. Wymagania były takie, aby widget chatu pojawiał się na dole strony po wejściu użytkownika na nią. Postanowiłem więc zgłębić temat, zrobić mały research i sprawdzić jak można zintegrować Dialogflow ze stroną internetową.

Messenger + Janis.ai

Pierwszy i najbardziej oczywisty sposób (szczególnie dla użytkowników Chatfuel czy ManyChat) to integracja Dialogflow w Messengerze. Mogłoby to wyglądać tak, że najpierw integrujemy Dialogflow za pomocą narzędzia Janis.ai, a następnie udostępniamy widget chata od Messengera na stronie za pomocą pluginu Customer Chat Plugin.

Taką integrację Messenger + Dialogflow + Janis.ai pokazałem w jednym z artykułów (TUTAJ)

Tak zintegrowany chatbot pojawi się, jako znany Wam już widget chatu na dole strony, a obsługa rozmowy będzie miała miejsce po stronie Dialogflow.

Jak zintegrować Dialogflow ze stroną internetową

To rozwiązanie jest proste w realizacji, nie wymaga wielu umiejętności technicznych oraz pozwala w szybki sposób osiągnąć zamierzony cel.

Ma ono jednak również swoje wady – przede wszystkim integrację z Messengerem, co generuje kolejne minusy:

  • nie zawsze chcemy, aby użytkownicy kontaktowali się z nami tylko za pomocą tej platformy
  • nie wszyscy użytkownicy posiadają konto na Messengerze, co powoduje, że część potencjalnych użytkowników od razu jest nieosiągalnych
  • część użytkowników mających konto niechętnie się loguje, aby udostępniać swoje dane innym podmiotom

Ciężko sobie wyobrazić np. tego typu rozwiązanie na stronie hotelu – gość hotelowy lub potencjalny klient może nie chcieć logować się do Messenger’a tylko po to, aby spytać o której hotel serwuje śniadanie.

Kommunicate

Kommunicate to kompleksowa platforma, która pozwala na zaimplementowanie chatbotów, livechatów oraz automatyzację skrzynki pocztowej dla biznesu. Ma dodatkowo jedną ciekawą funkcjonalność, która nie jest tak oczywista wśród innych narzędzi – wbudowaną integrację z Dialogflow.

Opcja ta nie jest niestety bezkosztowa. Aby móc zintegrować chatbota pod swoją stroną internetową należy wykupić przynajmniej plan Growth, który kosztuje

20$ miesięcznie. Dużo czy mało? To subiektywna ocena, choć należy dodać, że w ramach opłaty mamy nieograniczoną liczbę chatbotów do zintegrowania + funkcjonalności, które oferuje platforma, m.in livechat.


A jak można zintegrować Dialogflow za pomocą Kommunicate? Już pokazuję.

1. Najpierw musicie założyć konto na ich stronie . Pierwsze 30 dni jest darmowe, nie musicie podawać żadnych numerów kart itp., więc śmiało ten czas warto wykorzystać na przetestowanie narzędzia.

2. Następnie przechodzicie do zakładki Bot integration i wybieracie kafelka Dialogflow

Jak zintegrować Dialogflow ze stroną internetową
Kafelek, który należy kliknąć aby zintegrować Kommunicate z Dialogflow

3. Teraz musicie przejść do konsoli Dialogflow i otworzyć swojego agenta, którego chcecie zintegrować i wejść w jego opcje (Settings). Następnie klikacie w Service Account.

Jak zintegrować Dialogflow ze stroną internetową
Kliknijcie w Service Account

4. Po przekierowaniu klikacie Actions , wybieracie Create Key i z wyskakującego pop-up’a wybieracie opcję klucza w postaci JSON’a i zapisujecie plik na dysku.

Zapisujecie plik z kluczem na dysku

5. Teraz wracamy do Kommunicate i w ustawieniach integracji ładujemy ściagnięty plik z kluczem i ustawiamy język chatbota, po czym klikamy „Save and proceed”.

Ustawienia integracji

6. W kolejnych krokach ustawiamy nazwę chatbota, avatar oraz decydujemy, czy chatbot ma przełączyć na rozmowę z agentem, jeśli nie zrozumie co użytkownik miał na myśli (wspomniałem wcześniej, że Kommunicate posiadają również moduł livechat)

7. Kiedy mamy już spiętą integrację możemy pobawić się stylem naszego okienka czatu. Możecie to zrobić wchodząc do zakładki Settings -> Chat Widget. Ja nie będę się tutaj tym zajmował, ponieważ chciałem tylko przedstawić mechanizm integracji z Dialogflow. Dodam tylko, że możecie w ustawieniach zmieniać kolory tła, tekstu, ustawiać dźwięk czy warunki dla jakich chat powinien się pojawiać.

8. Jeśli chcecie przetestować widget, platforma podpowiada Wam pod jakim adresem można to zrobić bez instalowania go jeszcze na stronie. Po klikięciu w Test your chat widget now, zostaniecie przekierowani na stronę testową z zainsalowanym widgetem.

Testowanie widgetu

9. Przyszedł czas na instalację widgetu na stronie. Aby to zrobić przechodzimy do zakładki Settings -> Install i tam już znajdziemy dokładne instrukcje jak zainstalować chat na różnych platformach. W szczególności, dla strony internetowej, pojawi nam się wygenerowany kod js, który wystarczy wkleić na stronę i … działa!

Test bota

Kommunicate jest według mnie dużo ciekawszą opcją niż podpięcie chatbota tylko pod Messenger’a. Dodatkowo intuicyjny interfejs + dodatkowe funkcjonalności, poza integracją z chatbotem, jak np. livechat, powoduje, że warto ją się nią zainteresować jeśli chcemy zintegrować chatbota na swojej stronie. (Nie mam z tego żadnych profitów;)).

Może któregoś razu poświęcę dłuższy artykuł na pokazanie tego narzędzia, bo dostępnych opcji ma naprawdę dużo i wychodzą one mocno poza zakres tego wpisu.

Open source

Ostatnim sposobem, jaki znalazłem to integracja widgetu przy pomocy dostępnych projektów, które można znaleźć na GitHubie. Jest to opcja dla tych bardziej technicznych, ponieważ wymaga najczęściej wiedzy z programowania, głównie JavaScript. Natomiast największą zaletą takiego rozwiązania to:

  • jest darmowa
  • pozwala na dowolną zmianę i personalizację, ponieważ mamy wgląd w pliki źródłowe

    * Należy pamiętać przy okazji korzystania z tego typu projektów/paczek o sprawdzaniu licencji i czy dana paczka pozwala na wykorzystanie go w projekcie np. komercyjnym.

Rozwiązania takie zazwyczaj składają się z 2 części:

  • widget (javascript odapalany na stronie)
  • serwer proxy, pośredniczący między widgetem a Dialogflow (odpowiada za uprawnienia, czy wysyłanie/odbieranie zapytań z Dialogflow)

Jak wspomniałem wcześniej jest to rozwiązanie głównie skierowane dla programistów lub osób, które mają wiedzę z zakresu programowania, wdrażania i utrzymania. Obecność serwera proxy w rozwiązaniu powoduje bowiem konieczność administracji i wdrożenia go na wykupiony serwer (czy będzie to maszyna dedykowana, wirtualna czy jakaś usługa w chmurze)

Nie jest to więc rozwiązanie dla wszystkich.

Prawdę mówiąc nie znalazłem dużo takich projektów, a dodatkowo każde z nich nie jest oficjalnym produktem, więc pokazuję je tutaj tylko obrazowo – sam nie korzystałem z nich produkcyjnie.

Ja bliżej przyjrzałem się pierwszemu z nich. Jest to część większego produktu o nazwie Tiledesk, czyli platformy oferującej funkcjonalność livechat. Mimo, że jest to część produktu to mamy jednak możliwość wykorzystać ją niezależnie od platformy.

Jak osadzić więc widget za pomocą tego rozwiązania?

Jak wspomniałem wcześniej to rozwiązanie złożone jest z dwóch części: widget’a osadzanego na stronie w postaci kodu javascript oraz serwera, który odpowiada za komunikację pomiędzy widgetem a Dialogflow (pełni rolę serwera proxy, czyli wszystkie requesty przechodzą przez ten serwer)

Abyśmy mogli lokalnie to rozwiązanie przetestować musimy więc poczynić kilka zmian w kodzie widgetu oraz uruchomić serwer (na potrzeby artykułu lokalnie).

Abyśmy mogli poprawnie skonfigurować serwer potrzebujemy do tego Node.js, do ściągnięcia i instalacji TUTAJ. Pozwala on uruchamiać aplikację napisane w javascript.

  1. Zaczniemy od ściągnięcia repozytorium
    • git clone https://github.com/Tiledesk/dialogflowproxy.git
  2. Następnie instalujemy wszystkie zależności
    • npm install (odpalamy tę komendę będąc w folderze głównym)
  3. Kopiujemy plik z kluczem do agenta Dialogflow, który ściągnęliśmy podczas integracji z Kommunicate ( dla tych co tego nie robili – punkt 3 i 4 sekcji Kommunicate)

4. Teraz przechodzimy do katalogu, gdzie jest testowa strona, a dokładnie do pliku public/index.html i edytujemy pole tiledeskSettings/customAttributes/agent, zmieniając je na Project Id naszego agenta. Skąd go wziąć? Gdy wejdziecie na zakładkę Settings -> General w Dialogflow znajdziecie tam tabelkę Google Project, a w niej Wasz Project ID

5. Odpalamy aplikację

  • npm start (odpalamy tę komendę będąc w folderze głównym)

6. W rezultacie aplikacja zostanie odpalona i po wejściu na http://localhost:3000, zobaczymy widget, który komunikuje się z Dialogflow i wcześniej stworzonym agentem.

W taki spobób, dość pokrętny udało mi się osadzić ładnie wyglądający widget na stronie internetowej.

Jest możliwość oczywiście spersonalizowania widgetu, zmiana kolorów, ekranu powitalnego, włączanie/wyłączanie głosu itp. Inną ciekawą rzeczą jest obsługa przycisków czy obrazków (jeśli dodamy odpowiednie znaczniki do odpowiedzi przychodzącej z Dialogflow, wtedy widget zinterpretuje je jako np. przycisk)

Ma też jednak sporo wad:

  • jest ciężki to konfiguracji przez osoby mniej techniczne
  • wymaga administracji serwera (wdrożenie/utrzymanie)
  • model proxy do mnie nie przemawia (requesty przechodzą przez naszą aplikację, a nie są kierowane bezpośrednio do strony docelowej)

Nie analizowałem dalej konfiguracji i możliwości rozwiązania, ponieważ już na tym etapie stwierdziłem, że nie jest to rozwiązanie, którego chciałbym używać, więc zamieściłem je bardziej jako ciekawostkę.

Polecam jednak zainteresowanym samemu to rozwiązanie wypróbować i wyrobić sobie własne zdanie na jego temat.

Podumowanie

Na koniec chciałem krótko podsumować to czego się dowiedziałem, szukając sposobu na osadzenie widgetu chatu, zintegrowanego z Dialogfow na stronie internetowej.

Sprawdziłem 3 sposoby:

  • Messenger + Chatfuel/ManyChat + Janis.ai
  • Kommunicate
  • Open source (Tiledesk)

Jeśli miałbym wybrać jedno rozwiązanie – postawiłbym na Kommunicate, ze względu na prostotę integracji, dodatkowe funkcjonalności (livechat) oraz stabilność (stoi za tym gotowy produkt).

Plugin Messenger’a mógłby spełniać rolę widgetu dla Dialogflow, ale niestety ograniczeniem jest posiadanie konta na Messengerze, co wielu użytkowników może odstraszyć (a na pewno spowoduje mniejszy ruch w chatbocie)

Rozwiązanie Tiledesk jakiemu przyjrzałem się bliżej to coś dla osób, które mają pojęcie o programowaniu i do takich jest skierowane. Nie skreślam go, ale nie przypadło mi ono do gustu, mimo dużej możliwości personalizacji widgetów. Natomiast tak jak wspomniałem – to, że mi nie do końca odpowiada, nie znaczy, że jest złe – sprawdźcie i dajcie mi znać czy Wam odpowiada.

Znacie jakieś inne sposoby na osadzenie widgetu chatu na stronie internetowej (tak, aby był spięty z Dialogflow) ?

Aktualizacja 21.04.2020

W momencie jak pisałem artykuł pojawił się w Dialogflow nowy rodzaj integracji, tzw. Dialogflow Messenger, czyli widget na stronę internetową, którego zintegrujemy bezpośrednio z poziomu Dialogflow.

Opcja dostępna jest w zakładce Integrations.

Dialogflow Messenger
Dialogflow Messenger

Po włączeniu integracji, otrzymamy wygenerowany snippet javascript gotowy do wklejenia na stronę. Ponadto przed wdrożeniem na stronę dostaniemy możliwość przetestowania go bezpośrednio w konsoli Dialogflow.

Na co zwróciłem uwagę? Udostępnili bardzo dużo opcji personalizacji widgeta, za pomocą klas CSS oraz możliwość renderowania interaktywnych elementów, poprzez wysyłanie odpowiednio zbudowanego payloadu.

O tych opcjach powyżej chętnie napiszę jakiś artykuł, aby bardziej szczegółowo zaznajomić się z tematem i przedstawić Wam możliwości widgetu.

Jeśli jesteście zainteresowani szczegółami, odsyłam do dokumentacji.

Wygląda więc na to, że inżynierowie z Dialogflow nas zaskoczyli i problem integracji ze stroną agenta rozwiązali.