予約フォームをサイトに埋め込む方法 ── コード不要・5分で設置

設置手順 3 ステップ

① 管理画面でウィジェットコードを取得

onlineReserve 管理画面 → [設定] → [ウィジェット] でコードを生成します。業種・メニュー・表示形式を選ぶだけで HTML が出力されます。

② サイトに貼り付け

生成されたコード(例)はこのような1行のスクリプトタグです。

<div id="or-widget" data-shop="your-shop-id"></div>
<script src="https://onlineokinawa.com/Reserve/widget/embed.js" async></script>

③ 公開 → 動作確認

サイトを公開後、貼り付けた箇所に予約カレンダーが表示されます。スマホ・PC 両方で確認しましょう。

主要サイトビルダー別の設置場所

• WordPress: 投稿/固定ページのテキストエディタに直接貼り付け、または「カスタムHTML」ブロックで設置
• Wix: エディタ → 追加 → 埋め込み → HTMLコードを埋め込む
• ペライチ: ブロック追加 → 「埋め込みコード」
• Jimdo: コンテンツ追加 → 「ウィジェット/HTML」
• STUDIO: エンベッド要素 → コード貼り付け

ウィジェット形式 4種

• インライン埋め込み: ページ内に予約カレンダーを表示。事業者サイトのコンテンツとして組み込み。
• モーダル (ポップアップ): 予約ボタンクリックでオーバーレイ表示。サイトのデザインを邪魔しない。
• フローティング: 画面右下に常時表示。スクロール追従。離脱率が下がりやすい。
• 予約ボタンリンク: 予約専用ページへの遷移リンク。最もシンプル、無料プランでも利用可。

よくあるトラブル対処

• 表示されない: ブラウザのキャッシュをクリア、JavaScript が無効化されていないか確認
• スマホで崩れる: サイトのコンテナ幅に max-width 制限がないか確認、レスポンシブ設定確認
• CSPでブロックされる: Content-Security-Policy に onlineokinawa.com を追加

よくある質問