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.
• tenant-slug: PÅKRÆVET når widgeten ligger på en ekstern side (WordPress/Wix/one.com m.m.), så den ved hvilken Holdstyring-host den skal hente data fra. Slug = studiets subdomæne (fx mit-studio for mit-studio.holdstyring.dk). Alternativ: base-url="https://mit-studio.holdstyring.dk". Uden en af dem: fejlen Could not resolve the Holdstyring host (widget-fejl er på engelsk — de er henvendt til den der indsætter widgeten).
• Script-tag (én gang før </body>): <script src="https://widgets.holdstyring.dk/v1/holdstyring-widgets.min.js" async></script>.
• 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, 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.

Attributter

• Fælles for ALLE widgets: api-key (påkrævet), tenant-slug (påkrævet på eksterne sider), base-url (alternativ ved eget domæne), theme-primary, theme-secondary, theme-accent, theme-font, theme-radius, theme-mode="light|dark".
• 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-weekly-schedule hold-type-slugs · holdstyring-upcoming-classes limit (1-30, std 6) · holdstyring-pricing plan-ids, layout="cards|table|compact", title, show-features · 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.
• INGEN egne attributter (kun de fælles): holdstyring-schedule, 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-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="DIN_NØGLE" tenant-slug="dit-studio"></holdstyring-schedule> (tenant-slug påkrævet på eksterne sider).
• 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 = tenant-slug (eller base-url) mangler på widgeten. IKKE en CORS-fejl. Tilføj tenant-slug="dit-studio".
• 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) tenant-slug="dit-studio" er sat på widgeten (påkrævet på eksterne sider — ellers Could not resolve the Holdstyring host), 3) hjemmesidens domæne (uden sti) er tilføjet under "Tilladte domæner" på den aktive nøgle, 4) nøglen er aktiv (ikke deaktiveret), 5) script-tagget er rent faktisk loaded (F12 → Console for fejl).
• 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.
• 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å brug holdstyring-weekly-schedule med hold-type-slugs og giv prøvetime-holdene deres eget holdmærkat. (Der findes IKKE en class-id-attribut på schedule-widgeten.)
• Kan jeg vælge ét enkelt hold med class-id? — Nej. class-id findes ikke. Filtrér i stedet på holdmærkat med hold-type-slugs på holdstyring-weekly-schedule eller holdstyring-class-types.
• 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.