Widget Integration Guide

Hvad er widgets?

Widgets er små, selvstændige komponenter som du kan integrere direkte på din eksisterende hjemmeside. De giver dine kunder mulighed for at se holdoversigten, logge ind, booke hold og se deres medlemskab - alt sammen uden at forlade din side.

💡

Perfekt til dig der...

✓Allerede har en hjemmeside du er glad for
✓Vil have fuld kontrol over design og branding
✓Ønsker en sømløs brugeroplevelse for dine kunder

Fordele ved widgets

⚡

Nem integration

Tilføj blot ét script-tag og brug vores HTML-komponenter. Ingen kodning påkrævet.

🎨

Dit design

Widgets tilpasser sig automatisk dit studie's farver og branding fra Holdstyring.

🔒

Sikker & pålidelig

API-nøgle sikkerhed, krypterede tokens og rate limiting beskytter dine data.

📱

Responsivt

Fungerer perfekt på alle enheder - desktop, tablet og mobil.

🔄

Realtidsdata

Altid opdateret med ledige pladser, bookinger og medlemskabsinfo.

🌐

Isoleret

Shadow DOM sikrer at widgets ikke påvirker eller påvirkes af din sides styling.

Kom i gang

Følg disse tre simple trin for at få widgets op at køre på din hjemmeside.

Opret en API-nøgle

Log ind på din Holdstyring-administration og gå til Indstillinger → Widgets. Klik på "Opret ny API-nøgle".

ℹ️

Slå først widgets til

Widgets skal være aktiveret på din konto under Indstillinger → Funktioner → Hjemmeside. Er de ikke det, afvises alle kald — også selvom du har en gyldig API-nøgle.

holdstyring.dk/admin/widgets

API-nøgler

Min hjemmeside

wk_live_abc123...

Aktiv

⚠️

Vigtigt om API-nøgler

Din API-nøgle er synlig i din kildekode, men den kan kun bruges fra de domæner du angiver (f.eks. www.mit-studie.dk). Tilføj altid dine tilladte domæner for ekstra sikkerhed.

Installer widget-scriptet

Tilføj følgende script-tag til din hjemmeside, helst lige før </body>:

Tilføj til din HTMLhtml

<script src="https://widgets.holdstyring.dk/v1/holdstyring-widgets.min.js" async></script>

💡 Tip: async attributten sikrer at scriptet ikke blokerer din sides indlæsning.

Tilføj widgets til din side

Nu kan du tilføje widgets hvor som helst på din side ved at bruge vores custom HTML-elementer:

Eksempel: Holdoversigthtml

<!-- Holdoversigt med booking -->
<holdstyring-schedule api-key="wk_live_din_api_noegle" base-url="https://dit-studio.holdstyring.dk"></holdstyring-schedule>

<!-- Login formular -->
<holdstyring-login api-key="wk_live_din_api_noegle" base-url="https://dit-studio.holdstyring.dk"></holdstyring-login>

<!-- Brugerens bookinger -->
<holdstyring-bookings api-key="wk_live_din_api_noegle" base-url="https://dit-studio.holdstyring.dk"></holdstyring-bookings>

<!-- Medlemskabsoversigt -->
<holdstyring-membership api-key="wk_live_din_api_noegle" base-url="https://dit-studio.holdstyring.dk"></holdstyring-membership>

💡

Både api-key og base-url skal med

base-url er dit studies adresse, så widgeten ved hvor den skal hente data. Den færdige kode med din egen nøgle og base-url ligger klar under Indstillinger → Widgets i admin — kopiér derfra, så er begge dele rigtige. Class Booking-studier bruger deres class-booking.com-adresse.

🎉

Det var det!

Dine widgets er nu klar til brug. De vil automatisk hente data fra dit Holdstyring-studie og vise dine hold, priser og tilgængelighed i realtid.

Tilgængelige widgets

holdstyring-schedule

Viser din holdoversigt med mulighed for booking. Understøtter kalender-, kort- og sæsonvisning.

Morgen Flow Yoga

Mandag 08:00 - 09:00

4 pladser

med Louise

Yin Yoga

Mandag 18:00 - 19:30

