Ga naar hoofdinhoud

Website-widget

Voeg deze widget toe aan de eigen website van je studio en bezoekers kunnen je live lesrooster, afspraakdiensten, lidmaatschapsplannen en retailproducten bekijken — en boeken of kopen, rechtstreeks vanaf je site — zonder je pagina te verlaten.

Navigatielabel — Website-widget (tabblad Instellingen): EN: Website Widget · IT: Widget del sito web · FR: Widget du site web · DE: Website-Widget · ES: Widget del sitio web · PT: Widget do site · NL: Website-widget

Voordat je begint​

De website-widget is een klein insluitbaar paneel met maximaal vier tabbladen — Agenda, Afspraken, Lidmaatschappen en Producten — elk ondersteund door dezelfde openbare gegevens die je mobiele-appklanten zien, plus een bezoeker kan een account aanmaken, inloggen, een les of afspraak boeken, en een lidmaatschap of product kopen, allemaal binnen de widget zelf.

Je hebt nodig:

  • Toegang tot Instellingen in de Agon-desktop-app (alleen studiomanager).
  • De mogelijkheid om een stukje HTML in de editor van je website te plakken (Squarespace, Wix, WordPress of een aangepaste site werken allemaal — overal waar je een aangepast "embed"- of "HTML"-blok kunt toevoegen).

Wat de widget toont​

Zodra die is ingesloten, toont de widget een kop met je studionaam en merkaccentkleur, en een tab- balk met maximaal vier tabbladen:

  • Agenda — elke aankomende geplande les: naam, datum en tijd, instructeur (indien toegewezen), en hoeveel plaatsen er nog over zijn (of "Vol"). Op een les klikken opent het detail ervan, met een knop Boeken (of Op wachtlijst, zodra vol).
  • Afspraken — je actieve afspraakdiensten. Op een klikken opent een boekingsflow stap voor stap: kies een instructeur, kies een datum, kies een beschikbaar tijdslot.
  • Lidmaatschappen — elk lidmaatschapsplan dat zowel actief is als gemarkeerd als online verkoopbaar, met een knop Kopen bij elk.
  • Producten — je retailcatalogus (actieve producten met voorraad beschikbaar), met een knop Kopen bij elk. Er is geen winkelwagen — elke klik op Kopen start een eigen afrekening voor één eenheid van dat product.

Die toont nooit deelnemerslijsten of contactinformatie van instructeurs — alleen wat een bezoeker redelijkerwijs zou kunnen zien of doen vanaf je openbare website.

Boeken of kopen vereist een account​

Elk tabblad doorbladeren is altijd openbaar — geen login nodig. Op het moment dat een bezoeker op Boeken, Op wachtlijst, Kopen klikt, opent er een login-/aanmeldmodal als ze nog niet zijn ingelogd. Aanmelden vraagt alleen om een e-mailadres, wachtwoord en volledige naam; inloggen of aanmelden voltooit de oorspronkelijke actie automatisch — de bezoeker hoeft nooit twee keer te klikken. Deze sessie bestaat alleen in het geheugen van het browsertabblad: de pagina verversen, of de widget sluiten en opnieuw openen, logt de bezoeker weer uit (een bewuste keuze — de widget slaat nooit een sessie op in localStorage of een cookie, aangezien die draait in een sandboxed iframe op een pagina die Agon niet controleert).

Een les of afspraak boeken trekt een lidmaatschapscredit af, precies zoals in de mobiele app. Een lidmaatschap of product kopen opent Stripes gehoste afrekening in een nieuw browsertabblad (niet binnen de widget) — de bezoeker voltooit de betaling daar, en dat tabblad toont een gewone succes-/geannuleerd-bevestiging en kan worden gesloten zodra ze klaar zijn.

Je insluitfragment vinden​

  1. Open de Agon-desktop-app en ga naar Instellingen.

  2. Klik op het tabblad Website-widget.

  3. Kopieer het insluitfragment dat daar wordt getoond. Het ziet er zo uit:

    <iframe
      src="https://your-tunnel-url.trycloudflare.com/widget/your-public-studio-id"
      sandbox="allow-scripts allow-forms allow-same-origin allow-popups">
    </iframe>

  4. Plak het fragment in het HTML-/embed-blok van je website, exact zoals gekopieerd — inclusief het sandbox-attribuut. Verwijder of verkort het niet: met name allow-popups is vereist voor het Stripe-afreken-tabblad dat hierboven wordt beschreven, en de rest zijn de minimale machtigingen die de widget nodig heeft om veilig op je pagina te draaien.

Die aan je website toevoegen​

