予約画面(ウィジェット画面)に表示する内容を変更する方法

予約画面(ウィジェット画面)に表示する内容を変更する方法

本記事では、JTB BÓKUNのウィジェット機能を活用して予約受付される場合の予約画面に表示される内容のアレンジ方法について説明します。


JTB BÓKUNのウィジェット画面(予約画面)の表示内容について、デフォルトでは、商品設定において入力された全項目の内容が表示されます。また、「説明」「旅程」「集合場所」「ピックアップ」「利用人数」「予約内容」などの文言がデフォルトとなっています。

下記ではそれぞれの表示変更について説明します。


1.商品ページに表示される項目の非表示の設定方法

2.カレンダーの表示を変更する方法

3.商品リスト画面の表示を変更する方法

4.「説明」「旅程」「集合場所」「ピックアップ」「利用人数」「予約内容」などのデフォルト文言の変更方法

1.商品ページに表示される項目の非表示の設定方法

商品ページのウィジェット画面には、写真、難易度、所要時間、含まれるもの、キャンセルポリシーなどの項目が表示されています。そのうちの一部の項目を非表示に設定したい場合、予約チャンネルの編集より非表示設定ができます。


①設定>販売関連>予約チャンネルより該当予約チャンネルの編集画面を開きます。

②ウィジェット>商品ページをクリックし、非表示にしたい項目のチェックを外すと、該当項目が非表示になります。

③右側にあるプレビュー画面より確認してください。


※この設定は予約チャンネルで行うため、この予約チャンネルで生成したすべてのウィジェットに対して適用されます。


2.カレンダーの表示を変更する方法

設定>販売関連>予約チャンネル>ウィジェット>カレンダー画面には、以下の設定ができます。


  • 初期設定のカテゴリが自動的に選択されます:チェックを入れた場合、ウィジェットを開く際に料金カテゴリがあらかじめ選択された状態で表示されます。
  • 完売を表示する:チェックを入れた場合、完売した日付の右上の三角マークが赤で表示されます。
  • すべての開始時刻の料金・タイトルを表示する:チェックを入れた場合、カレンダー画面より日付を選択した次の画面に料金タイトルが表示されます。
  • カレンダーに料金を表示:チェックを入れた場合、日付の下に金額が表示されます。
  • 日曜日スタートのカレンダー表示:チェックを入れた場合、カレンダー表記が日曜日スタートとなります。
  • 残りのスロットが少なくなったら警告を表示する:チェックを入れた場合、「しきい値の警告」に入力されている数より在庫が少ない場合、日付の右上の三角マークが黄色で表示され、該当日付/開始時間を選択した際に画面上に「残りわずか」の文言が表示されます。(残数は表示されません)


※この設定は予約チャンネルで行うため、この予約チャンネルで生成したすべてのウィジェットに対して適用されます。


「残りわずか」の表記設定について、商品ごとにしきい値の設定もできます。

設定方法は、商品の編集画面>アドバンス>予約画面の設定>この商品に残数が少ない表示を設定する をオンにして、残数を入力します。

※予約チャンネルと商品設定の両方にしきい値が設定されている場合、商品に設定されている残数が優先して適用されます。


3.商品リスト画面の表示を変更する方法

設定>販売関連>予約チャンネル>ウィジェット>商品リストでは、以下の設定ができます。


  • 商品リスト検索可能にする:オンにすると、リスト上部に検索欄が表示されます。詳細はこちらをご参考ください。
  • ページ上の商品数:1ページあたりの表示する商品数を設定することができます。
  • 商品リストでエクスペリエンスが選択される場合、何を開く必要がありますか?:商品ページを開くか、または予約カレンダーのみ表示させるかを選択することができます。
  • 商品リスト項目のレイアウトを選択する:タイル状の並び、またはリスト式の並びを選択することができます。
  • 商品イストに表示される内容カスタマイズする:
    ①簡単な説明を表示:商品の概要の表示
    ②サプライヤー名を表示する:商品の提供事業者名の表示


4.「説明」「旅程」「集合場所」「ピックアップ」「利用人数」「予約内容」などのデフォルト文言の変更方法

「利用人数」の文言の変更は商品ごとにできます。

商品の編集画面>アドバンス>予約画面の設定>顧客の選択種別より該当商品に近い選択肢を選んでください。


「利用人数」以外の一部のデフォルト文言はCSSコードの書き換えにより変更することができます。

下記では「予約内容」の変更方法を説明します。


①設定>販売関連>予約チャンネルより該当予約チャンネルの編集画面を開きます。

②ウィジェット>テーマをクリックします。

③「アドバンスオプションを表示する」にチェックし、以下を入力すると変更が出来ます。赤字の部分は内容に応じて文言の変更をしてください。

.SummaryHeader:after{

 content:"(旅行代金および出発日)";

 visibility:visible;}

.SummaryTitle {visibility:hidden;}

Share by: