Language 日本語
  • tripla 管理画面ヘルプページ
  • 新機能追加のご案内
  • お知らせ
    • 『tripla Pay』 決済手数料変更のお知らせ
    • 『tripla Pay 』 新決済条件のご案内
    • 過去のお知らせ
  • 弊社へのお問い合わせについて
    • 弊社へのお問い合わせについて
    • 今後のサポート窓口に関するご案内
      • web_form
    • Q&A
  • カテゴリーから探す
    • プラン
    • 予約
    • データ出力
    • 設定
    • お客様情報
    • チャットボット
    • 請求書・口座振替書・支払書
    • Google Analytics
  • 動画マニュアル
    • 動画で見るマニュアル チャットボット
    • 動画で見るマニュアル ブッキングエンジン
    • オンラインセミナー動画 ブッキングエンジン
    • オンラインセミナー動画 チャットボット
  • 施設
    • 施設・ブランドへ戻る
  • ダッシュボード
    • tripla Book ダッシュボード(ブランド管理画面)
    • tripla Connect ダッシュボード(ブランド管理画面)
    • tripla Book ダッシュボード(施設管理画面)
    • tripla Analytics ダッシュボード(ブランド管理画面)
    • tripla Analytics ダッシュボード(施設管理画面)
    • tripla Analytics Dashboard(Brand-Level)_English ver.
    • tripla Analytics Dashboard(Facility-Level)_English ver.
    • tripla Boost ダッシュボード
    • tripla Bot ダッシュボード(ブランド管理画面)
    • tripla Bot ダッシュボード(施設管理画面)
  • 予約一覧
    • 予約一覧 メニュー
    • 予約一覧の操作方法
    • 予約確認メールの再送信
    • 予約のキャンセル
    • 予約変更処理
    • 予約一覧CSVダウンロード
    • 予約の注意メッセージの削除
  • リクエスト
    • リクエスト
  • 在庫・価格管理
    • 在庫・価格管理
    • 在庫・価格管理 販売状況・金額の確認
  • チケット
    • サポートチケット
  • チャットボット
    • チャットボット メニュー
    • ボット
    • チャットボット Webhookの設置
    • チャット履歴の確認
    • FAQの回答入力
    • インサイトメール設定
    • 自動メッセージ
    • ブランド単位での自動メッセージ設定方法
    • チャットボット アイコンに関する設定
    • チャットボット「tripla Book」オプションのURLパラメータ
    • 自動メッセージ チャット設定方法
    • チャットボットよくある質問登録
    • チャットボットへの画像挿入
    • チャットボットメニューの設定
    • チャットボット 利用規約
    • 電話からチャットボットへの誘導
    • オペレーターに接続する
    • ウィジェット フォーム作成方法
    • BRRウィジェット
    • チャットボットへのメール回答
    • LINE連携
    • Facebook Messenger連携
    • FAQウィジェット
  • 会員
    • 会員プログラム
    • 会員 アカウントロックの解除
    • 会員 情報の変更・削除
    • 会員 予約・ポイント履歴
    • SNSアカウントでの会員登録・ログイン
    • カスタムアカウントの削除
    • ポイント
    • 組織(法人)ログイン機能の設定
    • 組織CSVダウンロード
    • 登録・ログイン機能設定
  • 予約エンジン設定
    • 施設設定 部屋タイプ
    • 施設設定 プラン
    • プラン管理
    • 検索フィルタ設定
    • 組織(法人) 機能設定
    • 組織(法人) 追加項目
    • プロモーション
    • 利用規約・条件
    • 追加質問・お知らせ設定
      • 追加質問設定
      • お知らせ設定
    • グループ施設への案内機能
    • エリア設定
    • 予約のセキュリティ設定
    • 予約ウィジェットのサブドメイン化
      • サブドメインの設定 ( SSLサーバ証明書ファイルを持っている場合 )
      • サブドメインの設定 ( SSLサーバ証明書ファイルを持っていない場合 )
    • 部屋タイプの追加
    • 新規プランの追加
    • 部屋・プランが反映されない場合(TLリンカーン)
    • プランの詳細変更
    • プラン内容をコピーして新規作成
    • 日帰りプラン
    • プランオプション
    • デフォルト検索条件の設定
    • 通知メール設定
    • カスタムメールテンプレート
    • OTA価格取得・ベストレート設定
    • 子供設定
    • キャンセルポリシー設定
    • 予約変更ポリシー設定
    • オプション販売
    • 宿泊税
    • 予約可能期間の設定
    • 非会員向けのメールの同意
  • レコメンダーウィジェット
  • カスタマーデータプラットフォーム
    • tripla Connect
  • 管理者設定
    • 管理者設定 メニュー
    • カスタムメールドメイン
    • Iframe版tripla Bookの設定
    • 配配メール
    • カスタム認証
    • IPアドレス制限
    • 顧客アプリケーションを登録する
    • ダイナミックパッケージの設定
    • 権限管理
    • ブッキングウィジェット webhookの設定
  • メディア
    • 画像の一括アップロード
  • 設定
    • 施設情報の設定
    • 検索バーの設置
    • ヘッダー/フッター・デザイン設定
    • リンククリックによる予約フロー画面立ち上げ
    • 追加項目の設置
    • 検索結果の表示順位
    • 日付未定検索設定方法
    • カスタムURLの設定
    • ログイン表示設定
    • SNSアカウント利用のログイン(SSO)設定方法
    • GoogleとのSNS連携
    • Yahoo!とのSNS連携
    • 予約ウィジェットURLパラメーター
    • サブドメイン利用時の予約ウィジェットURLパラメーター
    • 利用サービス・システム連携
    • システム連携 TLリンカーン
    • tripla管理画面・TLリンカーンで設定が必要な項目の区分
    • システム連携 手間いらず・ねっぱん・らく通
    • オペレーター設定
    • Outgoing Webhooks
    • ファーストパーティークッキーの設定
    • TableCheck
    • Open AI
    • 管理画面の言語設定
  • tripla pay
    • tripla Pay
  • tripla Guide
  • 人型アイコンでの設定
    • 請求画面の確認
    • 口座振替へ変更・振替口座先変更
    • 未来の宿泊チケット清算
    • tripla Pay 請求確認
    • 管理者側プロフィール設定
    • 権限別作業条件
    • 新規コンシェルジュ追加
  • セットアップ
    • tripla管理画面へのログイン
    • ホテルブッキングサービスについて
    • JavaScriptの設置
    • チャットボットウィジェットの設定
    • コンバージョン計測(第三者タグ)
    • サブドメインのGoogle analytics設定
    • Google Analyticsのコンバージョン設定
    • WIXを使ったホームページ作成
    • WIXでのページ遷移エラー対応方法
    • WIXでのサブドメイン設定
    • Dyspatchを利用したHTMLメール制作
    • 未来の宿泊チケット
    • TripAdvisorアカウント設定方法
    • デジコの設定
    • Google Analyticsの設定
    • 「tripla Book」とGoogleホテル広告の連携
    • GA4設定手順書
      • GA4の測定ID作成方法
  • 旅行予約キャンセル保険
  • 空港直通サービス
  • お客様側での操作
    • お客様画面での予約までの流れ
    • 3Dセキュア
    • お客様画面でのキャンセル
    • 領収書のダウンロード方法
    • お客様への領収書・メールサンプル
    • お客様画面での会員登録
    • お客様画面での会員情報確認・変更
    • お客様画面での宿泊者情報の変更
  • ホームページ設定のご案内(HP制作会社用)
    • ご契約のサービスによって、設定方法が異なります
    • ①「ブッキングエンジン」サービスのみご契約の場合
    • ②「チャットボット」サービスのみご契約の場合
    • ③「ブッキングエンジン」・「チャットボット」サービスをご契約の場合
  • 利用規約
    • tripla Bot サービス利用規約
    • tripla Bookサービス利用規約
    • tripla Boost サービス利用規約
    • tripla Connect サービス利用規約
    • tripla Success サービス利用規約
    • tripla Pay利用規約(宿泊施設向け)
    • tripla Pay利用規約(ユーザー向け)
    • tripla Pay利用規約(ユーザー向け英語版)
    • 宿泊プラン提供規約(ダイナミックパッケージ)
    • DP機能利用規約
    • tripla Page サービス利用規約
    • tripla Link サービス利用規約
    • 利用規約一覧
