GUIDE

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)
Mattias Avelin
CTO

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

Alternativ A: Popup-fönster (visningsläge: 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
Alternativ B - Inbäddad på sidan (visningsläge: 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)

Förbestämda kliniker eller behandlingar

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
};
Ändra höjd på 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
};
Stäng av scroll på 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
};
Ändra innehåll i embed med query-parametrar

Du 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

Var hittar jag min API-nyckel?

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.

Var hittar jag behandlings-ID?

De tre vanligaste behandlings-ID:na är.

  • 78 - Akuttid
  • 83 - Basundersökning
  • 84 - 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.

Hur kan jag mäta antalet konverteringar?

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).

Jag har ingen som kan hjälpa mig med det här, vad gör jag?

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.

Brahegatan 10, 115 210 Stockholm
08 - 554 50 70hej@dentech.se

Kategori

LänkLänkLänkLänk

Kategori

LänkLänkLänkLänk

Kategori

LänkLänkLänkLänk

Kategori

LänkLänkLänkLänk
Copyright © 2022 Dentech AB
Biblioteksgatan 29, 114 35 Stockholm072 504 54 96hej@dentech.se

Produkter

LänkLänkLänkLänk

Kategori

LänkLänkLänkLänk

Kategori

LänkLänkLänkLänk

Kategori

LänkLänkLänkLänk
HemProdukterOm ossKontaktBoka demo
Copyright (c) 2024 Dentech AB.

Widgeten öppnas i ett stort fönster när kunden klickar på en "Boka tid"-knapp.

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. Beräkna height för header till detta där bokningen ska visas (valfritt)

⚠️

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