Bädda in din bokningssida på din webbplats

🟢Beginner 5 min read

Lär dig hur du enkelt integrerar din FlowDule-bokningssida på din egen webbplats med iframe eller vår widget.

Du kan låta dina kunder boka direkt från din egen webbplats - utan att de behöver lämna den. Du kan också bädda in dina event, din webbshop eller försäljning av presentkort. FlowDule erbjuder två enkla sätt att integrera.

Innan du börjar

Du behöver din boknings-slug - det är den del av din bokningsadress som kommer före .flowdule.com. Om din bokningssida t.ex. är klinik-nord.flowdule.com är din slug klinik-nord.

Du hittar din slug under Inställningar → Onlinebokning i FlowDule-appen.

---

Alternativ 1: Direkt iframe

Den enklaste metoden. Kopiera HTML-koden nedan och klistra in den där du vill att bokningsformuläret ska visas på din webbplats.

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

Fördelar:

• Fungerar i alla CMS-system (WordPress, Wix, Squarespace, Webflow m.fl.)
• Ingen JavaScript krävs
• Full kontroll över placering och storlek

Tips:

• Justera height-värdet om innehållet klipps. Vi rekommenderar minst 700.
• En ren iframe har fast höjd. Vill du ha automatisk höjdanpassning, använd widget-scriptet (alternativ 2) - eller lyssna själv på flowdule:resize-eventet, som beskrivs under “Avancerat” längst ner.

---

Alternativ 2: FlowDule Widget (rekommenderas)

Vårt widget-script sköter allt automatiskt - skapande av iframe, automatisk höjdanpassning och valfritt en “Boka en tid”-knapp med popup.

Scriptet ligger på din egen bokningsadress, så src börjar alltid med din slug: https://klinik-nord.flowdule.com/widget.js.

Inline-visning

Bokningsformuläret visas direkt på sidan:

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

Popup-visning (modal)

En knapp som öppnar bokningsformuläret i ett overlay:

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

Knappen infogas automatiskt där du placerar script-taggen.

---

Välj vad widgeten ska visa

Med data-view bestämmer du vilken del av din FlowDule-sida som bäddas in. Widgeten håller sig inom det valda området, så besökare kan inte navigera vidare till dina andra moduler inne i iframen.

data-view	Visar
booking (standard)	Bokningsflödet: plats, tjänst, tid och bekräftelse
events	Din eventlista - eller ett specifikt event med data-event-id
shop	Din webbshop med produkter, varukorg och kassa
giftcard	Köp av presentkort

Utelämnar du data-view beter sig widgeten precis som tidigare: den visar bokningsflödet.

Exempel 1: Bokning, inbäddad på sidan

Minsta möjliga uppsättning:

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

Exempel 2: Webbshop i mörkt tema

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

Exempel 3: Ett specifikt event som knapp

Knappen öppnar eventet i ett overlay - perfekt för en “Köp biljett”-knapp bredvid din egen beskrivning av evenemanget:

<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öp biljett"
></script>

Exempel 4: Presentkort

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

Starta på ett specifikt ställe i bokningsflödet

Har du flera platser kan du hoppa över platsvalet, och du kan förvälja en specifik tjänst:

<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, eftersom tjänsterna hör till en plats.

Du kan ha flera widgetar på samma sida - t.ex. bokning högst upp och webbshop längre ner. Ge varje widget sitt eget data-target-element.

---

Widget-inställningar

Attribut	Krävs	Standard	Beskrivning
data-slug	Ja	-	Din boknings-slug
data-view	Nej	booking	Vad som visas: booking, events, shop eller giftcard
data-event-id	Nej	-	Öppnar ett specifikt event (kräver data-view="events")
data-location-id	Nej	-	Startar direkt på en plats (kräver data-view="booking")
data-service-id	Nej	-	Förväljer en tjänst (kräver data-location-id)
data-theme	Nej	auto	light, dark eller auto (följer besökarens systeminställning)
data-locale	Nej	Kedjans språk	Språk: da, en eller de. Utelämnas den används ditt eget språk i FlowDule
data-target	Nej	Automatiskt	ID på det HTML-element där innehållet ska visas
data-mode	Nej	inline	inline (direkt) eller modal (popup)
data-button-text	Nej	”Book en tid”	Knapptext (endast modal-visning)
data-button-color	Nej	#2D5A5C	Knappfärg (endast modal-visning)
data-show-map	Nej	Dold	true visar en karta över platserna
data-show-contact	Nej	Dold	true visar kontaktlänken som annars är dold i inbäddad visning
data-background	Nej	transparent	surface ger widgeten en egen bakgrund

---

Så gör du i WordPress

Med Elementor

1. Lägg till en HTML-widget där du vill ha bokningen
2. Klistra in iframe- eller widget-koden
3. Spara och förhandsgranska

Med WordPress Block Editor (Gutenberg)

1. Lägg till ett Custom HTML-block
2. Klistra in koden
3. Växla till “Förhandsgranska” för att se resultatet

Med ett WordPress-tema

Klistra in koden i din mallfil (t.ex. page-booking.php) där du vill ha formuläret.

---

Så gör du i andra CMS-system

Wix

1. Gå till din sida i Wix Editor
2. Klicka på Lägg till → Embed Code → Custom Element eller HTML iframe
3. Klistra in koden

Squarespace

1. Redigera önskad sida
2. Lägg till ett Code Block
3. Klistra in koden och spara

Webflow

1. Dra in en Embed-komponent på din sida
2. Klistra in koden
3. Publicera din sida

---

Avancerat: Lyssna på boknings-event

Om du vill reagera på när en kund har slutfört en bokning (t.ex. för spårning eller ett tackmeddelande) kan du lyssna på postMessage-event:

<script>
  window.addEventListener("message", function (event) {
    // Bekräfta att meddelandet kommer från just din bokningsadress
    if (event.origin !== "https://klinik-nord.flowdule.com") return;

    if (event.data.type === "flowdule:booked") {
      // Kunden har bokat!
      console.log("Bokning slutförd:", event.data.bookingId);
      console.log("Bekräftelsekod:", event.data.confirmationCode);
    }
  });
</script>

Alla tillgängliga event

Event	Data	När
flowdule:ready	—	Bokningsformuläret har laddats
flowdule:resize	{ height }	Innehållet har ändrat höjd
flowdule:navigate	{ path, step }	Kunden byter steg (1–4)
flowdule:booked	{ bookingId, confirmationCode }	Bokning slutförd

---

Felsökning

Bokningen visas inte?

• Kontrollera att din slug är korrekt
• Kontrollera att onlinebokning är aktiverad under Inställningar → Onlinebokning

Event, webbshop eller presentkort visas inte?

• Kontrollera att modulen är aktiverad för din kedja - widgeten kan bara visa moduler du använder
• Kontrollera att data-view är stavat events, shop eller giftcard
• Använder du data-event-id måste eventet vara publikt och inte ha passerat

Widgeten har fel tema eller språk?

• data-theme="auto" följer besökarens systeminställning. Sätt light eller dark om det ska låsas
• Utelämna data-locale om widgeten ska använda kedjans eget språk

Iframen är för liten?

• Öka height-värdet i din iframe-kod
• Använd widget-scriptet i stället — det anpassar höjden automatiskt

Bokningen fungerar men ser konstig ut?

• Se till att din sida inte skriver över iframe-stylingen med global CSS
• Lägg till style="border: none;" på iframen