ウィジェットの設置方法

予約ウィジェットをお客様のWebサイトに設置する方法を説明します。

埋め込みコードの取得

1. 管理画面にログイン
2. サイドメニューから「ウィジェット設定」を選択
3. 表示された埋め込みコードをコピー

設置方法

取得したiframeコードをHTMLに貼り付けます。

<iframe
  src="https://yoyaku-box-widget.vercel.app?key=wk_xxxxxxxxxxxxx"
  width="100%"
  height="800px"
  frameborder="0"
  style="border: none;"
></iframe>

カスタマイズ

サイズ調整

<!-- 幅と高さを調整 -->
<iframe
  src="https://yoyaku-box-widget.vercel.app?key=wk_xxxxxxxxxxxxx"
  width="100%"
  height="600px"
  style="border: none; max-width: 500px;"
></iframe>

レスポンシブ対応

<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>