Embedding the Booking Widget

Add HyperXI booking to your existing website. Choose from a simple link, an iframe embed, or the JavaScript widget for full integration.

Option 1: Direct Link

The simplest approach. Link directly to your HyperXI booking page from your website. Customers are taken to the full-page booking experience hosted on HyperXI.

Add to your websiteHTML

<a href="https://hyperxi.com/book/your-slug">
  Book Now
</a>

Replace your-slug with the tenant slug you chose during signup. The booking page is fully responsive and works on all devices.

Best for:

Quick setup, "Book Now" buttons, email campaigns, social media links. No code changes needed beyond adding a link.

Option 2: iframe Embed

Embed the booking page directly within your website using an iframe. Customers stay on your site while completing the booking flow.

Embed in your pageHTML

<iframe
  src="https://hyperxi.com/book/your-slug"
  style="width:100%;height:800px;border:none;border-radius:8px;"
  allow="payment"
></iframe>

The allow="payment" attribute is required for Stripe Checkout to work within the iframe. You may need to adjust the height depending on the number of rooms and your page layout.

Best for:

Websites where you want booking embedded on a specific page (e.g., a /book or /reserve page) without customers leaving your domain.

Note

Some browsers may block third-party cookies within iframes. If customers experience issues, consider the JavaScript embed (Option 3) or direct link (Option 1) instead.

Option 3: JavaScript Embed

The JavaScript embed provides the most integrated experience. It renders the booking widget directly in your page's DOM, matching your tenant's branding settings.

Add to your pageHTML

<div id="hyperxi-booking"></div>
<script>
  window.HyperXI = { tenant: 'your-slug' };
</script>
<script src="https://hyperxi.com/embed.js"></script>

The embed script loads asynchronously and renders the booking widget into the #hyperxi-booking container. The widget is responsive and adapts to the container's width.

Configuration options

All optionsJavaScript

window.HyperXI = {
  tenant: 'your-slug',      // Required: your tenant slug
  container: '#my-widget',  // Optional: custom container selector
                             //   (default: '#hyperxi-booking')
  room: 'wizards-tower',    // Optional: pre-select a specific room
  theme: 'dark',            // Optional: 'dark' or 'light'
                             //   (default: matches tenant settings)
};

Best for:

Full integration into your website with branding consistency. Single-page apps, custom booking pages, or sites that need the widget to feel native.

Customization

The booking widget automatically uses your tenant's branding settings. Configure these at /admin/settings under the Branding section:

Company name -- Displayed in the header of the booking widget
Logo -- Shown in the booking widget header and confirmation emails
Primary color -- Used for buttons, highlights, and accents throughout the widget

Changes to branding settings take effect immediately across all embed methods (link, iframe, and JavaScript embed). No code changes are required on your website.

CORS for Custom Integrations

If you are building a custom booking UI that calls the HyperXI API directly from the browser, you need to configure CORS (Cross-Origin Resource Sharing) to allow requests from your domain.

Navigate to /admin/settings and add your domain to the "Allowed Origins" list under the API section:

Example allowed origins

https://www.myescaperoom.com
https://myescaperoom.com
https://booking.myescaperoom.com

Each origin must include the protocol (https://) and the exact domain. Wildcard subdomains are not supported for security. The standard embed methods (Options 1-3) do not require CORS configuration.

Security note

Only add origins you control. Never add * or third-party domains to your allowed origins list. If you no longer use a domain, remove it from the list.

← Bookings & Payments MCP Guide →