ウィジェットの作成方法

概要

TicketingHubの予約ウィジェットは、ウェブサイトに組み込んで、お客様が商品を直接予約できるJavaScriptツールです。ダッシュボードで作成し、各セクションを順番に設定したうえで、短いコードスニペットをサイトに貼り付けます。

対応ブラウザ

Safari 16.4以降、Chrome 111以降、Firefox 128以降。

新しいウィジェットの作成

ダッシュボードで ウィジェット に移動します
新しいウィジェット をクリックします
ウィジェット名を入力し、販売する商品を選択して、ウィジェットを作成 をクリックします

ウィジェットの設定ページが表示されます。ここでその他すべての設定を行います。左側にはセクションごとにまとめられた設定が表示され、右側には変更内容に応じて更新されるウィジェットのライブプレビューが表示されます。

ウィジェットの設定

販売する商品

ウィジェットで提供する商品、パッケージ、ギフトカードを選択します。追加オプションをすべて、または選択したものだけ含めることもできます。また、お客様がウィジェットで商品をギフトバウチャーとして購入できるようにするか、ギフトバウチャーを利用できるようにするかを設定できます。

予約フロー

お客様がウィジェットをどのように進むかを選択します。チケットを先に（チケットを選択してから日付と時間を選択）、イベントを先に（カレンダーを閲覧してから予約内容を選択）、または バウチャー利用のみ から選べます。カレンダーの初期表示や、入力ミスを防ぐためにお客様にメールアドレスを2回入力してもらうかどうかも設定できます。

販売ルール

ウィジェットで販売する時期と内容を管理します。販売開始日時、カレンダーを開いたときに表示する日付、時間枠の残りの定員を表示するタイミング、お客様が支払いに使用できる通貨を設定できます。カレンダーに表示される最初の週または月に予約可能なものがない場合、カレンダーは先の日付を確認し、予約可能な最初の日付を表示します。

外観

カスタムCSSを追加してウィジェットの外観を細かく調整し、ブランドに合わせることができます。

アナリティクス

Google AnalyticsまたはGoogle Tag Managerを接続して、訪問者によるウィジェットの利用状況を追跡できます。

詳細設定

購入後にお客様を任意のページへ移動させたり、リセラーが使用するURLパラメーターを設定して、リセラー経由の予約をリセラーに関連付けたりできます。

プレビュー、公開、導入

変更内容はライブプレビューに対する下書きとして保存されます。プレビューを更新 をクリックすると、公開中のウィジェットに影響を与えずに右側で変更内容を確認できます。問題がなければ公開をクリックして変更を反映するか、キャンセル をクリックして下書きを破棄します。

ウィジェットをウェブサイトに設置するには、インストール手順 を開きます。スクリプトタグをページにコピーしてから、埋め込み ウィジェット（ページのコンテンツ内に直接表示）と モーダル／ポップアップ ウィジェット（ボタンからオーバーレイで開く）のいずれかを選択し、対応するスニペットを貼り付けます。

ウィジェットによるページのスクロール動作

お客様が次のステップに進むと、ウィジェットは予約フォームの先頭までスクロールします。これにより、チケットの長い一覧を下までスクロールしたお客様が、次のステップの途中から表示されることを防ぎます。ウィジェットを独自のスクロール可能なパネル内に配置している場合は、そのパネルがスクロールします。パネル自体が表示範囲外までスクロールされている場合にのみ、ページもスクロールします。フォームの先頭が表示範囲外に移動した場合、またはフォームが画面下端からはみ出していて、その上に十分な空きがある場合にスクロールが発生します。フォーム全体がすでに画面内に収まっている場合は位置を維持し、ページ上部に固定されたヘッダーのための余白も確保します。

この動作がレイアウトに合わない場合は、貼り付けたウィジェットコードに "scrollOnStepChange": false を追加して、ページが移動しないようにします。

<div id="embed_widget" data-th-embed data-th-config='{"widgetId":"YOUR-WIDGET-ID","scrollOnStepChange":false}'></div>

訪問者が下にスクロールするとヘッダーが隠れ、上にスクロールすると再び表示される場合、ウィジェットはヘッダーのサイズを測定できないため、フォームの先頭がヘッダーの背後に隠れることがあります。スクロールを無効にする代わりに、ヘッダーの高さをピクセル単位でウィジェットに指定します。

<div id="embed_widget" data-th-embed data-th-config='{"widgetId":"YOUR-WIDGET-ID","scrollOffset":80}'></div>

既存のウィジェットの複製（クラシックウィジェット）

クラシックウィジェットエディターを使用している場合は、ウィジェットを作り直す代わりに複製できます。

ウィジェット に移動します
既存のウィジェットを選択します
複製をクリックします
対象のチャネルを選択し、選択内容を確定します

複製したウィジェットをカスタマイズし、公開してからコードをコピーしてサイトに貼り付けます。