Embed your booking page on your own website

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.

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

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

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