GitBook提供
このページ内
  • Webhookとは
  • Webhook でWebAPI を呼び出す
  • Webhookを利用したカスタムボットの作成
  • ウィジェットの設定
  • 自動メッセージの作成
  • カスタムボット作成
  • Webhookの作成方法
  • 例1:Webhookで取得したデータの利用
  • 例2:APIを利用し、ドリンク等の販売を行う
  • 例3:オプションの販売
  • 例4:Googleスプレッドシートへの書き込み

役に立ちましたか?

  1. チャットボット

チャットボット Webhookの設置

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

前へボット次へチャット履歴の確認

最終更新 1 年前

役に立ちましたか?

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を利用する為には、ウィジェットの作成・自動メッセージの作成を先に行う必要があります。

ウィジェットの設定

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

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

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

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

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

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

フィールドタイプ名

詳細

テキスト(小)

名前や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スプレッドシート

使用したい情報の入力されているスプレッドシートを選択します。

タブ

使用したい情報の入力されているタブを選択します。

読む・書く

スプレッドシートから読み込む場合[読む]を、入力する場合[書く]を選択します。

※こちらの内容では[読む]場合をご案内いたします。 

レスポンスを変数に紐づける

入力されている内容から変数を作成する事が可能です。

ノードを選択

変数として紐づける内容を選択します。

スプレッドシートの最初の5行をサンプルデータとして確認する事が可能です。 

スプレッドシート例

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

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

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

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

タイトル
詳細

ユーザー入力の収集

スライダーウィジェット

選択肢のデータソース

先程Googleスプレッドシートで作成した変数

画像

画面右側に表示される入力プロパティから適切なものを選択

タイトル

画面右側に表示される入力プロパティから適切なものを選択

サブタイトル

画面右側に表示される入力プロパティから適切なものを選択

ボディ

画面右側に表示される入力プロパティから適切なものを選択

送信ボタン送信ボタンの表示文字

適当な文章を入力

送信ボタンのデータ

画面右側に表示される入力プロパティから適切なものを選択

変数名

画面右側に表示される入力プロパティから適切なものを選択

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

例1:Webhookで取得したデータの利用

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

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

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

変数名はこれ以前のステップで取得したすべての変数が利用可能です。

例2: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にし、リクエストの前に作成したメッセージへ戻る様設定します。

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

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

例3:オプションの販売

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

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

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

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

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

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

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

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

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

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

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

タイトル
詳細

Googleスプレッドシート

入力を行いたいスプレッドシートを選択します。

タブ

入力を行いたいタブを選択します。

読む・書く

[書く]を選択します。

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

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

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

権限

作業・閲覧可否

ブランド管理者

施設管理画面から作業・閲覧可

施設管理者

作業・閲覧可

施設運営者

作業・閲覧可

を選択します。

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