Skip to main content
Embed the Boseat booking widget into your website or application using an iframe. The widget provides a complete booking interface that your customers can use without leaving your site.

​
Quick start

Add the iframe to your HTML: 
<iframe
  src="https://embed.boseat.com/YOUR_ORGANIZATION/YOUR_VENUE/YOUR_SPACE"
  width="100%"
  height="600"
  frameborder="0"
  allow="payment"
  title="Boseat Booking Widget"
></iframe>
Replace YOUR_ORGANIZATION, YOUR_VENUE, and YOUR_SPACE with your values from the Boseat dashboard.

​
URL Structure

The widget URL follows this pattern: 
https://embed.boseat.com/<organization>/<venue>/<space>

​
Required

  • <organization> — Your organization identifier (required in path)

​
Path segments

  • <organization> — Required
  • <venue> — Required
  • <space> — Required

​
Optional (query parameters)

  • locale — Language code (e.g., en, fr, es)
  • (Theme is applied from your organization configuration; a theme query key may be added later.)
Examples: Organization + venue + space: 
<iframe
  src="https://embed.boseat.com/acme-corp/downtown-hub/meeting-room-a"
  width="100%"
  height="600"
  frameborder="0"
  allow="payment"
  title="Boseat Booking Widget"
></iframe>
Spaces are required for booking; include the space slug in the path. With query parameters: 
<iframe
  src="https://embed.boseat.com/acme-corp/downtown-hub/meeting-room-a?locale=en"
  width="100%"
  height="600"
  frameborder="0"
  allow="payment"
  title="Boseat Booking Widget"
></iframe>

​
Responsive sizing

Use CSS to make the iframe responsive: 
<div style="position: relative; width: 100%; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://embed.boseat.com/YOUR_ORGANIZATION"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allow="payment"
    title="Boseat Booking Widget"
  ></iframe>
</div>
Or use a fixed height that fits your layout: 
<iframe
  src="https://embed.boseat.com/YOUR_ORGANIZATION"
  style="width: 100%; min-height: 600px; border: none;"
  allow="payment"
  title="Boseat Booking Widget"
></iframe>

​
WordPress integration

A WordPress plugin is currently in development. Once available, it will provide:
  • Shortcode support: [boseat-widget organization="YOUR_ORGANIZATION" venue="VENUE_SLUG"]
  • Admin panel for configuration
  • Theme customization options
  • Automatic updates
For now, WordPress users can embed the widget using:
  1. HTML block — Add a Custom HTML block and paste the iframe code
  2. Page builder — Use an HTML widget/module in your page builder
  3. Theme template — Add the iframe directly to your theme template

​
PostMessage communication (optional)

Listen for booking events from the widget: 
window.addEventListener('message', (event) => {
  // Verify origin
  if (event.origin !== 'https://embed.boseat.com') return;
  
  if (event.data.type === 'booking.created') {
    console.log('Booking created:', event.data.booking);
    // Handle booking confirmation
  }
  
  if (event.data.type === 'booking.error') {
    console.error('Booking error:', event.data.error);
    // Handle errors
  }
});

​
Security

  • The widget uses HTTPS and requires a valid organization identifier
  • Payment data is handled securely through Stripe (no card data passes through your site)
  • Use allow="payment" to enable payment functionality
  • Consider using Content Security Policy (CSP) headers if needed

​
Troubleshooting

  • Widget not loading: Verify organization identifier is correct and your organization is active
  • 404 errors: Check that venue/space slugs match exactly (case-sensitive)
  • Payment not working: Ensure allow="payment" is set on the iframe
  • Styling issues: Check that parent container has sufficient width/height
  • CORS errors: Ensure your site uses HTTPS (widget requires secure context)