Jak dodać wybieranie daty w Chatfuel?

Czy chatbot, którego tworzycie posiada wśród swoich funkcjonalności wybieranie daty lub terminu? Może chatbot umożliwia rezerwację wybranego terminu na spotkanie? A może Wasz chatbot wyszukuje oferty wakacyjne i jednym z kryteriów jest data wyjazdu? Jeśli przynajmniej na jedno z powyższych pytań odpowiedzieliście twierdząco, to ten artykuł może Was zaciekawić.

W dzisiejszym artykule chcę Wam pokazać jak można dodać do Waszego chatbota stworzonego w Chatfuel element wybierania daty przez użytkownika. Dodatkowo udostępnię Wam gotowy komponent, który możecie wykorzystać w swoich chatbotach oraz opiszę jak możecie go użyć.

Sposobów rozwiązania problemu widziałem już co najmniej kilka:

• podpowiadanie użytkownikowi sugerowanych terminów (za pomocą Quick Reply)
• odczytanie daty wprowadzonej przez użytkownika
• umożliwienie wybrania daty, za pomocą interaktywnego elementu, wyświetlonego po kliknięciu np. przycisku „Wybierz termin”

Pierwsze podejście jest intuicyjne dla użytkownika, ale jest dość ograniczone jeśli chodzi o ilość proponowanych terminów – nie wyświetlimy przecież podpowiedzi ze wszystkimi możliwymi terminami.

Drugie podejście jest podatne na błędy – ufamy bowiem, że użytkownik wpisze datę w takim formacie, który będziemy potrafili odczytać. Jak wiadomo większość błędów w oprogramowaniu spowodowane jest zachowaniem człowieka. Dlatego należy mieć do użytkowników ograniczone zaufanie i eliminować miejsce, w których mogą oni zachować się inaczej niż oczekiwano.

Dlatego ja proponuję Wam podejście nr 3 – wykorzystanie mechanizmu tzw. WebView, czyli otworzenie mikro-strony wewnątrz naszego chatbota i umożliwienie wybrania daty, za pomocą gotowego komponentu.

WebView

Co to jest WebView? Jest to funkcjonalność w Messengerze, która pozwala rozszerzać możliwości chatbota . To jest nic innego, jak lekka strona internetowa, wyświetlająca się w komunikatorze, która pozwala na przesyłanie danych pomiędzy chatbotem, a stroną.

Może trochę zawiłe, ale przedstawię to na przykładzie tytułowego wybierania daty:

• użytkownik chce wybrać datę w bocie (np. dzień dostawy)
• klika w przycisk, który otwiera pomniejszone okno przeglądarki (tzw. WebView)
• w tym oknie pojawia mu się kontrolka, która umożliwia wybranie odpowiedniej daty oraz przycisk potwierdzający
• użytkownik wybiera datę i klika przycisk „Wybierz”
• okno WebView się zamyka, a data wybrana przez użytkownika zostaje wysłana do chatbota

Tego typu funkcjonalność może mieć zastosowanie we wszystkich tych miejscach, gdzie interakcja słowna z chatbotem, może być zbyt skomplikowana dla użytkownika. Najlepiej w to się wpisują różnego rodzaju formularze, czy np. kryteria wyszukiwania.

Więcej o tym możecie poczytać w dokumentacji Facebook’a.

Jak to działa w Chatfuel?

Jak można się domyślić, Chatfuel wspiera wykorzystanie WebView w chatbotach, ale sposób implementacji i ustawienia takiego widoku jest dość pokrętny, dlatego go tutaj wyjaśnię.

Chatfuel nie udostępnia póki co bezpośredniego wysyłania z WebView danych do chatbota, ale rekomenduje inny sposób, aby to osiągnąć. Otóż przed zamknięciem okna powinniśmy wysłać dane jako atrybuty za pomocą funkcjonalności Broadcasting.

A więc teraz pytanie nr 2 -co to jest Broadcasting?

Jest to funkcjonalność, która umożliwia wysyłanie wiadomości do wybranego użytkownika za pomocą specjalnie do tego przeznaczonego API. Najczęściej używa się tego, aby np. wysłać użytkownikowi informacje o aktualizacji zamówienia, czy o zmianach na jego koncie.

Gdy wiecie już, czym jest Broadcasting pokażę Wam schemat, który zastosujemy do obsługi WebView w Chatfuel.

Schemat ten przedstawiony jest też w ich dokumentacji na ten temat.

1. Ustawiamy odpowiednio pola Messenger Extensions URLs i Domain Whitelisting (wyjaśnię to później)
2. Wyświetlamy użytkownikowi kartę lub element z widocznym przyciskiem
3. Użytkownik klika w przycisk i otwiera mu się WebView
4. Użytkownik robi jakieś akcję na WebView i klika przycisk zakończenia
5. WebView za pomocą Broadcastingu kieruje użytkownika do wybranego bloku i ustawia atrybuty w Chatfuel
6. Okno zostaje zamknięte za pomocą Messenger Extensions SDK

Datepicker do wykorzystania

Przejdźmy teraz do sedna – czyli do właściwego WebView.

Jak już wspomniałem WebView to mikro-strona, która w naszym przypadku zawierać będzie komponent wyboru daty (i czasu) oraz przycisk potwierdzający wybór.

Abyście mieli prościej, przygotowałem dla Was taki WebView i chciałbym się nim właśnie podzielić.

Pod adresem https://chatbotuj.pl/tools/datepicker.html znajdziecie gotowy do użycia komponent wyboru daty oraz czasu.

Konfiguracja w Chatfuel

