Embed your booking page on your own website

🟢Beginner 5 min read

Learn how to easily embed your FlowDule booking page on your own website using an iframe or our widget script.

You can let your customers book directly from your own website - without leaving it. You can also embed your events, your web shop or gift card sales. FlowDule offers two easy ways to embed.

Before you start

You need your booking slug - that’s the part of your booking address that comes before .flowdule.com. For example, if your booking page is klinik-nord.flowdule.com, your slug is klinik-nord.

You can find your slug under Settings → Online Booking in the FlowDule app.

---

Option 1: Direct iframe

The simplest method. Copy the HTML code below and paste it where you want the booking form to appear on your website.

<iframe
  src="https://klinik-nord.flowdule.com?embed=true"
  width="100%"
  height="700"
  frameborder="0"
  style="border: none; border-radius: 8px;"
  allow="payment"
  title="Book an appointment"
></iframe>

Benefits:

• Works in all CMS systems (WordPress, Wix, Squarespace, Webflow, etc.)
• No JavaScript required
• Full control over placement and size

Tips:

• Adjust the height value if the content is clipped. We recommend a minimum of 700.
• A plain iframe has a fixed height. If you want automatic height adjustment, use the widget script (option 2) - or listen for the flowdule:resize event yourself, as described under “Advanced” at the bottom.

---

Option 2: FlowDule Widget (recommended)

Our widget script handles everything automatically - iframe creation, automatic height adjustment, and optionally a “Book now” button with a pop-up.

The script is served from your own booking address, so src always starts with your slug: https://klinik-nord.flowdule.com/widget.js.

Inline display

The booking form is displayed directly on the page:

<div id="flowdule-booking"></div>
<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-target="flowdule-booking"
></script>

Pop-up display (modal)

A button that opens the booking form in an overlay:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-mode="modal"
  data-button-text="Book now"
  data-button-color="#4A7C59"
></script>

The button is automatically inserted where you place the script tag.

---

Choose what the widget shows

data-view decides which part of your FlowDule page is embedded. The widget stays inside the chosen area, so visitors can’t navigate on to your other modules inside the iframe.

data-view	Shows
booking (default)	The booking flow: location, service, time and confirmation
events	Your event list - or one specific event with data-event-id
shop	Your web shop with products, cart and checkout
giftcard	Gift card purchase

Leave data-view out and the widget behaves exactly as before: it shows the booking flow.

Example 1: Booking, inline

The smallest possible setup:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
></script>

Example 2: Web shop in dark theme

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="shop"
  data-theme="dark"
></script>

Example 3: One specific event as a button

The button opens the event in an overlay - useful for a “Buy ticket” button next to your own write-up of the event:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="events"
  data-event-id="3f9c1b8e-5d2a-4f7c-9a31-6b0e8c2d4a15"
  data-mode="modal"
  data-button-text="Buy ticket"
></script>

Example 4: Gift cards

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="giftcard"
></script>

Start at a specific point in the booking flow

If you have several locations you can skip the location step, and you can preselect a service:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="booking"
  data-location-id="a41f0d92-77c5-4b1e-8f60-2c9e5a7d3b84"
  data-service-id="d7b3e610-9c48-42aa-b1f5-0e83c6d21947"
></script>

data-service-id requires data-location-id, because services belong to a location.

You can run several widgets on the same page - for example booking at the top and the web shop further down. Give each widget its own data-target element.

---

Widget settings

Attribute	Required	Default	Description
data-slug	Yes	-	Your booking slug
data-view	No	booking	What to show: booking, events, shop or giftcard
data-event-id	No	-	Opens one specific event (requires data-view="events")
data-location-id	No	-	Starts directly at one location (requires data-view="booking")
data-service-id	No	-	Preselects a service (requires data-location-id)
data-theme	No	auto	light, dark or auto (follows the visitor’s system setting)
data-locale	No	Your chain’s language	Language: da, en or de. Leave it out to use your own language in FlowDule
data-target	No	Auto-created	ID of the HTML element where the content should appear
data-mode	No	inline	inline (direct) or modal (pop-up)
data-button-text	No	”Book en tid”	Button text (modal mode only)
data-button-color	No	#2D5A5C	Button colour (modal mode only)
data-show-map	No	Hidden	true shows a map of locations
data-show-contact	No	Hidden	true shows the contact link, which is otherwise hidden when embedded
data-background	No	transparent	surface gives the widget its own background

---

How to do it in WordPress

With Elementor

1. Add an HTML widget where you want the booking
2. Paste the iframe or widget code
3. Save and preview

With WordPress Block Editor (Gutenberg)

1. Add a Custom HTML block
2. Paste the code
3. Switch to “Preview” to see the result

With a WordPress theme

Insert the code in your template file (e.g. page-booking.php) where you want the form to appear.

---

How to do it in other CMS systems

Wix

1. Go to your page in the Wix Editor
2. Click Add → Embed Code → Custom Element or HTML iframe
3. Paste the code

Squarespace

1. Edit the desired page
2. Add a Code Block
3. Paste the code and save

Webflow

1. Drag an Embed component onto your page
2. Paste the code
3. Publish your site

---

Advanced: Listen for booking events

If you want to react when a customer has completed a booking (e.g. for tracking or displaying a thank-you message), you can listen for postMessage events:

<script>
  window.addEventListener("message", function (event) {
    // Verify the message comes from your exact booking address
    if (event.origin !== "https://klinik-nord.flowdule.com") return;

    if (event.data.type === "flowdule:booked") {
      // The customer has booked!
      console.log("Booking completed:", event.data.bookingId);
      console.log("Confirmation code:", event.data.confirmationCode);
    }
  });
</script>

All available events

Event	Data	When
flowdule:ready	—	Booking form has loaded
flowdule:resize	{ height }	Content height has changed
flowdule:navigate	{ path, step }	Customer moves between steps (1–4)
flowdule:booked	{ bookingId, confirmationCode }	Booking completed

---

Troubleshooting

Booking not showing?

• Check that your slug is correct
• Check that online booking is enabled under Settings → Online Booking

Events, web shop or gift cards not showing?

• Check that the module is enabled for your chain - the widget can only show modules you use
• Check that data-view is spelled events, shop or giftcard
• If you use data-event-id, the event must be public and not already finished

Wrong theme or language?

• data-theme="auto" follows the visitor’s system setting. Use light or dark to lock it
• Leave out data-locale if the widget should use your chain’s own language

Iframe too small?

• Increase the height value in your iframe code
• Use the widget script instead — it adjusts the height automatically

Booking works but looks odd?

• Make sure your site isn’t overriding iframe styling with global CSS
• Add style="border: none;" to the iframe