Embed the Booking Form on Another Website

Your booking page lives on WordPress, but your shop or main site may not. Embedding puts the Core Bookings form on a Shopify, Squarespace, Webflow or static site with one snippet. The form runs in a frame served by your WordPress site, so availability, payments, emails and the booking record work exactly as they do on WordPress.

Embedding needs Core Bookings 1.1.0 or later. For pages on the same WordPress site, use the block, shortcode or page builder element in Add the Booking Form, Service Directory and Popup Button instead.

Allow the Other Website

Embedding is off until you name the websites that may show the form. Other websites can never show it.

1. Go to Bookings → Settings → Embed (under Connections).
2. In Allowed websites, enter one address per line, up to 20.
3. Save.

You enter	Allowed
example.com	https://example.com only. Add www.example.com on its own line if the site uses it.
https://*.example.com	Every subdomain, such as shop.example.com, but not example.com itself.
http://localhost:3000	Plain http:// is accepted only when you write it out, for local testing.

Copy the Snippet

The same screen lists a snippet for each service, plus one for All services (customer chooses). Click Copy snippet and paste it into the other site’s HTML where the form should appear. It looks like this:

<script src="https://booking.example/wp-content/plugins/core-bookings/assets/embed.js"
  data-site="https://booking.example/" data-service="12" data-title="Book Haircut" async></script>

On Shopify, use a Custom Liquid section. On Squarespace, use a Code block. On Webflow, use an Embed element. Any place that accepts raw HTML works.

To put the form somewhere other than where the script sits, load the script once and add a target where the form should go:

<div data-core-bookings-embed data-service="12" data-site="https://booking.example/"></div>

Attribute	What it does
data-service	The service ID. 0 lets the customer choose the service.
data-staff	Preselects a staff member by their WordPress user ID.
data-date	Opens the form on a date, as YYYY-MM-DD.
data-title	The frame’s name for screen readers.

What Customers See

• The booking form only, without the standalone page’s header. It uses your WordPress theme’s fonts and the form appearance you chose in Bookings settings.
• The frame grows and shrinks with the form, so there is no scroll bar inside it. Keyboard focus moves in and out like any other part of the page.
• Embedded Stripe payment stays inside the form. Hosted checkout pages that refuse to run in a frame, such as Stripe Checkout, PayPal and FluentCart, open in a new tab, and the form updates on its own when the payment arrives.
• Links in the form open in a new tab.

Track Bookings on the Other Site

The page that embeds the form receives browser events, so you can record conversions in that site’s own analytics.

Event	When it fires
core-bookings:booked	The form shows a new booking, whatever its status, including awaiting payment or approval.
core-bookings:paid	The booking’s payment arrives while the form is open.
core-bookings:approved	You approve a request while the customer still has the form open.

document.addEventListener('core-bookings:booked', event => {
  // event.detail = { booking, status, payment_status, service }
  console.log('Booked', event.detail.booking, event.detail.status);
});

Events carry the booking ID, its status, its payment status and the service ID. They never carry the customer’s name, email or answers.

What Doesn’t Work in a Frame

• Services that require customers to log in. Browsers block the WordPress login cookie inside a frame on another site. Link to the booking page for those services instead.
• Websites missing from the list. The form refuses to load there, and the browser shows an empty frame. Check the exact address, including www.

Security

• The frame answers only while the allowed list has entries. It tells browsers, through a Content-Security-Policy: frame-ancestors header, which websites may show it.
• The form talks only to the page that embedded it, and that page listens only to its own frame.
• The scripts contain no tracking and load nothing else.