De exacte stappen hangen af van je websitebouwer, maar het patroon is overal hetzelfde:

  1. Voeg in je website-editor een nieuw "Embed"-, "HTML"- of "Custom Code"-blok toe aan de pagina waar je de widget wilt laten verschijnen.
  2. Plak het fragment dat je hebt gekopieerd uit Instellingen → Website-widget.
  3. Sla de pagina op en publiceer die.
  4. Bezoek je live website en bevestig dat die laadt met het rooster van je studio.

Slechts één tabblad insluiten​

Standaard sluit het fragment alle vier de tabbladen in met de tabbalk zichtbaar. Om er maar één in te sluiten — bijvoorbeeld alleen de lesagenda op je homepage, zonder tabbalk en zonder manier om van tabblad te wisselen — voeg een ?widget=-queryparameter toe aan de src-URL met een van deze waarden: calendar, appointments, memberships of products. Bijvoorbeeld:

<iframe
  src="https://your-tunnel-url.trycloudflare.com/widget/your-public-studio-id?widget=calendar"
  sandbox="allow-scripts allow-forms allow-same-origin allow-popups">
</iframe>

Dit is volledig optioneel — laat het fragment exact zoals gekopieerd uit Instellingen als je de volledige widget met vier tabbladen wilt.

Belangrijk: je fragment verandert wanneer je Agon-backend opnieuw start​

Het tunneladres van je studio (het https://...trycloudflare.com-deel van het fragment) is tijdelijk van opzet — het wordt telkens opnieuw gegenereerd wanneer je Agon-backend opnieuw start, en het oude adres stopt met werken. Dit is geen bug.

Telkens wanneer je je Agon-backend (of je computer) opnieuw start, ga je terug naar Instellingen → Website-widget, kopieer je het nieuwe fragment en werk je het bij op je website. Totdat je dat doet, toont de widget op je live site een fout aan bezoekers in plaats van je rooster. Als je het fragment hebt aangepast met een ?widget=-parameter (zie hierboven), voeg die dan opnieuw toe aan het nieuwe fragment — Instellingen geeft je altijd de gewone, volledige-widget-URL.

Als je een permanent adres nodig hebt dat nooit verandert, vereist dat een betaalde Cloudflare Tunnel-configuratie in plaats van de gratis Quick Tunnel die Agon standaard gebruikt — dit is niet iets wat Agon vandaag automatisch configureert.

Wat als er iets misgaat?​

De widget toont "Studio niet gevonden" op mijn website Je insluitfragment is verouderd — hoogstwaarschijnlijk omdat je Agon-backend opnieuw is gestart en een nieuw tunneladres heeft gekregen. Ga naar Instellingen → Website-widget, kopieer het huidige fragment en vervang het fragment op je website.

De widget toont geen lessen, of minder dan ik verwacht Het tabblad Agenda toont alleen lessen die nog aankomend zijn (nog niet begonnen) en nog in de status "gepland" staan. Geannuleerde lessen en lessen die al voorbij zijn, verschijnen niet. Controleer de pagina Lessen om te bevestigen dat de les correct is gepland.

Mijn websitebouwer laat me geen <iframe> of "Custom Code"-blok plakken Sommige websitebouwers beperken aangepaste HTML op gratis abonnementen. Controleer het abonnement van je websitebouwer — de meeste (Squarespace, Wix, WordPress) vereisen minstens hun instapbetaalde niveau om aangepaste insluitcode toe te voegen.

Een bezoeker zegt dat er niets gebeurde nadat ze op Kopen klikten De Stripe-afrekening opent in een nieuw browsertabblad, niet binnen de widget zelf — de bezoeker heeft mogelijk een pop-upblokkering die dat voorkomt, of heeft het nieuwe tabblad niet opgemerkt. Vraag ze te controleren op een melding over een geblokkeerde pop-up, of hun andere open browsertabbladen te controleren.

Een bezoeker heeft zich aangemeld in de widget maar zegt dat ze niet kunnen inloggen op de mobiele app Dat zou moeten lukken — je aanmelden via de widget maakt hetzelfde soort klantaccount aan als je aanmelden via de mobiele app, met het e-mailadres en wachtwoord dat ze hebben ingevoerd.

De widget ziet er kapot of ongestyled uit op mijn site Zorg dat je het hele fragment hebt gekopieerd, inclusief het sandbox-attribuut, en dat je de src-URL niet per ongeluk hebt bewerkt. Als het tunneladres is veranderd sinds je het voor het laatst hebt gekopieerd, kopieer dan een vers fragment uit Instellingen → Website-widget.

Gerelateerde pagina's​