Implementeringsguide: Bokningswidget

Steg 1: Skaffa din API-nyckel

Du behöver en apiToken för att koppla widgeten till din klinik. Den får du från oss eller via ditt admin-gränssnitt.

Steg 2: Välj visningsläge

Alternativ 1: Inbäddad direkt på sidan

Lägg till följande i <head>:

<script async type="module" src="https://booking-widget-prod-nj23eril7a-lz.a.run.app/v2/widgetloader.js"></script>

Följt av konfigurationen:

<script>
  window.tdlWidgetConfig = {
    mode: "embedded",
    apiToken: "DIN_API_TOKEN_HÄR"
  };
</script>

Placera widgeten där den ska visas:

<div id="tdl-booking-widget"></div>

Obs! Om din sida har en klibbig header, lägg till klassen:

<header class="calculate-sticky-header-for-widget-x"></header>

Alternativ 2: Fullscreen-popup via knapp

Samma script som ovan i <head>.

Konfiguration:

<script>
  window.tdlWidgetConfig = {
    mode: "modal",
    apiToken: "DIN_API_TOKEN_HÄR"
  };
</script>

Knapp för att öppna widgeten:

<button class="tdl-booking-start-x">Boka tid</button>

Steg 3: Filtrera på kliniker eller behandlingar (valfritt)

Du kan lägga till klinik- och behandlingsfilter direkt i URL:en:

https://dinhemsida.se/boka?clinicIds=2893,2958&treatmentIds=78,207

Fler inställningar (frivilliga)

theme: "default"        // eller: diplomat, aristotel
language: "sv"          // språk: sv eller en
initialScreen: "clinic" // startvy: city, clinic, treatment, appointment
iframeHeight: "100%"    // höjd (för embedded mode)
enableScrolling: false  // förhindra scroll till toppen

Exempel på komplett konfiguration

<script>
  window.tdlWidgetConfig = {
    mode: "embedded",
    apiToken: "wef2f-232fsdf-jtyhe43",
    clinicIds: ["5253", "5254"],
    treatmentIds: ["78", "12"],
    iframeHeight: "100%",
    theme: "default",
    language: "sv",
    initialScreen: "clinic"
  };
</script>