Jak stworzyć chatbota dla restauracji w Chatfuel? cz.1

Jak stworzyć chatbota dla restauracji w Chatfuel

Postanowiłem wrócić do wpisów, w których pokażę Wam jak można tworzyć chatboty w różnych dostępnych narzędziach. Po przerwie zaczniemy od chatbota przeznaczonego dla restauracji, którego stworzymy razem w Chatfuel.

Przypomnę, że już kiedyś zacząłem pisać tego typu artykuły. Tu możecie znaleźć poradnik, jak zbudować prostego chatbota dla salonu urody.

Zaczynamy od stworzenia nowego chatbota w Chatfuel i nazwania go w odpowiedni sposób:

Jak stworzyć chatbota dla restauracji
Dodawanie chatbota

Wiadomość powitalna

Jak to zwykle w życiu bywa – zaczniemy od początku, czyli w przypadku chatbota od wiadomości powitalnej.

Jak wiecie, w Chatfuel istnieje pewien specyficzny typ bloku – Welcome message, który zostaje uruchomiony zawsze, gdy użytkownik rozpoczyna rozmowę z naszym chatbotem (może nie zawsze – istnieje pewien wyjątek, ale o tym napiszę innym razem). Jest to zatem miejsce, od którego warto rozpocząć budowę chatbota.

