既存の検索パネルから予約ウィジェットを呼び出す

既存の検索パネルから予約ウィジェットを呼び出す

Info
※こちらの設定はホームページ担当者が設定する内容です。
triplaの提供している検索パネルではなく、自前のデザインや既存の検索パネルが既にある場合、javascriptのファンクションで、予約ウィジェットを呼び出すことができます。

window.TriplaBookingWidgetメソッド

  1. window.TriplaBookingWidget
  2. (
  3.  action,
  4. {params},
  5.  'tripla_hotel_code_optional'  // triplabotCode
  6. )

パラメータ（子供区分を利用する場合）

action'advanced_search'
params次の属性を持つオブジェクト

checkIn:必須：'yyyy/mm/dd' フォーマットでチェックイン日の指定

checkOut:必須：'yyyy/mm/dd' フォーマットでチェックアウト日の指定

adults:必須：大人人数の指定

kidsTiers: [{ code: 'A', children: 1 }]:任意：子供の区分と人数を配列で指定 code は区分IDを指定

roomCount:任意：部屋数の指定。デフォルトでは1が設定

isDayUs:
任意：日帰りプランを検索する場合に指定。 デフォルトではfalse

isDayUse値がtrueの場合、チェックアウト日は不要です。（指定した場合には、無視されます）
'tripla_hotel_code_optional'
任意：ブランド施設の場合には、予約ウィジェットを起動する施設のtriplabotCodeの指定が必要です。

デフォルトでは、 設定コードのtriplabotCodeが指定されています。


パラメータ（添い寝を利用する場合または子供の宿泊を許可していない場合）


action'advanced_search'
params次の属性を持つオブジェクト

checkIn:必須：'yyyy/mm/dd' フォーマットでチェックイン日の指定

checkOut:必須：'yyyy/mm/dd' フォーマットでチェックアウト日の指定

rooms: [{ adults: 2, children: 0 }, { adults: 1, children: 1 }]部屋毎の大人人数、子供人数を配列で指定 大人の人数は必須 最低1部屋は必須

isDayUse:
任意：日帰りプランを検索する場合に指定。 デフォルトではfalse

isDayUse値がtrueの場合、チェックアウト日は不要です。（指定した場合には、無視されます）
'tripla_hotel_code_optional'
任意：ブランド施設の場合には、予約ウィジェットを起動する施設のtriplabotCodeの指定が必要です。

デフォルトでは、 設定コードのtriplabotCodeが指定されています。



  1. window.TriplaBookingWidget('search_multiple_room',
  2.  {
  3.  checkIn: '2023/07/17',
  4.  checkOut: '2023/07/18',
  5.  rooms: [
  6.  {
  7.  adults: 2  // 1部屋目に2人
  8.  }, 
  9.  {
  10.  adults: 1  // 2部屋目に1人
  11.  }
  12.  ] 
  13.  }, '60afebc3ac8e15c5d0a497b1ec41d611' // 施設のコード
  14. )

  16. // roomsのArrayに部屋ごとの人数をセットすることで、複数部屋の検索が可能となっています。

弊社予約エンジンの施設の設定コードを読み込むことで、window.TriplaBookingWidget メソッドが利用できるようになります。
メソッドを呼ぶ際に該当するパラメータを引数として渡すことで予約ウィジェットを立ち上げることができます。
※設定コードは施設管理画面ー管理者設定ーtripla設定で確認できます。この設定コード全体のことを指します。

既存の検索パネルで施設選択できるドロップダウン・リストがある場合(ブランド施設の場合)、選択された施設の検索結果を表示するために、対象施設のtriplabotCodeを動的に設定する必要があります。
※triplabotCodeは、施設管理画面ー管理者設定ーtripla設定のコード内より確認できます。


window.TriplaBookingWidgetメソッドの設定例（子供区分を利用する場合）

  1. window.TriplaBookingWidget('advanced_search', { checkIn: '2021/10/19', checkOut: '2021/10/20', adults: 3, kidsTiers: [{ code: 'A', children: 1 }, { code: 'B', children: 1 }], roomCount: 2, isDayUse: false }, '60afebc3ac8e12c5d0a493b1ec41d611') // triplabotCode

window.TriplaBookingWidgetメソッドの設定例（添い寝を利用する場合（または子供の宿泊を許可していない場合））

  1. window.TriplaBookingWidget('advanced_search',
  2. { 
  3.  checkIn: '2021/10/19',
  4.  checkOut: '2021/10/20',
  5.  rooms: [{ adults: 2, children: 0 }, { adults: 1, children: 1 }], 
  6.  isDayUse: false
  7. }, 
  8.  '60afebc3ac8e12c5d0a493b1ec41d611') //  triplabotCode

    • Related Articles

    • Javascriptの設置

      tripla Bot、tripla Bookのホームページへの設置用Javaスクリプトの確認方法と設定方法です。 ※Booking Suiteをご利用の方とWIXをご利用の方は設定方法が異なりますのでご注意ください。 ※triplaBotをご契約の施設様の場合はGTMではなくタグ内に直接埋め込んでください。 １．JavaScriptの確認方法 Book Bot 施設管理画面ー管理者設定ーtripla設定 施設管理画面ー管理者設定ーtripla設定 ２．設置方法 基本的な設置方法 ...

    • サービス導入までのチェックリスト（CM2.0）

      １．導入までの流れとサポート体制 導入までの流れについてはこちらの組織体制・連絡先をご覧ください。 ２．Book 管理画面側での準備 予約エンジン設定 ☐通知メール（必須ではない） ☐子供設定 ☐キャンセルポリシー ☐部屋タイプ（写真登録可否） ☐プラン（写真登録可否） メディア ☐写真登録 在庫・価格管理 （TL-リンカーンの場合はサイトコントローラー側で設定した情報が、triplaの管理画面に表示されます） ☐在庫と料金の設定 ３．サイトコントローラーごとの導入手順 ねっぱん ...

    • 管理画面の権限の管理

      tripla管理画面には、権限によってアクセスできるページや操作できる範囲の制限が設定されています。 管理画面にアクセスし操作できる人やアカウントのことを、管理者やアカウント、コンシェルジュと呼んでいます。 ⏱所要時間：アカウントの追加やメールアドレス、パスワードの変更などは約５分で可能です。 アカウントとメールアドレスのルール triplaの管理画面では、1つのメールアドレスにつき1つの権限しか付与できません。 ...

    • 弊社へのお問い合わせについて

      ご担当者各位 平素より、triplaサービスをご利用いただき誠にありがとうございます。 弊社へお問い合わせいただく際のお願いについてお知らせいたします。 管理画面のお問い合わせについて 恐れ入りますが、コールセンターはないため、 お問い合わせは管理画面右下のチャットボットまたはお問い合わせフォーム（Zohoフォーム）にてお願いいたします。 ①チャットボット AIチャットボットと有人オペレーターが対応しています。 【オペレーター対応時間】平日10:00－17:00 ※AIは24時間稼働しています ...

    • 検索バー、空室検索画面の設定

      ※こちらの設定はホームページ担当者が設定する内容です。 ホームページへ宿泊プラン検索画面（ブッキングウィジェット）、検索バーの設置をします。 triplaが提供する検索バー以外に、自前のデザインや検索パネルからjavascriptのファンクションで予約ウィジェットを呼び出すことも可能です。 詳細はこちらよりご覧ください。 triplaが提供する検索バーの設置方法 設定する場所 施設管理画面ー設定ーウィジェット設定ー予約ウィジェットを開きます。 検索バー ...