Zum Hauptinhalt springen

Website-Widget

Füge dieses Widget zur eigenen Website deines Studios hinzu, und Besucher können deinen aktuellen Kursplan, deine Terminservices, Mitgliedschaftspläne und Einzelhandelsprodukte durchsuchen — und buchen oder kaufen, direkt von deiner Website aus — ohne deine Seite zu verlassen.

Navigationsbezeichnung — Website-Widget (Einstellungen-Tab): 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

Bevor du beginnst​

Das Website-Widget ist ein kleines einbettbares Panel mit bis zu vier Tabs — Kalender, Termine, Mitgliedschaften und Produkte — jeweils gestützt auf dieselben öffentlichen Daten, die deine Kunden in der mobilen App sehen; außerdem kann ein Besucher ein Konto erstellen, sich anmelden, einen Kurs oder Termin buchen und eine Mitgliedschaft oder ein Produkt kaufen, alles innerhalb des Widgets selbst.

Du brauchst:

  • Zugriff auf Einstellungen in der Agon-Desktop-App (nur Studio-Manager).
  • Die Möglichkeit, ein HTML-Snippet in den Editor deiner Website einzufügen (Squarespace, Wix, WordPress oder eine eigene Website funktionieren alle — überall, wo du einen benutzerdefinierten „Embed“- oder „HTML“-Block hinzufügen kannst).

Was das Widget zeigt​

Nach dem Einbetten zeigt das Widget einen Kopfbereich mit deinem Studionamen und deiner Markenakzentfarbe sowie eine Tab-Leiste mit bis zu vier Tabs:

  • Kalender — jeder anstehende geplante Kurs: Name, Datum und Uhrzeit, Kursleiter (wenn zugewiesen) und wie viele Plätze frei sind (oder „Voll“). Ein Klick auf einen Kurs öffnet seine Details, mit einer Schaltfläche Buchen (oder Auf Warteliste setzen, sobald voll).
  • Termine — deine aktiven Terminservices. Ein Klick auf einen öffnet einen schrittweisen Buchungsablauf: einen Kursleiter wählen, ein Datum wählen, ein verfügbares Zeitfenster wählen.
  • Mitgliedschaften — jeder Mitgliedschaftsplan, der sowohl aktiv als auch als online verkäuflich markiert ist, mit einer Schaltfläche Kaufen bei jedem.
  • Produkte — dein Einzelhandelskatalog (aktive Produkte mit verfügbarem Bestand), mit einer Schaltfläche Kaufen bei jedem. Es gibt keinen Warenkorb — jeder Klick auf „Kaufen“ startet einen eigenen Checkout für eine Einheit dieses Produkts.

Es zeigt nie Kurslisten oder Kontaktinformationen von Kursleitern — nur das, was ein Besucher vernünftigerweise von deiner öffentlichen Website aus sehen oder tun könnte.

Buchen oder Kaufen erfordert ein Konto​

Das Durchsuchen jedes Tabs ist immer öffentlich — keine Anmeldung nötig. In dem Moment, in dem ein Besucher auf Buchen, Auf Warteliste setzen, Kaufen oder Kaufen klickt, öffnet sich ein Anmelde-/Registrierungs-Modal, falls er nicht bereits angemeldet ist. Die Registrierung fragt nur nach E-Mail, Passwort und vollständigem Namen; das Anmelden oder Registrieren schließt die ursprüngliche Aktion automatisch ab — der Besucher muss nie zweimal klicken. Diese Sitzung existiert nur im Speicher des Browser-Tabs: Das Aktualisieren der Seite oder das Schließen und erneute Öffnen des Widgets meldet den Besucher wieder ab (eine bewusste Entscheidung — das Widget speichert nie eine Sitzung in localStorage oder einem Cookie, da es innerhalb eines sandboxed iframes auf einer Seite läuft, die Agon nicht kontrolliert).

Das Buchen eines Kurses oder eines Termins zieht ein Mitgliedschafts-Credit ab, genau wie in der mobilen App. Der Kauf einer Mitgliedschaft oder eines Produkts öffnet Stripes gehosteten Checkout in einem neuen Browser-Tab (nicht innerhalb des Widgets) — der Besucher schließt die Zahlung dort ab, und dieser Tab zeigt eine schlichte Erfolgs-/Abbruchbestätigung und kann geschlossen werden, sobald er fertig ist.

Dein Einbettungs-Snippet finden​

  1. Öffne die Agon-Desktop-App und gehe zu Einstellungen.

  2. Klicke auf den Tab Website-Widget.

  3. Kopiere das dort angezeigte Einbettungs-Snippet. Es sieht so aus:

    <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. Füge das Snippet in den HTML-/Embed-Block deiner Website ein, genau wie kopiert — einschließlich des sandbox-Attributs. Entferne oder kürze es nicht: Besonders allow-popups ist für den oben beschriebenen Stripe-Checkout-Tab erforderlich, und der Rest sind die minimalen Berechtigungen, die das Widget braucht, um sicher auf deiner Seite zu laufen.

