チャットボット Webhookの設置

ウェブフックの設置方法についてご案内いたします。

Webhookとは

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

WebAPI

APIをインターネット経由で利用できるようにしたものです。

HTTP/HTTPS のURLでAPI に命令を送ることが可能です。

Web上のサービスとサービスを繋ぎます。

Webhook でWebAPI を呼び出す

呼び出し

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

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

HTTP POST: データを書き込む

HTTP GET: データを受け取る

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

相手のデータにアクセスする場合、認証（エンドユーザーログイン、やサーバーへのログイン）の設計が必要です。

Webhook でログインWebAPI を呼び出す場合も相手のサービスと要件により個別に設計が必要となります。

レスポンス

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

データ形式：JSON

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

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

ウィジェットの設定

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

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

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

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

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

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

フィールドタイプ名	詳細
テキスト（小）	名前やID等短い文章を入力するのに適した小さなテキストボックスが表示されます。
テキスト（大）	文章を入力するのに適した大きなテキストボックスが表示されます。
テキスト（メール）	メールの入力フォームが表示されます。
デートピッカー	日付の選択が可能になります。
タイムピッカー	時間の選択が可能になります。
Boolean	はい/いいえでの選択が可能になります。
Integer	数字(整数)のみ入力できるテキストボックスが表示されます。
ドロップダウンリスト	ドロップダウンリストの作成ができます。
複数選択	入力した選択しの中からあてはまるものを複数選択できます。

自動メッセージの作成

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

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

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

タイトル	設定
メッセージチャンネル	を選択します。
タイトル	お客様画面には表示されません。わかりやすいものを設定します。
メッセージタイプ	プルダウンからメニューを選択します。
メッセージ	お客様画面に表示されるメッセージを入力します。
メニュー	プルダウンからカスタムボットを選択します。
表示メニュー	メッセージの下に表示されるメニューを作成します。
トリガー	どのタイミングで表示させるかを選択します。
表示タイミング有効する	表示期間を設定したい場合は期間を入力します。

回答に紐づけを行う場合はFAQ AI レスポンスを選択し、紐づけるFAQ回答のコードを入力します。

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

チャットボットメニューの設定

カスタムボット作成

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

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

フローチャート例：

上から二番目の[アカウント情報確認]の場面で登録ユーザーかどうか確認するため、対象のサービスのWebAPIにWebhookでアクセスしてDBからデータをもらいます。

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

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

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

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

テンプレートの選択は現在行えません。

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

Webhookの作成方法

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

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

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

​

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

タイトル	詳細
API リクエストを送る	プルダウンからPOSTに変更、リクエストURLにWebAPIのURL(エンドポイント)を設定
ヘッダー・ボディ	プルダウンから[カスタムJSON]を選択 WebAPI 呼び出しに必要な値を入力

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

タイトル	詳細
処理メッセージを送る	「処理中です。」等のメッセージを表示します。
リクエストが成功した後にメッセージを送る	「メンバー確認できました。」等のメッセージを表示します。
カスタム失敗メッセージを送信する	「メンバー確認に失敗しました。」等のメッセージを表示します。
レスポンスに変数を紐づける	レスポンスとして帰ってきた情報を今後ボットで使用する為、変数と紐づけを行います。 画面下部に表示されているAPIリクエストのレスポンスから、[応答変数として追加]を選択すると、変数として紐図けることが可能です。 変数名：わかりやすいものを設定します。 レスポンスキー：レスポンスで帰ってきた値が自動で入力されます。 データタイプ：テキスト・数・オブジェクト・リストから適当なものが自動で入力されます。

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

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

例：

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

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

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

[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を受け取った場合、下の画像のように設定を行います。

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

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

※「img」「menu_name」等の変数名を設定し、特定の情報のみを表示させる事も可能です。

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

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

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

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

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

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

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

例：成功の場合

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

例：失敗の場合

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

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

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

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

例３：オプションの販売

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

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

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

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

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

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

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

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

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

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

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

タイトル	詳細
Googleスプレッドシート	入力を行いたいスプレッドシートを選択します。
タブ	入力を行いたいタブを選択します。
読む・書く	[書く]を選択します。

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

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

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

権限	作業・閲覧可否
ブランド管理者	施設管理画面から作業・閲覧可
施設管理者	作業・閲覧可
施設運営者	作業・閲覧可