チャットボット 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を利用する為には、ウィジェットの作成・自動メッセージの作成を先に行う必要があります。
ウィジェットの設定
ウィジェット設定からカスタムボットで使う入力フォームのテンプレートを作成します。
施設管理画面から [チャット]→[ウィジェット]を選択します。
新しいウィジェットを選択します。
取得したい情報と、フィールドタイプを選択します。
行の追加はフィールドの右側についている[＋]ボタンから可能です。
フィールドタイプは９種類から選択を行ってください。
自動メッセージの作成
自動メッセージでトリガーのタイミング設定を行います。
施設管理画面から[設定]→[自動メッセージ]を選択します。
自動メッセージ新規追加から、下のように登録を行います。
回答に紐づけを行う場合はFAQ AI レスポンスを選択し、紐づけるFAQ回答のコードを入力します。
カスタムボット作成
Webhookを組み込んだカスタムボットを作成します。
実際にお客様に行っていただきたいフローチャートを作成します。
フローチャート例：
上から二番目の[アカウント情報確認]の場面で登録ユーザーかどうか確認するため、対象のサービスのWebAPIにWebhookでアクセスしてDBからデータをもらいます。
チャートフローをもとに、ボットを作成します。
[チャット]→[ボット]を開きます。
[ボットを作成する]を選択します。
名前（お客様には表示されません。）を入力します。
テンプレートの選択は現在行えません。
ステップを追加から、フローチャートに沿って質問項目を入力します。
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を受け取った場合、下の画像のように設定を行います。
結果にレスポンスキーを設定する事で全てのドリンク内容を一覧として表示する事が可能です。
お客様画面では下の画像のように表示されます。
※「img」「menu_name」等の変数名を設定し、特定の情報のみを表示させる事も可能です。
次に[order]をお客様が選択した場合に表示される文章を作成します。 [メッセージを送信する]を選択します。
変数名を使用し、オーダー内容の確認を行います。
また、お客様が誤って選択を行った場合変更出来るよう今一度選択画面に戻るメッセージの作成も併せて行います。 [ユーザーがステップでカスタムボットを再表示できるようにする]から[ユーザー情報の入力]を行ったステップを選択し、適当なテキストを入力します。
クレジットカードでの支払い情報を登録する場合[リクエスト]を選択します。
[リクエスト]を選択すると下の画像のような画面が表示されます。
[支払い]を選択し、金額を入力したうえで保存を選択してください。
[支払い]の作成が完了すると成功・失敗の場合の処理を行うための分岐が表示されます。
例：成功の場合
ステップを追加からメッセージを選択し、メッセージを作成します。
例：失敗の場合
ステップを追加からメッセージを選択します。
決済が失敗した場合、今一度入力が可能なように、[ユーザーがステップでカスタムボットを再表示できるようにする]をONにし、リクエストの前に作成したメッセージへ戻る様設定します。
ユーザーに確認メールを送信する場合、[ユーザー確認メールを送信する]にチェックを入れてください。
チェックを入れた場合下の画像のようなメールが送信されます。
例３：オプションの販売
tripla Bookのオプションをチャットボットで販売することが可能です。
事前にtripla Bookのオプション機能を使って、オプションを作成してください。
作成されたオプションがプルダウンリストに表示されるので、チャットボットで販売するオプションを選択してください。
選択できるオプションの最大数は8個です。
日付、時間は、上位のステップで、ユーザー入力の収集で設定した場合に限り、変数を選択することが可能です。
オプションを追加した場合には、リクエストにオプションが補油時されるので、オプションで設定した変数を選択してください。
例4：Googleスプレッドシートへの書き込み
予約の取得などを行った場合、Googleスプレッドシートへの書き込みを行う事が可能です。
空のスプレッドシートに入力したい情報の記入を行います。
[Googleスプレッドシート]を選択します。
下の表のように設定を行ってください。
こちらの設定を行うと[書く]の下にGoogleスプレッドシートで入力を行った情報が表示されます。
変数と紐づけを行う事で入力された内容の書き出しを行う事が可能です。
こちらで設定は完了です。
Related Articles
チャットボットメニュー
チャットボットのメニューのカスタマイズをすることで、より見やすく情報を整理して表示することが可能です。 ⏱所要時間：約５分 設定する場所 施設管理画面ーチャットボットメニュー チャットボットメニュー設定画面が開きます。 外観 デザイン選択（コンパクト／フルページ） コンパクト：メニューがボタン上になり小さく表示されます。 チャットのテキスト入力欄も表示されます。 フルページ：メニューがリストで表示され、チャットのテキスト入力欄が非表示になり、メニューのみになります。 表示メニューのON/OFF ...チャットボットウィジェットの設定
チャットボットの外観や名前、アイコン画像などを設定します。 ⏱所要時間：約10分 設定する場所 施設管理画面ー設定ーウィジェット設定ーチャットボットのウィジェットを開きます。 チャットボット設定画面で各種設定を行い、右側のプレビューを確認しながら設定できます。 チャットボット設定 チャットボットの表示・非表示を選択します。 ※表示させるには、Javascriptの設置が必要です。 チャット ウィジェットをカスタマイズする 各メニューの右側の矢印をクリックすると項目が表示されます。 ...電話からチャットボットへの誘導
施設様ホームページ上に掲載している電話番号をクリックした際に、チャットボットが開くように設定できます。 事前準備 この機能を使用する際は、ホームページ上に以下のタグを埋め込む必要があります。 ホームページ管理者またはご利用のホームページ制作会社にご依頼ください。 例：<a href="#" data-triplabot-open-message="1">000-0000-000</a> ホームページに埋め込むタグの確認方法 ...チャットボットへの画像挿入
チャット内の自動メッセージに画像を挿入する方法をご案内いたします。 アクセスマップの表示など、写真を用いてお客様へご案内が可能です。 掲載可能な画像 タイトル 詳細 ファイル形式 JPG, PNG, GIF ファイルサイズ 800x800px 20MB以内 画像の設定方法 [チャット]→[自動メッセージ]の順にクリックします。 画面右上の[自動メッセージ新規追加]をクリックします。 下の表に沿って入力を行ってください。 項目 説明 メッセージチャンネル 一番左のウェブマークを選択 ...チャットボットよくある質問登録
チャットボット内に予めよくある質問を表示する方法・条件により質問発火する質問メッセージの設定方法をご案内いたします。 よくある質問の表示設定方法 下の画像のような、よくある質問を表示する方法をご案内いたします。 施設管理画面から[チャット]→[自動メッセージ]の順にクリックします。 ※自動的にCM3.0のページに遷移します。 画面右上の[自動メッセージ新規追加]をクリックします。 作成画面が表示されます。 下の表に沿って入力を行ってください。 質問メッセージの設定方法 「はい」「いいえ」で回答で ...