直接予約エンジン
WordPress & WixにNOBEDS予約エンジンを埋め込む方法
レスポンシブなiframe連携を利用して、お客様のホテルウェブサイトで手数料0%の直接予約を受け付けましょう。
ステップ1：直接予約URLとホテルIDを取得する
NOBEDSの各宿泊施設には、専用の直接予約リンクがあります。
- NOBEDSアプリで、「設定」>「直接予約エンジン」（または「設定」>「リスティング」）に移動します。
- ホテルID（数字コード）を見つけ、直接予約フォームのURL（https://nobeds.app/DirectForm/Step/{hotel_id}）をコピーします。
- オプション：16進数コードを追加してブランドカラーを適用します。https://nobeds.app/DirectForm/Step/{hotel_id}/{background_hex}/{button_hex}（例：/ffffff/1a56db）。
ステップ2：WordPressに埋め込む（ブロックエディター / Elementor）
予約カレンダーをWordPressウェブサイトに埋め込むのに2分もかかりません。
- Gutenberg（ブロックエディター）：予約ページに「カスタムHTML」ブロックを追加します。
- Elementor：「HTML」ウィジェットをページコンテナにドラッグ＆ドロップします。
- iframeコードを貼り付けます：<iframe id="nobeds-booking-frame" src="https://nobeds.app/DirectForm/Step/{hotel_id}" style="width:100%; border:none; min-height:650px;" scrolling="no"></iframe>。
ステップ3：Wix & Squarespaceに埋め込む
コーディングなしで人気のウェブサイトビルダーに追加する方法です。
- Wix：「要素を追加」（+）>「埋め込みコード」>「HTMLを埋め込む」をクリックします。「コード」を選択し、NOBEDSのiframeスニペットを貼り付けます。
- Squarespace：「コード」ブロックを追加し、モードをHTMLに設定して、iframeコードを貼り付けます。
- コンテナの幅を100%に設定し、ボックスの高さを調整して、すべての部屋のカレンダーとチェックアウトボタンがスムーズに表示されるようにしてください。
Iframe実装に関する注意事項
- 部屋の写真と日付がデスクトップおよびモバイル画面に収まるように、常にwidth="100%"とmin-height="600px"を設定してください。
- 埋め込みiframeを介した直接予約は、即座に確認され、接続されているすべてのOTAに1分以内に同期されます。
ベストプラクティス
- ウェブサイトのヘッダーに目立つ「今すぐ予約」ボタンを配置し、埋め込みiframeセクションに直接リンクまたはスクロールするように設定してください。
- NOBEDSでStripeまたはSumUpを有効にし（設定 > オンライン決済）、ゲストがフォーム内で安全にカードで支払えるようにしてください。
よくある質問
埋め込み型の直接予約エンジンはモバイル対応ですか？
はい、NOBEDS DirectFormはスマートフォン、タブレット、デスクトップに自動的に対応します。
セットアップ料金や予約手数料はかかりますか？
いいえ、NOBEDSは直接ウェブサイト予約に対して手数料0%であり、隠れたセットアップ費用もありません。
1つのウェブサイトに複数の部屋や複数の施設を埋め込むことはできますか？
はい、個別の部屋ページに別々の予約ウィジェットを埋め込むことも、施設レベルのDirectFormを使用してゲストがすべての部屋から選択できるようにすることも可能です。
連携チェックリスト
- NOBEDSからホテルIDを取得する
- DirectFormのURLスニペットをコピーする
- WordPress/WixにHTMLブロックを埋め込む
- モバイル対応を確認する
ウェブサイトへの埋め込みでお困りですか？サポートチーム（support@nobeds.com）までお問い合わせください。
Visual Guides
Direct Booking Engine Preview
Settings > General Config