Warto w tym miejscu wspomnieć, że dobrą praktyką używaną w wiadomości powitalnej jest zwrócenie się do użytkownika po imieniu, pozwala to zmniejszyć dystans oraz spersonalizować wiadomość wysyłaną do potencjalnego klienta. Możemy to zrobić używając jednego z wbudowanych atrybutów ( w przypadku imienia będzie to {{first_name}}. Tak użyty atrybut w wiadomości w jego miejsce podstawi imię użytkownika, który napisał do naszego chatbota.

Ok, więc dodaję przykładową wiadomość powitalną, dodając przy okazji logo restauracji, aby zwiększyć zainteresowanie użytkownika na początku rozmowy.

Wiadomość powitalna
Wiadomość powitalna

Menu główne

Kolejnym krokiem będzie stworzenie menu głównego naszego chatbota, z którego użytkownik będzie miał możliwość nawigować się dalej.

Dodajemy blok o nazwie Main Menu i przekierowujemy do niego użytkownika z wiadomości powitalnej:

Jak stworzyć chatbota dla restauracji
Menu główne
Plugin Redirect to Block pozwala przekierowywać użytkownika do innego bloku w chwili, gdy dojdzie do tego elementu.

Przechodzimy teraz do bloku Main Menu, po to aby zdefiniować ścieżki, które chcemy obsłużyć w naszym bocie. To co wybrałem na potrzeby poradnika to:

  • Menu restauracji
  • Rezerwacja stolika
  • FAQ
  • Kontakt

Dodajemy więc 4 nowe bloki, które będą prowadziły do wybranych elementów menu. Ja nazwałem je następująco:

  • Menu
  • Reservation
  • Faq
  • Contact

Na tym etapie zestaw bloków w Chatfuel powinien wyglądać mniej więcej tak:

Elementy menu
Aktualne bloki

Teraz stworzymy nasze Menu, wykorzystując plugin Gallery. Dodamy do niego elementy, które wcześniej sobie ustaliliśmy, dorzucając dodatkowo do każdego z nich obrazki, które będą się kojarzyły z poszczególnymi elementami.

Przechodzimy więc do bloku Main Menu, dodajemy plugin Gallery i wypełniamy elementy. Powinno to wyglądać mniej więcej tak:

Menu główne
Menu główne

Pozostaje nam tylko przekierować użytkownika do odpowiednich bloków, w odpowiedzi na kliknięcie poszczególnych przycisków.

Widzicie, że na screenie powyżej przyciski mamy póki co zaznaczone na czerwono, co oznacza, że dany element zawiera błędy. Aby je poprawić, musimy wybrać akcję jaka zostanie wykonana po kliknięciu przycisków. W naszym przypadku będzie to przejście do odpowiednich bloków.

Finalnie powinno to wyglądać mniej więcej tak:

Ostateczna wersja menu
Finalna wersja menu

Kontakt

Rozpoczniemy od końca, od zakładki Kontakt. Sposoby kontaktu jakie chcemy tu umieścić zależą oczywiście od restauracji. Na potrzeby poradnika zaimplementujemy kilka z nich, a będą to:

  • telefon
  • e-mail
  • bezpośrednia rozmowa z adminem

Dodatkowo umieścimy tu odnośnik do lokalizacji lokalu oraz damy możliwość powrotu do głównego menu.

W poprzedniej sekcji przekierowaliśmy użytkownika do bloku Contact po kliknięciu przycisku Skontaktuj się. Przechodzimy więc do tego bloku i dodamy element Text, który pozwala na wpisanie tekstu i dodanie przycisków, nawigujących do innych bloków. Z racji tego, że w elemencie Text mogą być tylko 3 przyciski dodam dodatkowo element Quick Reply, aby umieścić tam brakujące opcje.

Pierwszy szkielet powinien wyglądać tak:

Szkielet bloku kontakt
Blok kontakt

Tradycyjnie, widzimy tutaj elementy podświetlone na czerwono, które są błędne (w naszych przypadku jeszcze niewypełnione). Zabieramy się zatem za wypełnianie akcji, które mają się odpalić po kliknięciu w poszczególne przyciski.

Z 5 opcji, które możliwe są do kliknięcia 3 z nich będą przekierowywać użytkownika do nowego bloku:

  • E-mail przekieruje do bloku, który rozpocznie proces tworzenia i wysyłania e-maila
  • Rozmowa z adminem przekieruje do bloku , który uruchomi Live-Chata
  • Gdzie jesteśmy? przekieruje użytkownika do bloku , który wskaże lokalizację lokalu

Dodajemy więc te 3 bloki i zostawiamy je na razie puste – Send Email, Location i Admin.

Teraz klikamy na odpowiednie elementy, których kliknięcie ma powodować przekierowanie do innych bloków i wybieramy odpowiednio bloki, które przed chwilą stworzyliśmy.

  • E-mail -> Send Email
  • Rozmowa z adminem -> Admin
  • Gdzie jesteśmy? -> Location

Został nam Telefon i Wróć do menu.

Kliknięcie we Wróć do menu ma spowodować przejście do bloku Main Menu, dlatego taki właśnie blok podajemy w miejscu definiowania akcji po kliknięciu elementu.

Telefon możemy wypełnić używając specjalnie pod to skrojonego typu przycisku – Phone Call. Po kliknięciu na przycisk, który chcemy obsłużyć, wybieramy typ Phone Call i podajemy numer telefonu restauracji.

Definiowanie numeru telefonu
Telefon

Gotowy blok Contact powinien wyglądać mniej więcej tak (zwróćcie uwagę na nazwy bloków do których przekierowujemy użytkownika):

Gotowy blok Contact

Na tym etapie mamy już przygotowany blok Contact, który jednak jest bardzo mało funkcjonalny. Jedyne co działa to numer telefonu, a pozostałem możliwości to póki co wydmuszki. Zajmiemy się zatem teraz poszczególnymi możliwościami kontaktu z restauracją.

Wysyłka e-maila

Proces wysyłki maila rozpoczniemy w bloku Send Email. Plugin jaki wykorzystamy do pobrania od użytkownika treści wiadomości to Save User Input.

Plugin Save User Input pozwala zadać użytkownikowi pytanie, następnie poczekać na odpowiedź i w rezultacie zapisać ja w wybranym atrybucie. Dzięki czemu zapisaną wartość możemy później wykorzystać, chociażby jak w naszym przypadku do wysłania treści wiadomości.

Dodajemy wspomniany plugin. W polu Message to user wpisujemy:

  • Wpisz treść wiadomości

A jako nazwę atrybutu wpisujemy:

  • {{email_body}}

Dzięki temu, gdy użytkownik wejdzie w ten blok, otrzyma prośbę o wpisanie treści wiadomości. Gdy to zrobi, treść ta zostanie zapisana do atrybutu {{email_body}}, dzięki czemu ilekroć użyjemy go w następnych interakcjach, jego wartość zostanie podmieniona w to miejsce.

Aby to lepiej wyjaśnić dodamy jako kolejny element, prośbę o potwierdzenie wysłania e-maila. W tym celu dodajemy plugin Text i wpisujemy tekst:

  • Czy chcesz wysłać wiadomość o treści: {{email_body}} ?

Do takiej wiadomości, tak jak wspomniałem, podstawiona zostanie treść emaila w miejsce atrybutu {{email_body}}.

Kolejnym krokiem będzie dodanie możliwych odpowiedzi na nasze pytanie:

  • Wyślij (przejdzie do sekcji, w której poprosi użytkownika o maila)
  • Nie, wróć do menu (anuluje proces i wyświetli główne menu)

W tej chwili blok Send Email powinien wyglądać tak:

Blok Send Email
Send email

Jak widać pozostaje nam ustawić, jakie akcje mają się wykonać po kliknięciu na przyciski Wyślij oraz Nie, wróć do menu. Ta druga opcja powinna nas przenieść do głównego menu, więc tu sprawa jest prosta – przekierowujemy do bloku Main Menu.

Po kliknięciu na Wyślij musimy spytać użytkownika o maila zwrotnego, a zrobimy to w innym bloku – nazwiemy go Send Email Final Step.

Zatem tak wygląda ostateczny widok bloku Send Email:

Send Email ostateczna wersja
Send Email ostateczna wersja

Pozostała nam ostatnia część – właściwa wysyłka maila. Przechodzimy do bloku, który przed chwilą stworzyliśmy – Send Email Final Step i zaczynamy zabawę. Najpierw chcemy spytać użytkownika o maila zwrotnego i w tym celu użyjemy wspomnianego już wcześniej pluginu Save User Input, zapisując jego emila do atrybutu: {{email_email}}. Tu się na chwilę zatrzymam i zwrócę uwagę na typ walidacji Email, który ustawiłem. Oznacza to, że wpisana wartość przez użytkownika będzie sprawdzana pod kątem poprawności (tzn. czy tekst jest faktycznie emailem.), a w przypadku złego formatu chatbot poprosi użytkownika o wpisanie poprawnego emaila.

Walidacja email
Walidacja emaila

Kolejnym elementem jaki dodamy będzie plugin Notify Admin via Email, który, jak sama nazwa wskazuje, pozwala wysłać odpowiednio przygotowaną wiadomość na podanego emaila. Plugin jest dość intuicyjny i po wypełnieniu powinien wyglądać tak:

Plugin Notify Admin via Email
Wysyłka emaila

Widać, że do wypełnienia mamy 3 pola:

  • Tytuł
  • Adres, na jaki zostanie wysłany email
  • Treść wiadomości (użyłem w niej wcześniej zapisane atrybuty)

Aby proces zakończyć dodałem jeszcze na koniec informację, że wysyłka zakończyła się sukcesem i dałem możliwość powrotu do menu głównego.

Zakończenie wysyłki
Zakończenie wysyłki

W ten sposób stworzyliśmy ścieżkę wysyłki emaila – poczynając od podania treści wiadomości, emaila zwrotnego, a na właściwej wysyłce kończąc.

Przejdźmy teraz do Live Chatu.

Rozmowa z adminem

Czasem zdarza się, że chatbot nie do końca jest w stanie odpowiedzieć na wymagania użytkownika. W takim wypadku dobrym sposobem jest dodanie możliwości czasowego wstrzymania chatbota i rozmowy z administratorem/pracownikiem/moderatorem. Na szczęście Chatfuel, pozwala nam to w łatwy sposób osiągnąć.

Przechodzimy do bloku Admin i dodajemy plugin Live Chat.

Plugin Live Chat umożliwia zatrzymanie bota i przekazanie rozmowy do człowieka. Użytkownik ma możliwość zakończenia takiej rozmowy w każdej chwili lub zostanie ona automatycznie zakończona po ustalonym czasie.

Dodając plugin musimy pamiętać o zmianie domyślnych ustawień. Moje będą wyglądać tak:

Ustawienia Live Chat
Ustawienia Live Chat

No i na końcu tradycyjnie dodaję możliwość powrotu do menu głównego – już nie będę tego pokazywał, ale wygląda podobnie jak w innych blokach.

W ten prosty sposób dodaliśmy właśnie możliwość rozmowy użytkownika z agentem, co może być pomocne w niektórych sytuacjach.

Lokalizacja

Ostatnim elementem jaki dodamy w sekcji Kontakt będzie lokalizacja lokalu.

Na potrzeby mojego poradnika założyłem, że lokal ma tylko jeden adres.

Przechodzimy do bloku Location i dodajemy w nim plugin Text, w którym zapiszę adres restauracji oraz 2 przyciski:

  • Pokaż na mapie (typ akcji to URL, do którego podamy adres do map Google)
  • Powrót do menu (tradycyjnie)

Ostateczna wersja bloku powinna wyglądać tak (adres do lokalizacji pobrany jest z mapy Google, dzięki temu po kliknięciu użytkownik zostanie przekierowany do nawigacji):

Blok Location
Blok Location

Pytania i odpowiedzi

Przejdźmy teraz do sekcji Pytania i odpowiedzi, czyli popularne FAQ. Może w przypadku restauracji nie jest to tak kluczowe, jak w innych branżach i nie ma zbyt wielu powtarzalnych pytań, ale zawsze warto przygotować sobie taki zestaw pytań i umieścić je w chatbocie – po to aby uniknąć odpowiadania na nie po raz kolejny i kolejny i kolejny…

Właśnie dlatego dodaliśmy sekcję Pytania i odpowiedzi. Na potrzeby poradnika przygotowałem sobie 3 przykładowe pytania i odpowiedzi, które mogłyby być zadawane przez klientów restauracji:

  • Czy mogę zamówić jedzenie na jutro?
  • Oczywiście, możesz zamówić pizzę na określoną datę i godzinę. Wystarczy, że wspomnisz o tym podczas składania zamówienia
  • Jak dużą resztę może wydać kierowca?
  • Kierowcy trzymają przy sobie maksymalnie 30 zł reszty, jednak jeśli potrzebujesz, aby ta kwota była większa, wspomnij o tym podczas składania zamówienia
  • Czy mogę zapłacić kartą?
  • Tak, jedną z możliwych form płatności, jest płatność kartą przy odbiorze.

Mamy więc zestaw pytań, na które udzielimy odpowiedzi. Tak jak wspomniałem, ilość i rodzaj pytań zależna jest od restauracji – może być ich więcej lub można całkowicie pominąć tę sekcję, gdy nie ma dużo często zadawanych pytań.

Aby dodać powyższe pytania, przechodzimy do sekcji Faq, którą wcześniej stworzyliśmy. Poszczególne pytania odzwierciedlimy jako podpowiedzi dla użytkownika (Quick Reply).

Dodajemy więc tekst, a następnie możliwe podpowiedzi:

  • Zamówienia terminowe
  • Wydawanie reszty
  • Płatność kartą
  • Wróć

W tej chwili blok Faq powinien wyglądać tak:

Blok Faq
Blok Faq

Wróć tradycyjnie powinno przekierować nas do bloku Main Menu, a teraz zajmiemy się pozostałymi opcjami. Podpowiedzi mają ograniczoną liczbę znaków, stąd skrótowe określenie wspomnianych przeze mnie wcześnie pytań. Wybór każdego z nich powinien prowadzić do bloku, w którym zawarte będzie pełne pytanie oraz odpowiedź na nie.

W tym celu tworzymy 3 nowe bloki:

  • Question Order
  • Question Change
  • Question Card

A następnie każdą z podpowiedzi, kierujemy do odpowiedniego bloku. Powinno to wyglądać tak:

Finalny blok Faq
Finalny blok Faq

Teraz pokażę Wam jak będą wyglądać bloki z pytaniami i odpowiedziami.

Przechodzimy do bloku odpowiedzialnego za podane pytanie i wypisujemy najpierw pytanie, a następnie odpowiedź na nie. Ja dodatkowo wstawiłem między nimi plugin Typing, który symuluje pisanie na klawiaturze, tak aby wyglądało to na konwersację z człowiekiem.

Na końcu oczywiście i tym razem dodajemy przyciski, które pozwalają wrócić do menu głównego oraz, tu coś dodatkowego, do wyborów pytań (czyli do poprzedniego bloku).

Blok Question Order powinien wyglądać tak:

Blok z pytaniem
Blok z pytaniem

W ten sam sposób uzupełniamy pozostałe pytania i sekcję FAQ mamy gotową. Oczywiście zgodzę się, że takie ręczne dodawania pytań i odpowiedzi może być dość męczące, dlatego przygotowuję dla Was też wersję, która pozwoli zautomatyzować ten proces, ale o tym powiem innym razem.

Przejdźmy zatem do kolejnej sekcji, już bardziej skomplikowanej – Rezerwacja stolika.

Rezerwacja stolika

Kolejną sekcją, którą przedstawię będzie rezerwacja stolika. Sprawa zaczyna być w tym przypadku nieco bardziej skomplikowana z dwóch powodów:

  • musimy umożliwić użytkownikowi wybór terminu rezerwacji
  • wybrany termin musimy gdzieś zapisać

Scenariusz jaki tutaj zaimplementujemy będzie następujący:

  • użytkownik wybiera termin rezerwacji za pomocą specjalnego komponentu (WebView)
  • termin jest zapisywany do specjalnie do tego celu stworzonego Arkusza Google (w realnym scenariuszu może to być jakiś zewnętrzny system)
  • pracownik akceptuje bądź odrzuca wybrany termin (w naszym przypadku za pomocą Arkusza)
  • do użytkownika zostaje wysłana wiadomość z potwierdzeniem rezerwacji lub informacja o jej odrzuceniu

Oczywiście jest to jeden z możliwych scenariuszy. Wymaga on udziału pracownika w procesie (akceptacja/odrzucenie rezerwacji), ale eliminuje problem automatycznego doboru stolików (musielibyśmy wiedzieć, które stoliki są wolne, dla ilu osób, w jakich godzinach itp.). Problem ten jest oczywiście możliwy do rozwiązania, ale wykracza poza zakres tego artykułu.

Ok, więc zaczynamy.

Przechodzimy do bloku Reservation.

Dodajemy plugin Text, w których dajemy użytkownikowi 2 możliwości:

  • Menu (tradycyjnie powrót do menu)
  • Wybierz termin
Rezerwacja terminu, początek
Rezerwacja terminu, początek

Jak widzicie do obsłużenia został przycisk Wybierz termin i tutaj zaczynają się schody.

Jak to zrobimy? Wykorzystam funkcjonalność WebView, czyli rozszerzenie chatbota o dodatkowe komponenty, które wyświetlą się w pomniejszonym okienku po kliknięciu w przycisk.

Taki komponent wyboru terminu stworzyłem już wcześniej i opisałem w tym artykule, dlatego nie będę tutaj tego powtarzał.

Do poprawnej konfiguracji ww. WebView będziemy potrzebować bloku, do którego zostanie skierowany użytkownik, gdy wybierze interesujący go termin.

Tworzymy więc blok o nazwie Booking Date Selected.

Teraz potrzebujemy prawidłowo skonfigurować URL, do którego będziemy kierować po kliknięciu przycisku.

Przypomnę, że powinien być on zbudowany następująco:

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

gdzie:

  • token, to unikalny klucz do pobrania z zakładki Configure w Chatfuel
  • block to nazwa bloku, do którego skierowany będzie użytkownik, gdy wybierze datę (w naszym przypadku Booking Date Selected
  • attribute to nazwa atrybutu, do którego zapisany będzie wybrany termin (np. bookingDate)
  • botId to Id waszego chatbota (do pobrania z url’a Chatfuel)
  • userId to Id użytkownika (atrybut messenger user id)

Gotowy URL będzie wyglądać mniej więcej tak (wy musicie uzupełnić dodatkowo WaszToken):

https://chatbotuj.pl/tools/datepicker.html?token=WaszToken&block=Booking Date Selected&attribute=bookingDate&botId=IdBota&userId={{messenger user id}}

Taki URL wklejamy pod przyciskiem Wybierz termin.

Rezerwacja, wybierz termin
Rezerwacja, wybierz termin

Aby WebView zadziałał prawidłowo musimy skonfigurować jeszcze 2 sekcje w zakładce Configure.

  • w sekcji Domain Whitelisting dodajemy chatbotuj.pl
  • w sekcji Messenger Extensions URLs dodajemy https://chatbotuj.pl/*

Te ustawienie poinformują Facebook’a, że URL, który wcześniej zbudowaliśmy jest WebView.

Ok, mamy już zaimplementowaną część scenariusza – użytkownik może wybrać interesujący go termin.

Pozostaje nam:

  • pobranie od użytkownika emaila, w celu wysłaniu mu informacji zwrotnej, dotyczącej wybranego terminu
  • zapisanie wszystkich potrzebnych informacji do Arkusza Google

Zaczniemy od pierwszego punktu.

Tak jak wspomniałem wcześniej, dzięki temu, że przekażemy odpowiedni parametr do komponentu wyboru daty, użytkownik zostanie przekierowany do wybranego bloku po wybraniu terminu. W naszym przypadku jest to blok Booking Date Selected.

Po wybraniu daty dobre jest wyświetlić użytkownikowi wybrany termin w celu potwierdzenia.

Dodajemy więc plugin Text i dodajemy tekst zawierający nazwę atrybutu, do którego zapisaliśmy wybrany termin. Może to wyglądać mniej więcej tak:

Potwierdzenie wybrania terminu
Potwierdzenie wybrania terminu

Jak widzicie na powyższym obrazku pozostały nam do uzupełnienia przyciski:

  • Tak (przejście do bloku, gdzie użytkownik poda emaila)
  • Inny termin (tu damy możliwość ponownego wyboru terminu)

Zaczniemy od przycisku Inny termin – wklejamy tu dokładnie ten sam URL, który wkleiliśmy wcześniej, prowadzący do WebView, który dla Was przygotowałem.

Jeśli chodzi o przycisk Tak, tworzymy nowy blok o nazwie Booking Date Selected Confirmed i kierujemy do niego.

Ostatecznie blok Booking Date Selected powinien wyglądać tak:

Potwierdzenie wybrania terminu, ostateczna wersja

Przechodzimy teraz do bloku Booking Date Selected Confirmed , gdzie spytamy użytkownika o email’a, na jakiego chce otrzymać potwierdzenie rezerwacji.

Zrobimy to podobnie, jak zrobiliśmy w bloku Send Email Final Step, czyli dodajemy plugin Save User Input i uzupełniamy go następująco:

Potwierdzenie rezerwacji - email
Potwierdzenie rezerwacji – email

Ostatnim krokiem, jaki potrzebny będzie na tym etapie to wysłanie kompletnych informacji do arkusza Google (tak jak wspomniałem wcześniej, zarządzanie pokażę na przykładzie arkusza Google).

Informacje jakie chcemy wysłać do arkusza to:

  • Id użytkownika
  • Email
  • Data rezerwacji

Zaczniemy więc od stworzenia arkusza o nazwie Restaurant Management, a następnie uruchomimy Script Editor, który wykorzystamy do stworzenia endpoint’a, która będzie potrafił zapisać dane do naszego arkusza.

Script Editor

Dodamy teraz gotowy kod, który przyjmuje parametry i zapisuje je jako wiersz z odpowiednio wypełnionymi kolumnami:

var SHEET_NAME = "Booking"; //nazwa arkusza, do którego będziemy zapisywać dane

function doGet(e){
  return handleResponse(e);
}

function doPost(e){
  return handleResponse(e);
}

function handleResponse(e) {
  var lock = LockService.getPublicLock();
  lock.waitLock(30000);
  
  try {
    var doc = SpreadsheetApp.openById("kluczdowaszegoarkusza");
    var sheet = doc.getSheetByName(SHEET_NAME);
    
    var headRow = 1;
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow()+1; 
    var row = []; 
    for (i in headers){
      if (headers[i] == "Timestamp"){ 
        row.push(new Date());
      } else {
        row.push(e.parameter[headers[i]]);
      }
    }
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
    return ContentService
          .createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
          .setMimeType(ContentService.MimeType.JSON);
  } catch(e){
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": e}))
          .setMimeType(ContentService.MimeType.JSON);
  } finally { 
    lock.releaseLock();
  }
}

Cała magia dzieje się w metodzie handleResponse, w której łączymy wsyłane argumenty ze zdefiniowanymi kolumnami w arkuszu o nazwie Booking (pamiętajcie, aby tak nazwać arkusz, do którego będą wysyłane dane)

Na koniec musimy dodać do arkusza Booking odpowiednie kolumny:

  • UserId
  • Email
  • BookingDate
  • Timestamp (data zapisu wiersza)
  • Accepted (tę będzie uzupełniał pracownik restauracji)
Arkusz Restauracja
Arkusz Restauracja

Mając przygotowany arkusz oraz skrypt pozostaje nam opublikować naszą pracę (Deploy as Web App) i skopiować wygenerowany adres URL.

Będzie on wyglądał mniej więcej tak:

https://script.google.com/macros/s/wygenerowanyid/exec

Mając zapisany URL, wracamy do Chatfuel, do bloku Booking Date Selected Confirmed i tym razem dodajemy plugin JSON API, który pozwala na wysyłanie zapytań do zewnętrznych endpointów (coś co my potrzebujemy).

Dodajemy plugin JSON API, wklejamy w miejscu URL, skopiowany przez nas wcześniej adres i teraz czas na uzupełnienie parametrów:

  • nazwy parametrów wysyłanych do arkusza muszą odpowiadać nazwom kolumn, które przed chwilą nazwaliśmy
  • w naszym przypadku parametry będą zbudowane w następujący sposób: ?UserId={{messenger user id}}&Email={{booking-email}}&BookingDate={{bookingDate}} (pamiętacie, że to co znajduje się pomiędzy {{}} to wartości atrybutów, które wcześniej zapisaliśmy (lub które są wbudowane)
Zapisanie rezerwacji
Zapisanie rezerwacji

Na koniec pozostaje nam poinformować użytkownika o tym, że jego rezerwacja jest w trakcie realizacji i otrzymana odpowiedź drogą mailową. (tradycyjnie plugin Text i przycisk kierujący do menu)

Teraz ścieżka rezerwacji stolika jest już w pełni pokryta i możecie ją przetestować. To co udało mi się Wam pokazać to:

  • Wybór daty za pomocą gotowego komponentu WebView
  • Zapisanie daty do atrybutu
  • Pobranie emaila od użytkownika
  • Zapisanie wszystkich potrzebnych danych do zewnętrznego arkusza Google

Podsumowanie cz. 1

Wpis okazał się dłuższy niż myślałem, dlatego podzieliłem go na dwie części. W tej pokazałem Wam jak dodać moduł kontaktu do chatbota, moduł FAQ i co najważniejsze dodaliśmy razem funkcjonalność rezerwacji stolika w restauracji.

To czego nie udało mi się dzisiaj pokazać to:

  • zamawianie potraw na wynos (może płatności)
  • konfiguracja menu
  • konfiguracja AI

Zapraszam więc do części drugiej, która powinna pojawić się niebawem, a przy okazji proszę o komentarze z informacją zwrotną, czy tego typu tutoriale są dla Was przydatne.