Es zu deiner Website hinzufügen​

Die genauen Schritte hängen von deinem Website-Baukasten ab, aber das Muster ist überall dasselbe:

  1. Füge in deinem Website-Editor einen neuen „Embed“-, „HTML“- oder „Custom Code“-Block auf der Seite hinzu, auf der das Widget erscheinen soll.
  2. Füge das Snippet ein, das du aus Einstellungen → Website-Widget kopiert hast.
  3. Speichere und veröffentliche die Seite.
  4. Besuche deine Live-Website und bestätige, dass sie mit dem Kursplan deines Studios lädt.

Nur einen Tab einbetten​

Standardmäßig bettet das Snippet alle vier Tabs mit sichtbarer Tab-Leiste ein. Um nur einen einzubetten — zum Beispiel nur den Kurskalender auf deiner Startseite, ohne Tab-Leiste und ohne Möglichkeit, Tabs zu wechseln — füge dem src-URL einen Query-Parameter ?widget= mit einem dieser Werte hinzu: calendar, appointments, memberships oder products. Zum Beispiel:

<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>

Dies ist völlig optional — lass das Snippet genau wie aus den Einstellungen kopiert, wenn du das vollständige Vier-Tab-Widget möchtest.

Wichtig: Dein Snippet ändert sich, wenn dein Agon-Backend neu startet​

Die Tunnel-Adresse deines Studios (der https://...trycloudflare.com-Teil des Snippets) ist per Design temporär — sie wird jedes Mal neu erzeugt, wenn dein Agon-Backend neu startet, und die alte Adresse funktioniert nicht mehr. Das ist kein Fehler.

Wann immer du dein Agon-Backend (oder deinen Computer) neu startest, gehe zurück zu Einstellungen → Website-Widget, kopiere das neue Snippet und aktualisiere es auf deiner Website. Bis du das tust, zeigt das Widget auf deiner Live-Website Besuchern einen Fehler statt deines Zeitplans. Wenn du das Snippet mit einem ?widget=-Parameter angepasst hast (siehe oben), füge ihn dem neuen Snippet erneut hinzu — die Einstellungen geben dir immer die schlichte URL für das vollständige Widget.

Wenn du eine dauerhafte Adresse brauchst, die sich nie ändert, erfordert das eine kostenpflichtige Cloudflare-Tunnel-Einrichtung statt des kostenlosen Quick Tunnel, den Agon standardmäßig verwendet — das ist heute nichts, was Agon automatisch konfiguriert.

Was tun, wenn etwas schiefgeht?​

Das Widget zeigt „Studio nicht gefunden“ auf meiner Website Dein Einbettungs-Snippet ist veraltet — höchstwahrscheinlich, weil dein Agon-Backend neu gestartet ist und eine neue Tunnel-Adresse erhalten hat. Gehe zu Einstellungen → Website-Widget, kopiere das aktuelle Snippet und ersetze das auf deiner Website.

Das Widget zeigt keine Kurse oder weniger, als ich erwarte Der Kalender-Tab zeigt nur Kurse, die noch anstehen (nicht bereits begonnen) und noch im Status „geplant“ sind. Abgesagte Kurse und Kurse, die bereits in der Vergangenheit liegen, erscheinen nicht. Prüfe die Seite Kurse, um zu bestätigen, dass der Kurs korrekt geplant ist.

Mein Website-Baukasten lässt mich keinen <iframe>- oder „Custom Code“-Block einfügen Manche Website-Baukästen beschränken benutzerdefiniertes HTML bei kostenlosen Plänen. Prüfe den Plan deines Website-Baukastens — die meisten (Squarespace, Wix, WordPress) erfordern mindestens ihre günstigste kostenpflichtige Stufe, um benutzerdefinierten Einbettungscode hinzuzufügen.

Ein Besucher sagt, nach dem Klick auf „Kaufen“ sei nichts passiert Der Stripe-Checkout öffnet sich in einem neuen Browser-Tab, nicht innerhalb des Widgets selbst — der Besucher hat möglicherweise einen Pop-up-Blocker, der das verhindert, oder hat den neuen Tab nicht bemerkt. Bitte ihn, nach einer Meldung über ein blockiertes Pop-up zu suchen oder die anderen offenen Tabs seines Browsers zu prüfen.

Ein Besucher hat sich im Widget registriert, sagt aber, er könne sich nicht in der mobilen App anmelden Er sollte es können — die Registrierung über das Widget erstellt dieselbe Art von Kundenkonto wie die Registrierung über die mobile App, mit der E-Mail und dem Passwort, die er eingegeben hat.

Das Widget sieht auf meiner Website kaputt oder ungestylt aus Stelle sicher, dass du das ganze Snippet kopiert hast, einschließlich des sandbox-Attributs, und dass du den src-URL nicht versehentlich bearbeitet hast. Wenn sich die Tunnel-Adresse geändert hat, seit du sie zuletzt kopiert hast, kopiere ein frisches Snippet aus Einstellungen → Website-Widget.

Verwandte Seiten​