予約受付ウィジェットを作成する（予約画面デザインを使用している場合） – TC ヘルプセンター

本ページは、予約ページ用テーマ（予約画面のデザインカスタマイズ）を利用している店舗様向けのヘルプページになります。

予約ウィジェットを利用して、自社ホームページサイトのお好きな箇所に予約窓（ウィジェット）を設置することが可能です。
モバイルページもウィジェットはご利用可能ですが、エンドユーザーさまが利用しやすい予約ボタンリンクをおすすめします。

TableCheckにて作成できるウィジェット以外の形にカスタマイズする場合、お店側でのカスタマイズが必要となります。
カスタマイズをするとTableCheckのアップデートによっては正しく動作しなくなることもございますので、ご注意くださいませ。

2．Web IDを入力し、各項目の設定を確認します。
（各項目のコードは、画面右上の「埋め込みコード」、または「ドキュメント」にて確認できます）

予約受付ウィジェット作成1（nbf）.png

インラインの例（nbf）.png

予約フォームをWebサイトのコンテンツに埋め込み方法の選択ができます。

各項目を有効・無効にすることで、プレビューが下部に表示されます。
※高さ自動調整はテスト段階のため、反映されません。

インラインの例（nbf）2.png

ポップアップの例1（nbf）.png

予約フォームの表示方法の選択ができます。

ポップアップの例2（nbf）.png

カスタムポップアップの例（nbf）.png

「ポップアップの例」とは他に、HTML, CSS, Javascriptなどでのカスタム方法を案内しています。

画面右上の「埋め込みコード」を押下することで、詳細が表示されます。

ウィジェットの例（nbf）.png

ウィジェットのカスタマイズができます。

詳細は右上「ドキュメント」の「SDK構成」をご確認ください。

詳細確認方法.png

複数ウィジェットの例（nbf）.png

さまざまなタイプのウィジェットのコードを確認できます。

テーマ付きウィジェットの例（nbf）.png

カスタムテーマまたはカスタム CSS スタイルを使用して「ウィジェット」モードで予約フォームを埋め込む方法を案内しています。

組織のブランドカラーでウィジェットのスタイルを設定する必要がある場合に役立ちます。

ウィジェットレイアウト

PCでは水平表示ですが、ウィンドウサイズに応じて垂直表示になります。
※表示については以下項目「水平」「垂直」をご確認ください。

ウィジェットプレビュー（水平）.png

ウィジェットプレビュー（垂直）.png

ウィジェットプレビュー（カレンダー）.png

関連記事