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: fejl "Kunne ikke finde Holdstyring-host".
• 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.

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, 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, holdstyring-campaign-banner.

Sådan gør du

• Aktivér: Indstillinger → Funktioner → Hjemmeside → slå "Widgets" til.
• 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 "Kunne ikke finde Holdstyring-host" = tenant-slug (eller base-url) mangler på widgeten. IKKE en CORS-fejl. Tilføj tenant-slug="dit-studio".
• 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 "Kunne ikke finde 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). Alternativt: opret en landingsside hvor prøvetime-linket peger direkte ind i booking-flowet for et specifikt hold via schedule-widget med class-id attribut.
• 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.