チャットボット Webhookの設置

Webhookとは

外部サービスにインターネットを経由して、HTTP/HTTPS でURLを使って機能を呼び出す(WebAPI を利用する）仕組みです。

Webhook でWebAPI を呼び出す

呼び出し

HTTP でWebAPI のURLと必要なパラメーター(データ)を送る。

サーバにデータを送信する際は、リクエストボディにデータを記述

HTTP POST: データを書き込む

HTTP GET: データを受け取る

リクエスト時にサーバへ送信するデータはリクエストURLの後に付け加えられる. http://example.com/foo?name1=value1&name2=value2

レスポンス

相手のサーバーからレスポンス(返信)としてデータが返ってくる。

データ形式：JSON

Webhookを利用したカスタムボットの作成

カスタムボットでWebhookを利用する為には、ウィジェットの作成・自動メッセージの作成を先に行う必要があります。

ウィジェットの設定

ウィジェット設定からカスタムボットで使う入力フォームのテンプレートを作成します。

施設管理画面から [チャット]→[ウィジェット]を選択します。

新しいウィジェットを選択します。

取得したい情報と、フィールドタイプを選択します。

行の追加はフィールドの右側についている[＋]ボタンから可能です。

フィールドタイプは９種類から選択を行ってください。

自動メッセージの作成

自動メッセージでトリガーのタイミング設定を行います。

施設管理画面から[設定]→[自動メッセージ]を選択します。

自動メッセージ新規追加から、下のように登録を行います。

詳しい設定方法は下のリンクからご確認ください。

カスタムボット作成

Webhookを組み込んだカスタムボットを作成します。

実際にお客様に行っていただきたいフローチャートを作成します。

フローチャート例：

チャートフローをもとに、ボットを作成します。

[チャット]→[ボット]を開きます。

[ボットを作成する]を選択します。

名前（お客様には表示されません。）を入力します。

ステップを追加から、フローチャートに沿って質問項目を入力します。

Webhookの作成方法

カスタムボットの名前を保存すると下の画像のような画面に遷移します。

ステップ追加を選択すると下の画像のような画面が表示されます。

[APIリクエストを送る]を選択してください。

​

APIリクエストの作成画面が表示されます。

[処理中にチャットボットユーザーに通知する]を選択すると、続いてメッセージの表示設定・レスポンスの変数紐づけが行えます。

カスタムボットが使用された際、メールアドレスの登録があるお客様には自動でメッセージが送信されます。

メールはBCCでホテルにも送信されます。

例：

入力が全て完了したら、[保存]をクリックし登録を行います。

また、Googleスプレットシートから情報を取得する事も可能です。

[Googleスプレットシート]を選択します。

[Google アカウントへのアクセスを許可してください]というボタンが表示されます。

クリックし、アカウントのログインを行ってください。

ログインを行うと下の画像のような画面が表示されます。

下の表のように入力を行ってください。

スプレッドシート例

最初の一列目の横列をタイトルとし、二行目以下の縦列の内容を情報として読み込みます。

[ユーザー入力の収集]を選択します。

[ユーザー入力の収集]を選択すると下の画像のような画面が表示されます。

下の表のように設定を行ってください。

設定を行うと画面右上のテストボットから表示内容を確認する事が可能です。

例１：Webhookで取得したデータの利用

メッセージに取得したデータを挿入する方法をご案内いたします。

[追加]→[メッセージを送信する]を選択します。

表示したいメッセージの中に,右の枠から変数をドロップで入力し、中にAPIリクエストを送る画面にて「レスポンスに変数を紐づける」で設定を行った各変数を入れ込みます。

例２：APIを利用し、ドリンク等の販売を行う

受け取るAPI例

{ img: "...5j1513706393.jpg", menu_name: "Drink name" menu_subname: "Purple Rum, soda", menu_description: "1000yen", price: 1000, id: 1 }

受け取ったAPIリクエストに変数名を設定します。

変数はメッセージの右側に表示されているものをドラック＆ドロップする事で利用可能です。

[ユーザー情報の入力]を選択します。

[スライダーウィジェット]を選択します。

例のAPIを受け取った場合、下の画像のように設定を行います。

結果にレスポンスキーを設定する事で全てのドリンク内容を一覧として表示する事が可能です。

お客様画面では下の画像のように表示されます。

次に[order]をお客様が選択した場合に表示される文章を作成します。 [メッセージを送信する]を選択します。

変数名を使用し、オーダー内容の確認を行います。

また、お客様が誤って選択を行った場合変更出来るよう今一度選択画面に戻るメッセージの作成も併せて行います。 [ユーザーがステップでカスタムボットを再表示できるようにする]から[ユーザー情報の入力]を行ったステップを選択し、適当なテキストを入力します。

クレジットカードでの支払い情報を登録する場合[リクエスト]を選択します。

[リクエスト]を選択すると下の画像のような画面が表示されます。

[支払い]を選択し、金額を入力したうえで保存を選択してください。

[支払い]の作成が完了すると成功・失敗の場合の処理を行うための分岐が表示されます。

例：成功の場合

ステップを追加からメッセージを選択し、メッセージを作成します。

例：失敗の場合

ステップを追加からメッセージを選択します。

決済が失敗した場合、今一度入力が可能なように、[ユーザーがステップでカスタムボットを再表示できるようにする]をONにし、リクエストの前に作成したメッセージへ戻る様設定します。

ユーザーに確認メールを送信する場合、[ユーザー確認メールを送信する]にチェックを入れてください。

チェックを入れた場合下の画像のようなメールが送信されます。

例３：オプションの販売

tripla Bookのオプションをチャットボットで販売することが可能です。

事前にtripla Bookのオプション機能を使って、オプションを作成してください。

作成されたオプションがプルダウンリストに表示されるので、チャットボットで販売するオプションを選択してください。

選択できるオプションの最大数は8個です。

日付、時間は、上位のステップで、ユーザー入力の収集で設定した場合に限り、変数を選択することが可能です。

オプションを追加した場合には、リクエストにオプションが補油時されるので、オプションで設定した変数を選択してください。

例4：Googleスプレッドシートへの書き込み

予約の取得などを行った場合、Googleスプレッドシートへの書き込みを行う事が可能です。

空のスプレッドシートに入力したい情報の記入を行います。

[Googleスプレッドシート]を選択します。

下の表のように設定を行ってください。

こちらの設定を行うと[書く]の下にGoogleスプレッドシートで入力を行った情報が表示されます。

変数と紐づけを行う事で入力された内容の書き出しを行う事が可能です。

こちらで設定は完了です。