Bygg inn bookingsiden på nettsiden din

🟢Beginner 5 min read

Lær hvordan du enkelt kan integrere FlowDule-bookingsiden din på din egen nettside med iframe eller widgeten vår.

Du kan la kundene dine booke direkte fra din egen nettside - uten at de trenger å forlate den. Du kan også bygge inn eventene dine, nettbutikken din eller salg av gavekort. FlowDule tilbyr to enkle måter å integrere på.

Før du starter

Du trenger din booking-slug - det er den delen av bookingadressen din som kommer før .flowdule.com. Hvis bookingsiden din f.eks. er klinik-nord.flowdule.com, er sluggen din klinik-nord.

Du finner sluggen din under Innstillinger → Nettbooking i FlowDule-appen.

---

Mulighet 1: Direkte iframe

Den enkleste metoden. Kopier HTML-koden nedenfor og lim den inn der du vil ha bookingskjemaet vist på nettsiden din.

<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 time"
></iframe>

Fordeler:

• Fungerer i alle CMS-systemer (WordPress, Wix, Squarespace, Webflow m.fl.)
• Ingen JavaScript kreves
• Full kontroll over plassering og størrelse

Tips:

• Juster height-verdien hvis innholdet klippes. Vi anbefaler minimum 700.
• En ren iframe har fast høyde. Vil du ha automatisk høydetilpasning, bruk widget-scriptet (mulighet 2) - eller lytt selv etter flowdule:resize-eventet, som beskrevet under “Avansert” nederst.

---

Mulighet 2: FlowDule Widget (anbefalt)

Widget-scriptet vårt håndterer alt automatisk - oppretting av iframe, automatisk høydetilpasning og valgfritt en “Book en time”-knapp med popup.

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

Inline-visning

Bookingskjemaet 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>

Popup-visning (modal)

En knapp som åpner bookingskjemaet i et overlegg:

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

Knappen settes automatisk inn der du plasserer script-taggen.

---

Velg hva widgeten skal vise

Med data-view bestemmer du hvilken del av FlowDule-siden din som bygges inn. Widgeten holder seg innenfor det valgte området, så besøkende ikke kan navigere videre til de andre modulene dine inne i iframen.

data-view	Viser
booking (standard)	Bookingflyten: sted, tjeneste, tid og bekreftelse
events	Eventlisten din - eller ett bestemt event med data-event-id
shop	Nettbutikken din med produkter, handlekurv og kasse
giftcard	Kjøp av gavekort

Utelater du data-view, oppfører widgeten seg akkurat som før: den viser bookingflyten.

Eksempel 1: Booking, bygget inn på siden

Minst mulig oppsett:

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

Eksempel 2: Nettbutikk 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: Ett bestemt event som knapp

Knappen åpner eventet i et overlegg - fint til en “Kjøp billett”-knapp ved siden av din egen omtale av 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="Kjøp billett"
></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 bookingflyten

Har du flere steder, kan du hoppe over stedsvalget, og du kan forhåndsvelge en bestemt tjeneste:

<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 krever data-location-id, fordi tjenestene hører til et sted.

Du kan ha flere widgeter på samme side - f.eks. booking øverst og nettbutikk lenger ned. Gi hver widget sitt eget data-target-element.

---

Widget-innstillinger

Attributt	Påkrevd	Standard	Beskrivelse
data-slug	Ja	-	Din booking-slug
data-view	Nei	booking	Hva som vises: booking, events, shop eller giftcard
data-event-id	Nei	-	Åpner ett bestemt event (krever data-view="events")
data-location-id	Nei	-	Starter direkte på ett sted (krever data-view="booking")
data-service-id	Nei	-	Forhåndsvelger en tjeneste (krever data-location-id)
data-theme	Nei	auto	light, dark eller auto (følger den besøkendes systeminnstilling)
data-locale	Nei	Kjedens språk	Språk: da, en eller de. Utelates den, brukes ditt eget språk i FlowDule
data-target	Nei	Automatisk	ID på HTML-elementet der innholdet skal vises
data-mode	Nei	inline	inline (direkte) eller modal (popup)
data-button-text	Nei	”Book en tid”	Knappetekst (kun modal-visning)
data-button-color	Nei	#2D5A5C	Knappefarge (kun modal-visning)
data-show-map	Nei	Skjult	true viser kart over stedene
data-show-contact	Nei	Skjult	true viser kontaktlenken som ellers er skjult i innebygd visning
data-background	Nei	transparent	surface gir widgeten sin egen bakgrunn

---

Slik gjør du det i WordPress

Med Elementor

1. Legg til en HTML-widget der du vil ha bookingen
2. Lim inn iframe- eller widget-koden
3. Lagre og forhåndsvis

Med WordPress Block Editor (Gutenberg)

1. Legg til en Custom HTML-blokk
2. Lim inn koden
3. Bytt til “Forhåndsvis” for å se resultatet

Med et WordPress-tema

Lim inn koden i malfilen din (f.eks. page-booking.php) der du vil ha skjemaet.

---

Slik gjør du det i andre CMS-systemer

Wix

1. Gå til siden din i Wix Editor
2. Klikk Legg til → Embed Code → Custom Element eller HTML iframe
3. Lim inn koden

Squarespace

1. Rediger ønsket side
2. Legg til en Code Block
3. Lim inn koden og lagre

Webflow

1. Dra en Embed-komponent inn på siden din
2. Lim inn koden
3. Publiser siden din

---

Avansert: Lytt etter booking-eventer

Hvis du vil reagere på når en kunde har fullført en booking (f.eks. til sporing eller visning av en takkemelding), kan du lytte etter postMessage-eventer:

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

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

Alle tilgjengelige eventer

Event	Data	Når
flowdule:ready	—	Bookingskjemaet er lastet
flowdule:resize	{ height }	Innholdet har endret høyde
flowdule:navigate	{ path, step }	Kunden bytter steg (1–4)
flowdule:booked	{ bookingId, confirmationCode }	Booking fullført

---

Feilsøking

Bookingen vises ikke?

• Sjekk at sluggen din er riktig
• Sjekk at nettbooking er aktivert under Innstillinger → Nettbooking

Eventer, nettbutikk eller gavekort vises ikke?

• Sjekk at modulen er slått på for kjeden din - widgeten kan bare vise moduler du bruker
• Sjekk at data-view er stavet events, shop eller giftcard
• Bruker du data-event-id, må eventet være offentlig og ikke over

Widgeten står i feil tema eller språk?

• data-theme="auto" følger den besøkendes systeminnstilling. Sett light eller dark hvis den skal låses
• Utelat data-locale hvis widgeten skal bruke kjedens eget språk

Iframen er for liten?

• Øk height-verdien i iframe-koden din
• Bruk widget-scriptet i stedet — det tilpasser høyden automatisk

Bookingen virker, men ser rar ut?

• Sørg for at siden din ikke overstyrer iframe-stylingen med global CSS
• Legg til style="border: none;" på iframen