2 pladser

Attributter

Attribut	Type	Standard	Beskrivelse
api-key	string	-	Din API-nøgle (påkrævet)
view	string	"cards"	"cards", "calendar" eller "seasons"
show-filters	boolean	true	Vis filtre for holdtype, instruktør etc.

Eksempel med alle attributterhtml

<holdstyring-schedule
  api-key="wk_live_abc123"
  base-url="https://dit-studio.holdstyring.dk"
  view="calendar"
  show-filters="true"
  theme-primary="#8B5CF6"
></holdstyring-schedule>

Alle widgets

De fire ovenfor er de mest brugte. Her er hele kataloget — alle de widget-tags du kan sætte ind. Du finder dem også i admin under Indstillinger → Widgets, hvor du kan kopiere det færdige tag med din egen nøgle og base-url sat ind.

<holdstyring-schedule>Holdoversigt med booking

<holdstyring-login>Login og opret bruger

<holdstyring-bookings>Brugerens egne bookinger

<holdstyring-membership>Medlemskab og klippekort

<holdstyring-pricing>Prisplaner og pakker

<holdstyring-class-types>Holdtyper og beskrivelser

<holdstyring-instructors>Instruktøroversigt

<holdstyring-upcoming-classes>Kommende hold

<holdstyring-weekly-schedule>Ugekalender

<holdstyring-seasons>Forløb og kurser

<holdstyring-treatments>Behandlinger og priser

<holdstyring-rooms>Lokaler og faciliteter

<holdstyring-blog>Seneste blogindlæg

<holdstyring-testimonials>Kundeanmeldelser

<holdstyring-contact-info>Kontaktoplysninger

<holdstyring-contact-form>Kontaktformular

<holdstyring-newsletter>Nyhedsbrev-tilmelding

<holdstyring-gift-cards>Gavekort-promotion

<holdstyring-waitlists>Ventelister for forløb

<holdstyring-campaign-banner>Kampagnebanner

<holdstyring-retreats>Oversigt over retreats

<holdstyring-retreat>Enkelt retreat med booking (kræver retreat-id)

Alle widgets tager de samme api-key- og base-url-attributter som eksemplerne ovenfor.holdstyring-retreat kræver desuden et retreat-id.

Tilpasning & Theming

Widgets henter automatisk dit studie's branding fra Holdstyring, men du kan også tilpasse farver og styling direkte via attributter.

Tilgængelige theme-attributter

Attribut	Eksempel	Beskrivelse
theme-primary	`#8B5CF6`	Primær farve (knapper, links)
theme-secondary	`#EC4899`	Sekundær farve (accenter)
theme-font	`Montserrat`	Font familie
theme-radius	`1rem`	Border radius på elementer
theme-mode	`dark`	"light" eller "dark"

Eksempel: Lilla tema med Montserrat fonthtml

<holdstyring-schedule
  api-key="wk_live_abc123"
  base-url="https://dit-studio.holdstyring.dk"
  theme-primary="#8B5CF6"
  theme-secondary="#EC4899"
  theme-font="Montserrat"
  theme-radius="12px"
></holdstyring-schedule>

Standard (Emerald)

Lilla tema

Pink tema

Komplette eksempler

Booking-side med alle widgets

komplet-booking-side.htmlhtml