Teraz pokażę Wam, jak wykorzystać stworzony przeze mnie komponent w Chatfuel, aby dodać wybieranie daty w chatbocie. W tym celu stworzę przykładowy scenariusz:

• użytkownik wpisuje w bocie „Test”
• chatbot odpowiada kartą z przyciskiem, który kieruje do WebView
• użytkownik wybiera datę z komponentu
• W odpowiedzi dostaje informację od chatbota, jaką datę wybrał

Taki prosty scenariusz pozwoli na pokazanie Wam, w jaki sposób zaimplementować moduł wybierania daty i czasu.

Zaczynamy od stworzenia bloku Test oraz skierowanie do niego użytkownika w przypadku wpisania frazy „test” (zakładka Set Up AI)

W bloku Test dodajemy plugin Gallery i uzupełniamy pierwszy element galerii:

• jako tytuł wpisuję Web view test
• dodaję przycisk, który kieruje mnie do komponentu z wyborem daty, który Wam udostępniłem

I tu się na chwilę zatrzymam. Podałem Wam adres do komponentu: https://chatbotuj.pl/tools/datepicker.html , ale taki url nie spełni swojej roli w Chatfuel. Aby to zrobił należy podać mu kilka parametrów w linku, które zostaną następnie wykorzystane przez komponent.

Te parametry to:

• token – czyli unikalny klucz dla każdego chatbota, stworzonego w Chatfuel, który umożliwia skorzystanie z Broadcastingu. Znajdziecie go w zakładce Configure, w polu Broadcasting API Token

• block – blok, który zostanie uruchomiony po wybraniu terminu i zamknięciu okna WebView
• attribute – nazwa atrybutu pod jakim zostanie zapisany wybrany termin

Jak widzicie, musimy jeszcze stworzyć blok, który uruchomiony zostanie jako kontynuacja po wyborze terminu. Dodaję więc blok o nazwie SetDate.

Pozostaje nam wybranie nazwy atrybutu, który będzie przetrzymywał wybraną datę. Ja nazwę go po prostu selected-date i aby sprawdzić, że rzeczywiście został uzupełniony dodam do bloku SetDate tekst o treści:

Wybrałeś następującą datę: {{selected-date}}

Jak pewnie wiecie oznaczenie {{selected-date}} wstawi w to miejsce wartość atrybutu selected-date.

Mając już wybrane wszystkie parametry:

• token -> Wasz token
• block -> SetDate
• attribute -> selected-date
• botId -> Id waszego bota (możecie go pobrać z URL’a Chatfuel)
• userId -> Id użytkownika (atrybut messenger user id)

możecie zbudować gotowy url do WebView, umożliwiającego wybieranie daty:

https://chatbotuj.pl/tools/datepicker.html?token=WaszToken&block=SetDate&attribute=selected-date&botId=IdBota&userId=MessengerUserId

Tak zbudowany Url dodamy pod przycisk WebView, który dodaliśmy wcześniej:

Ostatnia rzecz jaka nam została to kilka ustawień w zakładce Configure, po to aby Chatfuel oraz Facebook wiedzieli, że url, do którego kierujemy jest elementem WebView.

Przechodzimy do zakładki Configure i w sekcji Domain Whitelisting dodajemy:

• chatbotuj.pl

A w sekcji Messenger Extensions URLs:

• https://chatbotuj.pl/*

I to właściwie tyle. Możemy przetestować rozwiązanie.

Test

Aby przetestować przechodzimy do chatbota, wpisujemy test (pamiętacie, że dodaliśmy uruchomienie bloku Test, w odpowiedzi na tę frazę) i klikamy przycisk WebView:

Powinien pojawić Wam się powyższy WebView, a po wybraniu odpowiedniego terminu i kliknięciu przycisku Wybierz, chatbot przekieruje nas do bloku SetDate i wypiszę datę, którą ustawiliśmy:

W ten oto sposób możecie rozszerzyć funkcjonalność chatbota o wybieranie terminu czy daty. Dzięki temu możemy uniknąć sporo błędów związanych z poprawnością wprowadzanych danych, a dodatkowo ułatwić użytkownikowi czynność wyboru terminu.

Bonus

Z rozwiązania, które tu opisałem, a które znajduje się częściowo na moim serwerze, możecie korzystać do woli. Jest to wersja, która póki co działa tylko w Chatfuel, ale jeśli będzie zainteresowanie, chętnie stworzę podobny skrypt, który będzie działał też z ManyChat.

Zaznaczam od razu, że Wasz token nie jest nigdzie wykorzystywany – podawany jest po to w parametrze, aby skrypt nie musiał go nigdzie przetrzymywać (dla niedowiarków polecam zerknięcie do kodu).

I teraz dwie sprawy – jako, że jest to jeden z pierwszych wpisów, gdzie prezentuję „autorskie” rozwiązanie i podrzucam jakiś skrypt, ciekaw jestem, czy będzie to miało zainteresowanie i do jakiego stopnia.

Dlatego jeśli ktoś chce dodatkowe materiały do tego artykułu, tzn:

• dostęp do repozytorium, w którego w ławy sposób możecie pobrać kod komponentu i umieścić go na własnym serwerze (+ pozmieniać, ulepszyć czy ostylować)
• dostęp do przykładowego chatbota w Chatfuel (tak, aby mógł go sklonować)

Po prostu napiszcie do mnie maila (kontakt@chatbotuj.pl) – podeślę Wam namiary na to, a będę miał przy okazji potwierdzenie, że temat Was zainteresował.

Tu macie jeszcze raz adres do gotowego do użycia komponentu:

https://chatbotuj.pl/tools/datepicker.html

Jeśli macie jakieś uwagi, problemy – piszcie śmiało – każdemu odpowiem.