Skip to Content
iFrame Embedding

Embedding the LodgeFlow Booking Engine via iFrame

Safely embed the LodgeFlow booking engine on hotel websites, partner portals, and third-party property pages using a standard HTML <iframe>.

Overview

The embed host loads a fully managed booking UI from https://embed.lodgeflow.com. You control appearance and context through query parameters — no JavaScript SDK is required for basic integrations.

Configuration parameters

ParameterRequiredDescription
property_idYesYour property identifier from the partner dashboard
themeNolight (default) or dark
localeNoISO language code: en, fr, de, es

Responsive sizing

  • Set width="100%" so the iframe spans its container.
  • Use min-height: 600px (or taller on mobile) so checkout steps are not clipped.
  • Avoid fixed pixel widths unless your layout requires them.

Security attributes

Always include restrictive sandbox and feature policies:

  • sandbox — Allow only scripts, same-origin, forms, and popups needed for checkout.
  • allow="payment" — Enables Payment Request API for card wallets inside the embed.
  • referrerpolicy="strict-origin-when-cross-origin" — Limits referrer leakage.

Never add allow-top-navigation unless you explicitly want the iframe to redirect the parent page.

Interactive embed builder

Use the configurator below to preview query parameters and copy production-ready markup.

Live configuration

PostMessage security: If you listen for real-time events (checkout completion, room selection) from the iframe, verify event.origin matches https://embed.lodgeflow.com before handling any payload.

Preview URL: https://embed.lodgeflow.com/v1/booking?property_id=prop_demo_8f2a&theme=light&locale=en

PostMessage events

Subscribe to guest actions from the parent window:

window.addEventListener('message', function (event) {
  if (event.origin !== 'https://embed.lodgeflow.com') return
 
  var type = event.data.type
  var payload = event.data.payload
 
  if (type === 'lodgeflow:room_selected') {
    console.log('Room selected', payload)
  }
  if (type === 'lodgeflow:checkout_complete') {
    console.log('Booking confirmed', payload.bookingId)
  }
})

Content Security Policy

Add these directives to your site CSP when embedding LodgeFlow:

frame-src https://embed.lodgeflow.com;
connect-src https://embed.lodgeflow.com https://api.lodgeflow.com;

Troubleshooting

IssueFix
Blank iframeConfirm property_id is valid and published
Checkout blockedEnsure allow="payment" and sandbox includes allow-scripts
Events not receivedVerify event.origin before reading event.data
Last updated on
Authentication