Lägg till bokningswidget på din hemsida
Vår bokningswidget kräver bara några rader kod för att komma igång. Alla integrationer mot journalsystem är redan förberedda av oss så du slipper tekniskt krångel.
Vad behöver du?
- API-nyckel: En kod som identifierar ditt företag (du får denna från oss)
- Grundläggande åtkomst till din hemsidas kod (eller hjälp från din webbutvecklare)

Steg 1: Välj hur widgeten ska visas
Vår bokningswidget finns i två olika lägen: som popup eller inbäddad på sidan. Du väljer själv det som passar bäst för din webbplats och hur du vill att bokningen ska fungera för dina besökare.
Alternativ A: Popup-fönster (rekommenderas)
Widgeten öppnas i ett stort popup-fönster när användaren klickar på till exempel en "Boka tid"-knapp. I konfigurationen kallas detta visningsläge för modal
.
I korthet:
- Enklast att installera
- Fungerar på alla sidor utan att påverka designen
- Tar inte plats på sidan
Alternativ B: Inbäddad på sidan
Widgeten visas direkt på sidan som en del av innehållet. Detta läge kallas för embed
.
I korthet:
- Kan integreras direkt på vald sida
- Något mer teknisk uppsättning
- Fler anpassningsmöjligheter
Steg 2: Lägg till koden på din hemsida
modal
)1. Lägg till detta i <head> på din hemsida:
<script async type="module" src="https://booking-widget-prod-nj23eril7a-lz.a.run.app/v2/widgetloader.js"></script>
<script>
window.tdlWidgetConfig = {
mode: "modal",
apiToken: "DIN-API-NYCKEL-HÄR"
};
</script>
2. Lägg till en knapp som öppnar widgeten
För att användaren ska kunna öppna bokningsvyn behöver du lägga in en knapp någonstans på din sida.
Knappen behöver ha klassen tdl-booking-start
, det är den klass bokningswidgeten lyssnar efter för att veta vilken knapp som ska öppna bokningsformuläret.
<button class="tdl-booking-start">Boka tid</button>
Notera:
- Ni väljer själva vilken text som ska stå på knappen, det är inte tekniskt viktigt
- Ni kan ha flera sådana knappar på en sida om du vill, t.ex. en i headern och en i sidfoten – båda kommer öppna widgeten
embed
)1. Lägg till detta i <head> på din hemsida:
<script async type="module" src="https://booking-widget-prod-nj23eril7a-lz.a.run.app/v2/widgetloader.js"></script>
<script>
window.tdlWidgetConfig = {
mode: "embedded",
apiToken: "DIN-API-NYCKEL-HÄR"
};
</script>
2. Placera detta där du vill visa widgeten:
Lägg till ett element med id:t tdl-booking-widget
där du vill visa bokningswidgeten.
<div id="tdl-booking-widget"></div>
Notera:
- ID:t
tdl-booking-widget
måste vara exakt, det säger åt var widgeten ska laddas. - Placera denna kod där du vill att bokningswidgeten ska synas, t.ex. på din "Boka tid"-sida.
- Du kommer inte se något när du lägger till koden, widgeten laddas automatiskt när sidan öppnas av en användare.
3. Justera widgeten för sticky header:
⚠️
Har du ingen sticky header? Då kan du ignorera detta.
Om din webbplats har en header med position: sticky
eller fixed
, kan det påverka hur bokningswidgeten placeras och visas på sidan. För att ta detta i beaktning rekommenderar vi att du lägger till klassen calculate-sticky-header-for-widget
på ditt header-element:
<header class="calculate-sticky-header-for-widget"></header>
Vad händer då?
När du lagt till klassen i din header, gör widgetens JavaScript följande:
- Letar efter ett element med denna klass
- Beräknar dess höjd
- Justerar widgetens position, storlek och scrollbeteende, så att den inte hamnar bakom headern
Steg 3: Byt ut "DIN-API-NYCKEL-HÄR"
I koden ovan, ersätt "DIN-API-NYCKEL-HÄR
" med den riktiga nyckeln du fått från oss.
Exempel:
apiToken: "62c38d32-c4b4-4b1a-8549"
Steg 4: Testa att allt fungerar
När du har lagt in bokningswidgeten är det viktigt att testa att allt fungerar som det ska.
Gå gärna igenom hela bokningsflödet och gör en testbokning, så att du kan bekräfta att rätt kliniker och behandlingar visas och att allt laddar som det ska.
Kontrollera också att widgeten ser bra ut i olika webbläsare (till exempel Chrome, Safari och Firefox) och på olika enheter (dator, mobil och surfplatta).
Avancerade inställningar (valfritt)
Om du har flera kliniker eller behandlingar men bara vill visa vissa av dem, kan du lägga filtrering för clinicIds
och treatmentIds
i din konfiguration.
window.tdlWidgetConfig = {
mode: "modal",
apiToken: "DIN-API-TOKEN-HÄR",
clinicIds: ["KLINIK-ID-1", "KLINIK-ID-2"], // välj de kliniker du vill visa
treatmentIds: ["BEHANDLINGS-ID-1", "BEHANDLINGS-ID-2"] // välj de behandlingar du vill visa
};
embed
Om du önskar ge din widget en specifik höjd kan du lägga till parametern iframeHeight
i din konfiguration. Använd pixlar (t.ex. "600px") eller procent (t.ex. "100%").
window.tdlWidgetConfig = {
mode: "embedded",
apiToken: "DIN-API-TOKEN-HÄR",
iframeHeight: "600px" // Ange önskad höjd
};
embed
Som standard scrollar sidan automatiskt till widgetens top när användaren interagerar med den, till exempel vid val av behandling. Om du vill inaktivera det beteendet kan du sätta enableScrolling: false
.
window.tdlWidgetConfig = {
mode: "embedded",
apiToken: "DIN-API-TOKEN-HÄR",
enableScrolling: false // Stoppar automatisk scroll vid interaktion
};
embed
med query-parametrarDu kan styra startsidan och vilka kliniker och behandlingar som visas i widgeten genom att lägga till olika url-parametrar direkt i webbadressen.
Det är användbart om du vill visa olika innehåll på olika sidor – utan att ändra i koden.
Tillgängliga parameter:
clinicIds: string[] // Visa bara specifika kliniker
treatmentIds: string[] // Visa bara specifika behandlingar
initialScreen: string // Förvald startvy: 'city', 'clinic', 'treatment', 'appointment'
Exempel:
// Filtrera på bara akuttider
https://dinhemsida.se/boka?treatmentIds=78
// Kombinera med specifik klinik
https://dinhemsida.se/boka?clinicIds=5255&treatmentIds=78
// Visa lediga tider direkt
https://dinhemsida.se/boka?clinicIds=5255&treatmentIds=78&initialScreen=appointment
Behandlings-ID:n (exempel):
78 // Akuttid
83 // Basundersökning
84 // Hygienistbehandling
Vanliga frågor
Vi skickar ut din API-nyckel i samband med att vi sätter upp din bokningswidget. Se till att spara denna.
Om du har tappat bort din API-nyckel är välkommen att maila oss på support@dentech.se så hjälper vi dig.
De tre vanligaste behandlings-ID:na är.
78
- Akuttid83
- Basundersökning84
- Hygienistbehandling
Observera att dina behandlingar kan vara mappade annourlunda i våra system. Testa och säkerställ att filtret fungerar korrekt på din sida och att rätt behandling(ar) visas.
Vid behov av fler ID:n är du välkommen att kontakta support@dentech.se.
Bokningswidgeten är förberedd för spårning via Google Tag Manager och använder Enhanced Ecommerce (EEC) tillsammans med dataLayer-händelser. Det innebär att du enkelt kan sätta upp spårning i Google Analytics (eller andra analysverktyg) för att följa t.ex. antal konverteringar.
👉 Här kan du ladda ned vår guide om tracking (på engelska).
Du behöver inga avancerade tekniska kunskaper för att sätta upp bokningswidgeten – det räcker oftast med att kopiera och klistra in rätt kod.
Men om det ändå känns krångligt, och du saknar en egen teknisk kontakt, så samarbetar vi med flera duktiga webbutvecklare som kan hjälpa dig snabbt och smidigt.
Kontakta support@dentech.se så sätter vi ihop er direkt.