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".
API-nøgler
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>:
<script src="https://widgets.holdstyring.dk/v1/yoga-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:
<!-- Holdoversigt med booking -->
<yoga-schedule api-key="wk_live_din_api_noegle"></yoga-schedule>
<!-- Login formular -->
<yoga-login api-key="wk_live_din_api_noegle"></yoga-login>
<!-- Brugerens bookinger -->
<yoga-bookings api-key="wk_live_din_api_noegle"></yoga-bookings>
<!-- Medlemskabsoversigt -->
<yoga-membership api-key="wk_live_din_api_noegle"></yoga-membership>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
yoga-schedule
Viser din holdoversigt med mulighed for booking. Understøtter kalender-, kort- og sæsonvisning.
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. |
<yoga-schedule
api-key="wk_live_abc123"
view="calendar"
show-filters="true"
theme-primary="#8B5CF6"
></yoga-schedule>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" |
<yoga-schedule
api-key="wk_live_abc123"
theme-primary="#8B5CF6"
theme-secondary="#EC4899"
theme-font="Montserrat"
theme-radius="12px"
></yoga-schedule>Komplette eksempler
Booking-side med alle widgets
<!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">
<yoga-login
api-key="wk_live_din_api_noegle"
id="login-widget"
></yoga-login>
</section>
<!-- Holdoversigt -->
<section class="widget-section">
<h2>Vores hold</h2>
<yoga-schedule
api-key="wk_live_din_api_noegle"
view="cards"
show-filters="true"
></yoga-schedule>
</section>
<!-- Brugerens dashboard -->
<section class="widget-section user-area">
<div>
<h2>Mine bookinger</h2>
<yoga-bookings api-key="wk_live_din_api_noegle"></yoga-bookings>
</div>
<div>
<h2>Mit medlemskab</h2>
<yoga-membership api-key="wk_live_din_api_noegle"></yoga-membership>
</div>
</section>
</main>
<!-- Holdstyring Widget Script -->
<script src="https://widgets.holdstyring.dk/v1/yoga-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)
<!-- Tilføj dette hvor du vil vise holdoversigten -->
<yoga-schedule api-key="wk_live_din_api_noegle"></yoga-schedule>
<!-- Tilføj scriptet før </body> -->
<script src="https://widgets.holdstyring.dk/v1/yoga-widgets.min.js" async></script>Ofte stillede spørgsmål
Påvirker widgets min sides hastighed?▼
Kan jeg style widgets med min egen CSS?▼
Virker widgets på WordPress/Wix/Squarespace?▼
Hvad sker der hvis min API-nøgle lækker?▼
Kan jeg have flere widgets på samme side?▼
Understøtter widgets flere sprog?▼
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.