<!DOCTYPE html>
<html lang="da">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Book en klasse - Mit Yoga Studie</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
    }
    .widget-section {
      margin-bottom: 3rem;
    }
    h2 {
      margin-bottom: 1rem;
      color: #374151;
    }
    .user-area {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>Mit Yoga Studie</h1>
    <nav><!-- Din navigation --></nav>
  </header>

  <main>
    <!-- Login / Bruger info -->
    <section class="widget-section">
      <holdstyring-login
        api-key="wk_live_din_api_noegle"
        base-url="https://dit-studio.holdstyring.dk"
        id="login-widget"
      ></holdstyring-login>
    </section>

    <!-- Holdoversigt -->
    <section class="widget-section">
      <h2>Vores hold</h2>
      <holdstyring-schedule
        api-key="wk_live_din_api_noegle"
        base-url="https://dit-studio.holdstyring.dk"
        view="cards"
        show-filters="true"
      ></holdstyring-schedule>
    </section>

    <!-- Brugerens dashboard -->
    <section class="widget-section user-area">
      <div>
        <h2>Mine bookinger</h2>
        <holdstyring-bookings api-key="wk_live_din_api_noegle" base-url="https://dit-studio.holdstyring.dk"></holdstyring-bookings>
      </div>
      <div>
        <h2>Mit medlemskab</h2>
        <holdstyring-membership api-key="wk_live_din_api_noegle" base-url="https://dit-studio.holdstyring.dk"></holdstyring-membership>
      </div>
    </section>
  </main>

  <!-- Holdstyring Widget Script -->
  <script src="https://widgets.holdstyring.dk/v1/holdstyring-widgets.min.js" async></script>

  <!-- Event listeners -->
  <script>
    document.getElementById('login-widget').addEventListener('login', (e) => {
      console.log('Velkommen,', e.detail.user.firstName)
    })
  </script>
</body>
</html>

Minimal integration (kun holdoversigt)

minimal.htmlhtml

<!-- Tilføj dette hvor du vil vise holdoversigten -->
<holdstyring-schedule api-key="wk_live_din_api_noegle" base-url="https://dit-studio.holdstyring.dk"></holdstyring-schedule>

<!-- Tilføj scriptet før </body> -->
<script src="https://widgets.holdstyring.dk/v1/holdstyring-widgets.min.js" async></script>

Platform-guider

🧩

WordPress: brug vores plugin «Class Booking»

Anbefalet

Den klart nemmeste vej hvis du er på WordPress. Du slipper for at røre footer.php eller indsætte script-tags i hånden — plugin'et står for det hele og tilføjer automatisk dit WordPress-domæne til nøglens tilladte domæner med ét klik.

1Installer plugin’et «Class Booking» i WordPress (Plugins → Tilføj nyt).
2Forbind én gang med din API-nøgle fra Indstillinger → Widgets. Plugin’et whitelister automatisk dit WordPress-domæne.
3Indsæt holdoversigten med Gutenberg-blokken «Class Booking» eller shortcoden [class_booking type="schedule"]. Færdig — og gratis.

📣 Plugin'et udgives på WordPress.org i disse dage (det er lige nu i review hos WordPress). Så snart det er godkendt, finder du det her: https://wordpress.org/plugins/class-booking-holdstyring/. Indtil da kan du bruge den manuelle metode nedenfor.

Manuel metode (alle platforme)

Foretrækker du at gøre det i hånden — eller er du på en anden platform end WordPress — er det samme to trin overalt: læg loader-scriptet ét sted (helst i footeren, så det ikke bliver strippet), og sæt widget-tags ind hvor de skal vises. Her er de præcise steder pr. platform.

🧩

WordPress

1Loader-script: Udseende → Temaeditor → footer.php (lige før </body>), eller et plugin som «Insert Headers and Footers» (Footer).
2Widget-tags: indsæt dem i en «Custom HTML»-blok på den side de skal vises.

⚠️ Vær opmærksom: Læg ALDRIG loader-scriptet i en page-builder-HTML-boks (Elementor, Kubio m.fl.) — den kan strippe scriptet, så widgets aldrig loader. Selve widget-tags må gerne stå i en HTML-boks.

⬛

Squarespace

1Loader-script: Indstillinger → Avanceret → Code Injection → Footer.
2Widget-tags: tilføj en «Code Block» på siden og indsæt dem der.

⚠️ Vær opmærksom: Code Blocks kræver et Business-abonnement eller højere — på lavere planer er feltet ikke tilgængeligt.

🔷

Wix

1Loader-script: Settings → Custom Code → Add Custom Code → placering «Body - end», «All pages».
2Widget-tags: tilføj et «Embed → Embed HTML»-element og indsæt dem.

⚠️ Vær opmærksom: Giv Embed-elementet rigelig højde — Wix beskærer indhold der er højere end elementets faste højde.

🌊

Webflow

1Loader-script: Project Settings → Custom Code → Footer Code.
2Widget-tags: træk et «Embed»-element ind på siden og indsæt dem.

⚠️ Vær opmærksom: Embed-elementet har en tegngrænse — hold loader-scriptet i site-footeren og kun tags i embed’et.

Fejlfinding

Viser en widget en fejl i stedet for indhold, står der næsten altid en kode i boksen. Find koden herunder — så ved du præcis hvad der skal rettes.

⚠️

Udfyld altid «Tilladte domæner» — det er påkrævet

Admin-siden kalder feltet «valgfrit», men det passer ikke: en tom liste afviser ALLE kald (fejlen ORIGIN_NOT_ALLOWED). Skriv altid mindst ét domæne på nøglen, fx www.mit-studie.dk. Bruger du WordPress-plugin'et, sættes domænet automatisk.

Fejlkode	Hvad betyder det?	Sådan retter du det
ORIGIN_NOT_ALLOWED	Det domæne siden kører på står ikke på nøglens tilladte domæner.	Tilføj domænet under Indstillinger → Widgets → din nøgle → Tilladte domæner. Husk at en tom liste afviser alt.
INVALID_API_KEY	Nøglen er forkert eller ugyldig.	Indsæt den fulde nøgle — den vises kun én gang ved oprettelsen. Brug ikke det forkortede `wk_live_…` der står i nøgle-listen bagefter.
MISSING_API_KEY	`api-key`-attributten mangler helt på tagget.	Tilføj `api-key="…"` på widget-tagget. Kopiér hele tagget fra admin, så kommer den med.
WIDGETS_DISABLED	Widgets er ikke slået til på din konto.	Slå dem til under Indstillinger → Funktioner → Hjemmeside. Uden det afvises kald selv med gyldig nøgle.
NETWORK_ERROR	Widgeten kan ikke finde eller nå dit studie (manglende host).	Tilføj `tenant-slug="dit-studie"` eller `base-url="https://dit-studio.holdstyring.dk"` på tagget.
RATE_LIMITED	Der er sendt for mange kald på kort tid.	Vent et øjeblik og prøv igen. Opstår typisk hvis siden genindlæser i en løkke, eller mange widgets henter data samtidig.
Tom kalender	Widgeten loader fint, men viser ingen hold.	Der er enten ingen kommende hold i perioden, eller et holdtype-filter skjuler dem. Tjek at der ligger offentlige hold frem i tiden, og at filteret ikke er for snævert.

Opsætningsfejl som disse vises altid på engelsk, fordi de henvender sig til den der bygger siden. Dine kunder ser dem aldrig, så længe widgeten er sat rigtigt op.

Ofte stillede spørgsmål

Påvirker widgets min sides hastighed?▼

Nej, scriptet indlæses asynkront og påvirker ikke din sides indlæsningstid. Widgets renderes først når de bliver synlige.

Kan jeg style widgets med min egen CSS?▼

Widgets bruger Shadow DOM, så de er isoleret fra din sides CSS. Du kan tilpasse farver og fonts via theme-attributterne, eller bruge CSS custom properties.

Virker widgets på WordPress/Wix/Squarespace?▼

Ja! Widgets virker på alle platforme der tillader custom HTML. Du skal blot indsætte script-tagget og widget-elementerne.

Hvad sker der hvis min API-nøgle lækker?▼

API-nøgler er begrænset til specifikke domæner, så de kan kun bruges fra din godkendte hjemmeside. Du kan altid deaktivere og oprette nye nøgler i admin.

Kan jeg have flere widgets på samme side?▼

Ja, du kan have så mange widgets du vil. De deler automatisk login-status, så brugeren kun behøver logge ind én gang.

Understøtter widgets flere sprog?▼

Ja. Widgets følger automatisk dit studies sprog (indstillet under Indstillinger) og understøtter dansk, engelsk, tysk, svensk, norsk og spansk. Du skal ikke sætte noget op. Kun opsætningsfejl — fx en manglende api-key eller base-url — vises altid på engelsk, da de henvender sig til den der bygger siden.

Brug for hjælp?

Vores team er klar til at hjælpe dig med at få det meste ud af dine widgets. Vi tilbyder også gratis opsætningshjælp for nye kunder.

Integrer booking på dit eget website