ウィジェット設定
予約ウィジェットの埋め込みコードを取得・管理します。
設定画面
サイドバーの「ウィジェット設定」をクリックして設定画面を開きます。
ウィジェット公開キー
各ブランドには固有のウィジェット公開キー（wk_ で始まる文字列）が発行されています。
キーの特徴
- 32文字のランダムな英数字
- ブランドごとに一意
- URLパラメータとして使用
キーの確認
設定画面の「ウィジェットキー」欄に現在のキーが表示されます。
埋め込みコード
コードの取得
- ウィジェット設定画面を開く
- 「埋め込みコード」欄のコードを確認
- 「コピー」ボタンでクリップボードにコピー
埋め込み例
html
<iframe
src="https://yoyaku-box-widget.vercel.app?key=wk_xxxxxxxxxxxxx"
width="100%"
height="800px"
frameborder="0"
style="border: none;"
></iframe>キーの再生成
セキュリティ上の理由でキーを変更したい場合は、キーを再生成できます。
再生成手順
- 「キーを再生成」ボタンをクリック
- 確認ダイアログで「再生成」を選択
- 新しいキーが発行される
重要な注意
キーを再生成すると、古いキーは即座に無効化されます。埋め込み済みのウィジェットもすべて更新が必要です。
再生成が必要なケース
- キーが外部に漏洩した場合
- セキュリティポリシーに基づく定期更新
- 不正なアクセスが疑われる場合
プレビュー
設定画面からウィジェットのプレビューを確認できます。
- 「プレビュー」ボタンをクリック
- 新しいタブでウィジェットが表示される
- 実際の動作を確認
ウィジェットの表示設定
ウィジェットに表示される内容は以下で設定します：
| 設定項目 | 設定場所 |
|---|---|
| ブランド名 | ブランド管理 |
| 店舗一覧 | 店舗管理 |
| 営業時間 | 店舗管理 |
| 休日 | 休日設定 |
埋め込み先の設定
WordPressの場合
- 固定ページまたは投稿を編集
- 「カスタムHTML」ブロックを追加
- 埋め込みコードを貼り付け
- 公開/更新
一般的なHTMLの場合
表示したい場所に埋め込みコードをそのまま貼り付けます。
レスポンシブ対応
html
<div style="position: relative; padding-bottom: 150%; height: 0;">
<iframe
src="https://yoyaku-box-widget.vercel.app?key=wk_xxxxxxxxxxxxx"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
></iframe>
</div>トラブルシューティング
ウィジェットが表示されない
- キーが正しくコピーされているか確認
https://で始まっているか確認- iframeの高さ・幅が設定されているか確認
店舗が表示されない
店舗の「公開設定」がONになっているか確認してください。 → 店舗管理
古いデータが表示される
ブラウザのキャッシュをクリアしてリロードしてください。