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.
- Ustawiamy odpowiednio pola Messenger Extensions URLs i Domain Whitelisting (wyjaśnię to później)
- Wyświetlamy użytkownikowi kartę lub element z widocznym przyciskiem
- Użytkownik klika w przycisk i otwiera mu się WebView
- Użytkownik robi jakieś akcję na WebView i klika przycisk zakończenia
- WebView za pomocą Broadcastingu kieruje użytkownika do wybranego bloku i ustawia atrybuty w Chatfuel
- 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:
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.