Integrer din bookingside på din egen hjemmeside

🟢Begynder 5 min læsetid

Lær hvordan du nemt kan integrere din FlowDule bookingside på din egen hjemmeside med iframe eller vores widget.

Du kan lade dine kunder booke direkte fra din egen hjemmeside - uden at de behøver forlade den. Du kan også indlejre dine events, din webshop eller salg af gavekort. FlowDule tilbyder to nemme måder at integrere på.

Før du starter

Du skal bruge din booking-slug - det er den del af din bookingadresse, der kommer før .flowdule.com. Hvis din bookingside f.eks. er klinik-nord.flowdule.com, er din slug klinik-nord.

Du finder din slug under Indstillinger → Online booking i FlowDule-appen.

---

Mulighed 1: Direkte iframe

Den simpleste metode. Kopier nedenstående HTML-kode og indsæt den, hvor du vil have bookingformularen vist på din hjemmeside.

<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 en tid"
></iframe>

Fordele:

• Virker i alle CMS-systemer (WordPress, Wix, Squarespace, Webflow, m.fl.)
• Ingen JavaScript påkrævet
• Fuld kontrol over placering og størrelse

Tips:

• Juster height værdien, hvis indholdet klippes. Vi anbefaler minimum 700.
• En ren iframe har fast højde. Vil du have automatisk højdetilpasning, så brug widget-scriptet (mulighed 2) - eller lyt selv efter flowdule:resize-eventet, som beskrevet under “Avanceret” nederst.

---

Mulighed 2: FlowDule Widget (anbefalet)

Vores widget-script håndterer alt automatisk - oprettelse af iframe, automatisk højdetilpasning, og valgfrit en “Book en tid”-knap med pop-up.

Scriptet ligger på din egen bookingadresse, så src starter altid med din slug: https://klinik-nord.flowdule.com/widget.js.

Inline-visning

Booking-formularen vises direkte på siden:

<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-visning (modal)

En knap som åbner bookingformularen i et overlay:

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

Knappen indsættes automatisk, hvor du placerer script-tagget.

---

Vælg hvad widgeten skal vise

Med data-view bestemmer du, hvilken del af din FlowDule-side der indlejres. Widgeten holder sig inden for det valgte område, så besøgende ikke kan navigere videre til dine andre moduler inde i iframen.

data-view	Viser
booking (standard)	Bookingflowet: lokation, ydelse, tid og bekræftelse
events	Din eventliste - eller ét bestemt event med data-event-id
shop	Din webshop med produkter, kurv og kasse
giftcard	Køb af gavekort

Udelader du data-view, opfører widgeten sig præcis som før: den viser bookingflowet.

Eksempel 1: Booking, indlejret på siden

Den mindst mulige opsætning:

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

Eksempel 2: Webshop i mørkt tema

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

Eksempel 3: Ét bestemt event som knap

Knappen åbner eventet i et overlay - god til en “Køb billet”-knap ved siden af din egen omtale af arrangementet:

<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="Køb billet"
></script>

Eksempel 4: Gavekort

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

Start et bestemt sted i bookingflowet

Har du flere lokationer, kan du springe lokationsvalget over, og du kan prævælge en bestemt ydelse:

<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 kræver data-location-id, fordi ydelserne hører til en lokation.

Du kan have flere widgets på samme side - fx booking i toppen og webshop længere nede. Giv hver widget sit eget data-target-element.

---

Widget-indstillinger

Attribut	Påkrævet	Standard	Beskrivelse
data-slug	Ja	-	Din booking-slug
data-view	Nej	booking	Hvad der vises: booking, events, shop eller giftcard
data-event-id	Nej	-	Åbner ét bestemt event (kræver data-view="events")
data-location-id	Nej	-	Starter direkte på én lokation (kræver data-view="booking")
data-service-id	Nej	-	Prævælger en ydelse (kræver data-location-id)
data-theme	Nej	auto	light, dark eller auto (følger den besøgendes systemindstilling)
data-locale	Nej	Kædens sprog	Sprog: da, en eller de. Udelades den, bruges dit eget sprog i FlowDule
data-target	Nej	Automatisk	ID på det HTML-element, hvor indholdet skal vises
data-mode	Nej	inline	inline (direkte) eller modal (pop-up)
data-button-text	Nej	”Book en tid”	Knaptekst (kun modal-visning)
data-button-color	Nej	#2D5A5C	Knapfarve (kun modal-visning)
data-show-map	Nej	Skjult	true viser kort over lokationer
data-show-contact	Nej	Skjult	true viser kontaktlinket, der ellers er skjult i indlejret visning
data-background	Nej	transparent	surface giver widgeten sin egen baggrund

---

Sådan gør du i WordPress

Med Elementor

1. Tilføj en HTML-widget, hvor du vil have booking
2. Indsæt iframe- eller widget-koden
3. Gem og forhåndsvis

Med WordPress Block Editor (Gutenberg)

1. Tilføj en Custom HTML-blok
2. Indsæt koden
3. Skift til “Forhåndsvis” for at se resultatet

Med et WordPress-tema

Indsæt koden i din template-fil (f.eks. page-booking.php) der, hvor du vil have formularen.

---

Sådan gør du i andre CMS-systemer

Wix

1. Gå til din side i Wix Editor
2. Klik Tilføj → Embed Code → Custom Element eller HTML iframe
3. Indsæt koden

Squarespace

1. Rediger den ønskede side
2. Tilføj en Code Block
3. Indsæt koden og gem

Webflow

1. Træk en Embed-komponent ind på din side
2. Indsæt koden
3. Publicer din side

---

Avanceret: Lyt efter booking-events

Hvis du vil reagere på, hvornår en kunde har gennemført en booking (f.eks. til tracking eller visning af en tak-besked), kan du lytte efter postMessage-events:

<script>
  window.addEventListener("message", function (event) {
    // Bekræft at beskeden kommer fra netop din bookingadresse
    if (event.origin !== "https://klinik-nord.flowdule.com") return;

    if (event.data.type === "flowdule:booked") {
      // Kunden har booket!
      console.log("Booking gennemført:", event.data.bookingId);
      console.log("Bekræftelseskode:", event.data.confirmationCode);
    }
  });
</script>

Alle tilgængelige events

Event	Data	Hvornår
flowdule:ready	—	Bookingformularen er indlæst
flowdule:resize	{ height }	Indholdet har ændret højde
flowdule:navigate	{ path, step }	Kunden skifter trin (1–4)
flowdule:booked	{ bookingId, confirmationCode }	Booking gennemført

---

Fejlfinding

Booking vises ikke?

• Tjek at din slug er korrekt
• Tjek at online booking er aktiveret under Indstillinger → Online booking

Events, webshop eller gavekort vises ikke?

• Tjek at modulet er slået til for din kæde - widgeten kan kun vise moduler, du bruger
• Tjek at data-view er stavet som events, shop eller giftcard
• Bruger du data-event-id, skal eventet være offentligt og ikke overstået

Widgeten står i forkert tema eller sprog?

• data-theme="auto" følger den besøgendes systemindstilling. Sæt light eller dark, hvis den skal låses
• Udelad data-locale, hvis widgeten skal bruge kædens eget sprog

Iframe er for lille?

• Forøg height-værdien i din iframe-kode
• Brug widget-scriptet i stedet — det tilpasser højden automatisk

Booking virker, men ser underligt ud?

• Sørg for at din side ikke overskriver iframe-styling med global CSS
• Tilføj style="border: none;" til iframe’en