Widget Integration

Web Components til at indlejre live Holdstyring-data (hold, priser, instruktører, blog m.m.) på ekstern hjemmeside (WordPress, Wix, Squarespace, Webflow, statisk HTML).

Kernebegreber

• Hovedafbryder: Indstillinger → Funktioner → Hjemmeside → "Widgets" toggle. Selv hvis API-nøgle eksisterer, afvises alle kald med WIDGETS_DISABLED indtil toggle er ON.
• API-nøgle: navn + tilladte domæner; vises KUN én gang.
• Tilladte domæner: skal indeholde mindst ét domæne — tom liste = afvis alle (security default). Angiv KUN scheme+domæne uden sti eller afsluttende / (fx https://eksempel.dk, IKKE https://eksempel.dk/booking). Skriv * for at tillade alle domæner. Tilføj både https://www.eksempel.dk og https://eksempel.dk hvis begge bruges.
• Host (PÅKRÆVET på eksterne sider): brug base-url="https://<studio-host>" — den ANBEFALEDE, brand-korrekte vej (verificeret eget domæne, ellers <slug>.class-booking.com for Class Booking eller <slug>.holdstyring.dk). tenant-slug="<slug>" er en GENVEJ der ALTID resolver til <slug>.holdstyring.dk og derfor er FORKERT for Class Booking-tenants og eget domæne — dokumentér den som holdstyring.dk-only. Widgets-siden fylder base-url korrekt ud i den færdige kode. Uden host: fejlen Could not resolve the Holdstyring host (widget-fejl er på engelsk — henvendt til den der indsætter widgeten).
• Fuld API-nøgle: indsæt ALTID hele nøglen. Den vises kun ved oprettelse (grøn boks). Admin-listen viser kun starten (prefix) — indsæt ALDRIG prefixet med ... bagefter (fx wk_live_abc123...), det er ikke en gyldig nøgle.
• Færdig copy-paste-kode: lige efter oprettelse viser Widgets-siden en færdig opsætning med nøgle+base-url sat ind, og hvert widget-kort i oversigten får en «Kopiér tag»-knap der kopierer et komplet tag. Tags er kun udfyldt med nøglen så længe du bliver på siden (nøglen genhentes ikke efter genindlæsning — så skal den indsættes igen).
• Én forbindelse pr. side: alle widgets på en side deler én global apiClient. Efterlad ALDRIG gamle/dublerede widget-blokke med en ANDEN nøgle eller host — den sidst indlæste vinder og overskriver de andre, så alle kald går til forkert host og fejler med invalid api key. Brug præcis ÉN nøgle + ÉN base-url på alle tags.
• Script-tag (én gang før </body>): <script src="https://widgets.holdstyring.dk/v1/holdstyring-widgets.min.js" async></script>. I WordPress/Kubio: læg scriptet i temaets footer eller et header/footer-plugin, IKKE i en page-builder-HTML-boks (den kan strippe scriptet). Selve widget-tags må gerne stå i en HTML-boks.
• Widgets bruger automatisk studio-farver fra Temaer & Branding.
• Sprog: widgets følger studiets sprog (Indstillinger → sprog) — dansk, engelsk, tysk, svensk, norsk eller spansk. Knapper, tomme tilstande, datoer og ugedage skifter med. Kun opsætningsfejl (manglende api-key/host) er altid på engelsk, da de vises før sproget er kendt og henvender sig til den der bygger siden.
• Eget domæne: har studiet et verificeret domæne, peger widget-links dertil i stedet for <slug>.holdstyring.dk, så kunden bliver i dit brand.

Widget-katalog

• Booking & Bruger: holdstyring-schedule (holdoversigt+booking), holdstyring-login, holdstyring-bookings (Mine bookinger), holdstyring-membership (klippekort/abonnement/historik).
• Indhold & Info: holdstyring-pricing, holdstyring-class-types (klik "Book hold" åbner holdene i widgeten), holdstyring-instructors, holdstyring-upcoming-classes, holdstyring-weekly-schedule (dag-grupperet liste), holdstyring-week-grid (7-kolonners ugekalender Man-Søn med dag-filter, samme udseende som studiets egen ugekalender), holdstyring-seasons (sæsonhold), holdstyring-treatments, holdstyring-rooms, holdstyring-blog.
• Engagement: holdstyring-testimonials, holdstyring-contact-info, holdstyring-contact-form, holdstyring-newsletter, holdstyring-gift-cards, holdstyring-waitlists (kunden kan tilmelde sig direkte i widgeten), holdstyring-campaign-banner, holdstyring-temperature (vand- og lufttemperatur; sæt latitude+longitude for at hente offentlig data (Open-Meteo) for et badested, ELLER brug jeres Thermit-sensor hvis den er sat op på tenanten. Uden nogen af delene viser den intet).
• Retreats (beta): holdstyring-retreats (kort for kommende retreats), holdstyring-retreat (ét retreat: program, pakker, booking-modal direkte i widgeten — se retreats-guide).

Attributter

• Fælles for ALLE widgets: api-key (påkrævet, FULD nøgle), base-url (anbefalet host på eksterne sider), tenant-slug (holdstyring.dk-only genvej — brug base-url i stedet), theme-primary, theme-secondary, theme-accent, theme-font, theme-radius, theme-mode="light|dark|auto" (auto følger vært-sidens prefers-color-scheme).
• theme-font: widgeten rendrer i isoleret container og kan IKKE selv hente skrifttyper — den navngivne font skal allerede være indlæst på siden (fx tema-temaets Google Fonts-link). Standard: Inter.
• Egne attributter (alle show-* er ON som standard; sæt ="false" for at skjule): holdstyring-schedule hold-type-slugs (filtrér på holdmærkater), template-id (kun ét hold/program), weeks (kun N uger frem, 1-52), title, view-toggle="true" (tilføjer den Hold/Kalender-skifter som studiets egen side har), default-view="list|calendar" (kalender = 7-kolonners ugekalender-gitter) · holdstyring-weekly-schedule hold-type-slugs, title, week-nav="false" (skjul frem/tilbage-pilene; de vises som standard), layout="grid" (vis som 7-kolonners ugekalender-gitter i stedet for den dag-grupperede liste; std er listen) · holdstyring-week-grid (dedikeret 7-kolonners ugekalender = weekly-schedule med layout=grid) hold-type-slugs, title, week-nav="false" · holdstyring-upcoming-classes limit (1-30, std 6) · holdstyring-pricing plan-ids, layout="cards|table|compact", title, show-features, category-filter="true" (Alle/<kategori>-knapper, som studiets egen prisside; skjules når der kun er én kategori) , classes-href="#skema" (send «Se hold» til DIN egen side i stedet for vores — så forlader den besøgende ikke din hjemmeside)· holdstyring-class-types hold-type-slugs, max-items, title, show-benefits, show-meta · holdstyring-instructors max-items, title, show-bio, show-specialties · holdstyring-seasons layout="cards|detailed" · holdstyring-treatments title, show-price, show-duration, show-benefits · holdstyring-rooms title, show-features · holdstyring-blog limit, show-images · holdstyring-testimonials max-items, title · holdstyring-contact-info title, show-opening-hours · holdstyring-contact-form title, subtitle, show-phone · holdstyring-newsletter title, subtitle, button-text · holdstyring-gift-cards cta-text, cta-link · holdstyring-campaign-banner override-title · holdstyring-retreat retreat-id (påkrævet), hide-image (skjuler hero-billedet; titel+datoer vises som farvet banner) · holdstyring-temperature title, variant="dark|ocean|light", show-last-updated, latitude+longitude (badested-koordinater; sat → offentlig hav-/lufttemp via Open-Meteo i stedet for Thermit-sensoren).
• INGEN egne attributter (kun de fælles): holdstyring-login, holdstyring-bookings, holdstyring-membership, holdstyring-waitlists.
• hold-type-slugs tager kommasepareret liste (hold-type-slugs="vinyasa,yin") og filtrerer på holdmærkater.

Sådan gør du

• Aktivér: Indstillinger → Funktioner → Hjemmeside → slå "Widgets" til.
• Medlemsside ("min side"): der er INGEN samlet dashboard-widget. Byg den af holdstyring-login + holdstyring-membership + holdstyring-bookings på samme side — de deler login, så brugeren logger ind én gang. Før login viser de to nederste en "log ind for at se…"-linje.
• Login uden holdstyring-login: holdstyring-schedule, holdstyring-weekly-schedule, holdstyring-week-grid, holdstyring-upcoming-classes, holdstyring-class-types og holdstyring-waitlists åbner selv en login-boks, når en ikke-logget-ind besøgende booker eller tilmelder sig. Handlingen fortsætter automatisk bagefter. holdstyring-login er derfor kun nødvendig til en decideret medlemsside. Betalt hold uden dækkende medlemskab/klippekort: bookingen sender den besøgende til din betalingsside (checkout) — widgeten opretter aldrig en gratis booking for et betalt hold.
• Opret nøgle: /admin/widgets → "Opret API-nøgle" → tilføj domæne(r) → kopiér nøglen straks.
• Indsæt widget: f.eks. <holdstyring-schedule api-key="YOUR_FULL_API_KEY" base-url="https://your-studio.class-booking.com"></holdstyring-schedule> (base-url = dit studies fulde adresse; brug samme nøgle+base-url på alle tags).
• WordPress: tilføj script via footer.php eller "Insert Headers and Footers" plugin; widgets i "Custom HTML"-blok.

Regler / grænser

• Script-tag skal kun inkluderes én gang per side; ubegrænset antal widgets pr. side.
• Data opdateres automatisk fra Holdstyring.
• Widgets vs. indbygget hjemmeside: widgets = integration på din egen side; indbygget = komplet hostet side (kan bruges samtidig).
• CORS-fejl ORIGIN_NOT_ALLOWED = sidens domæne (scheme+host, uden sti) mangler i nøglens "Tilladte domæner". Test på den publicerede side, ikke i CMS-editorens preview-iframe (den har typisk et andet origin).
• Fejl Could not resolve the Holdstyring host = host mangler på widgeten. IKKE en CORS-fejl. Tilføj base-url="https://<studio-host>" (tenant-slug virker kun for holdstyring.dk-studier).
• Fejl invalid api key = enten a) nøglen er ikke indsat fuldt ud (prefix + ... fra listen er ikke gyldig), eller b) to forskellige nøgler/hosts på samme side (den sidst indlæste vinder). Brug én fuld nøgle + én base-url på alle tags og slet gamle/dublerede blokke.
• Ingenting vises / tom kalender = base-url matcher ikke studiets adresse. F12 → Network: kaldene til /api/widget/* skal give 200 og gå til din studie-host. Går de til holdstyring.dk mens du er Class Booking, mangler du base-url (tenant-slug peger altid på holdstyring.dk).
• Fejl An api-key attribute is required = api-key mangler helt på widget-tagget.
• Fejl WIDGETS_DISABLED = hovedafbryderen er slået fra på tenant-niveau.

FAQ

• Min widget vises ikke — Tjek i rækkefølge: 1) hovedafbryderen "Widgets" på Indstillinger → Funktioner → Hjemmeside er ON, 2) base-url="https://<studio-host>" er sat på widgeten (påkrævet på eksterne sider — ellers Could not resolve the Holdstyring host; tenant-slug virker kun for holdstyring.dk), 3) hjemmesidens domæne (uden sti) er tilføjet under "Tilladte domæner" på den aktive nøgle, 4) nøglen er indsat FULDT ud og er aktiv (ikke deaktiveret; prefix + ... er ikke gyldig), 5) script-tagget er rent faktisk loaded (F12 → Console for fejl; page-builder-HTML-bokse kan strippe scriptet).
• Hvilken nøgle skal jeg bruge på Squarespace/WordPress? — Kun den nøgle der står som aktiv. Squarespace/WordPress laver INGEN domæne- eller tilladelseskonfiguration — det styres alt sammen i holdstyring-admin.
• Virker med WordPress/Squarespace/Wix? — Ja, Web Components virker på alle CMS. På WordPress er nemmeste vej det gratis plugin "Class Booking Holdstyring": installér → forbind med widget-nøgle (plugin'et tilføjer automatisk WP-domænet til tilladte domæner med ét klik) → indsæt hold via indbygget Gutenberg-blok eller shortcode (ingen footer-script eller Custom HTML-boks nødvendig). Custom HTML-blok er alternativet. Plugin'et udgives på WordPress.org i disse dage: https://wordpress.org/plugins/class-booking-holdstyring/
• Kan jeg styre design? — Widgets tilpasser sig studio-farver og lys/mørk baggrund.
• Hvad koster det? — Inkluderet i betalte abonnementer.
• Findes der en prøvetime-widget? — Nej, ingen dedikeret prøvetime-widget. Brug holdstyring-schedule kombineret med en rabatkode der dækker drop-in (se rabatkoder-guide). Vil du kun vise ét udsnit af holdene, så filtrér holdstyring-schedule med hold-type-slugs (og giv prøvetime-holdene deres eget holdmærkat) eller template-id for præcis ét hold.
• Kan jeg vise kun ét hold/program på en side? — Ja. På holdstyring-schedule: template-id="…" viser kun det ene holds gange, hold-type-slugs="…" filtrerer på holdmærkat(er). Der er IKKE en class-id-attribut — brug template-id.
• Kan jeg begrænse hvor mange uger skemaet viser? — Ja, to måder: weeks="4" direkte på holdstyring-schedule (kun de næste N uger, 1-52), eller per holdskabelon i admin ("Begræns synlighed for medlemmer" → "Weeks ahead"). Den strammeste af de to vinder.
• Kan jeg vise skemaet som en ugekalender med en kolonne pr. dag? — Ja. Brug holdstyring-week-grid (dedikeret 7-kolonners ugekalender Man-Søn med dag-filter og uge-navigation, samme udseende som studiets egen side), eller holdstyring-weekly-schedule layout="grid", eller holdstyring-schedule view-toggle="true" default-view="calendar" hvis du vil give den besøgende en Hold/Kalender-skifter. Uden layout="grid" viser holdstyring-weekly-schedule en dag-grupperet liste.
• Hvordan viser jeg badetemperatur (vandtemperatur/havtemperatur) på min hjemmeside? — Brug widgeten holdstyring-temperature. Sæt latitude+longitude for et badested, så henter den offentlig hav- og lufttemperatur via Open-Meteo, fx <holdstyring-temperature latitude="57.59" longitude="9.97"></holdstyring-temperature>. Har tenanten i stedet en Thermit-sensor opsat, viser den sensorens måling uden koordinater. Uden koordinater OG uden sensor viser widgeten intet. Valgfrit: variant="dark|ocean|light", title, show-last-updated.
• Kan jeg vise drop-in-pris separat fra klippekort-pris? — holdstyring-schedule viser hold-prisen (drop-in). holdstyring-pricing viser alle prismodeller. Kombinér begge hvis du vil have både skema OG en prisoversigt — eller brug holdstyring-class-types der viser holdbeskrivelser + drop-in pris pr. type.