Wie integrierst du das neue Eversports-Stundenplan-Widget?

Dieser Artikel erklärt, was die neuen Eversports Widgets sind und wie man das neue Stundenplan-Widget integriert.

Was ist ein Widget?

Ein Widget ist ein Element, das du zu deiner Website hinzufügen kannst und welches oft von einer anderen Plattform stammt. Im Kontext von Eversports dient ein Widget als Brücke zwischen deiner Website und den Informationen des Eversports Managers.

Indem du ein Eversports Manager Widget auf deiner Website platzierst, können deine Kunden Informationen einsehen, Aktivitäten buchen oder Produkte direkt von deiner Website aus kaufen. Insbesondere integriert dieses Widget deinen Buchungskalender von Eversports Manager, so dass deine Kunden einfach mit deinem Stundenplan interagieren können, ohne deine Website zu verlassen.

Was ist das Stundenplan-Widget?

Das neue Eversports-Stundenplan-Widget bietet eine umfassende Ansicht all deiner Aktivitäten in einer Kalenderanzeige.

Dieses aktualisierte Widget beinhaltet eine verbesserte mobile Erfahrung und entfernt das iFrame, was die Benutzerfreundlichkeit erhöht und für bessere Sicherheit gegen zukünftige Browser-Updates sorgt.

Der Umfang dieses Widgets beschränkt sich auf die Kalenderimplementierung.

Während wir schrittweise die anderen Abschnitte des Widgets (wie Preise und Workshops) veröffentlichen, ist derzeit nur der Stundenplan der neue Aspekt.

Was ist im neuen Stundenplan-Widget NICHT enthalten?

Die folgenden Funktionen sind noch nicht in der neuen Integration enthalten, werden aber in naher Zukunft hinzugefügt:

• Gutscheine
• Workshops, Events, Trainings, Retreats, Kurse, Ausbildungen
• Benutzer-Login

Wie ersetzt du Links für die Unterseiten des Widgets?

Wenn du zuvor auf die iFrame-Navigation für Seiten wie Workshops, Preise, Kurse, Trainings, Gutscheine, Aufnahmen und Ausbildungen angewiesen warst, empfehlen wir, diese Seiten individuell in die Navigation deiner Website einzubinden, indem du den Widget-Link verwendest, den du im Manager findest. Dann kannst du auch spezifische Unterseiten-Links in deine Website integrieren.

Kopiere dazu deinen bestehenden Widget-Link aus dem Manager und fügen am Ende die folgenden Parameter hinzu:

• Für Workshops: `?list=workshop`
• Für Klassen: `?list=class`
• Für Kurse: `?list=course`
• Für Trainings: `?list=training`
• Für Gutscheine: `?list=voucher`
• Für den Shop: `?list=shop`
• Für die Videobibliothek: `?list=recording`
• Für Ausbildungen: `?list=education`

Beispiel: `https://www.eversports.com/widget/w/k2j2e0?list=workshop`

Wo befindet sich jetzt der Benutzer:innen-Login?

Die Benutzer:innen-Login-Funktionalität wurde auf die Aktivitätsdetailseite verlagert, die Benutzer:innen durch Klicken auf die Kalenderkarten aufrufen können.

Wenn Benutzer:innen bereits zuvor bei Eversports eingeloggt waren, sind sie bereits auf dieser Seite eingeloggt.

Darüber hinaus sollten sich die Benutzer:innen nach dem ersten Login nicht erneut anmelden müssen, während sie durch verschiedene Klassen im Kalender navigieren, da sie für jede geöffnete Klasse bereits eingeloggt sind.

Wie kann man das Widget gestalten, konfigurieren und integrieren?

 

Wie erstellt man ein neues Widget?

1. Gehe zu den Einstellungen > Widgets [Beta]

2. Klicke auf „Neues Widget erstellen“. 

Diese Seite dient als zentrale Anlaufstelle für alle Widgets. Alle Widgets, die du in Zukunft erstellst, werden hier gespeichert, so dass du sie bei Bedarf leicht wieder aufrufen und bearbeiten kannst. So hast du die volle Kontrolle und Flexibilität über deine Widget-Konfigurationen.

Hinweis: Wenn du bereits ein Eversports-Widget hast, dann wurde es hier automatisch für dich angelegt mit den vorherigen Einstellungen. In diesem Fall kannst du einfach auf die drei Punkte klicken und es dann bearbeiten. 

3. Wähle den Widget-Typ, den du integrieren möchtest. 

Wählen Sie das Widget „Stundenplan“, um zu beginnen.  

4. Benenne dein Widget 

Gib deinem Widget einen internen Namen, das du verwenden kannst, um ihn identifizieren und zu unterscheiden. Deine Kunden werden diesen Namen nicht sehen, also wählen Sie etwas, das für deine interne Organisation und deinen Arbeitsablauf sinnvoll ist.

5. Wähle, wie du dein Widget segmentieren möchtest 

Alle Studios haben die Möglichkeit, ihren Stundenplan vorzufiltern, um separate Zeitpläne für bestimmte Trainer:innen, Sportarten oder Aktivitätsgruppen zu erstellen. Wenn du z. B. einen speziellen vorgefilterten Kalender pro Trainer:innen möchtest, kannst du einen Trainer:innen pro Widget auswählen. Wenn du alle Ihre Aktivitäten anzeigen lassen möchtest, brauchst du diesen Abschnitt nicht zu bearbeiten. 

6. Gestalte dein Widget 

Passe dein Widget so an, dass es sich in das Design deiner Website einfügt. Hier sind die anpassbaren Bereiche für das spezifisches Widget:

• Hintergrundfarbe: Lege den Hintergrund des Widgets fest. Wir empfehlen dir, die Farbe an die Hintergrundfarbe deiner Website anzupassen, um ein einheitliches Erscheinungsbild zu erzielen.
• Schaltflächenfarbe in der mobilen Version: Passe die Farbe der Schaltfläche an, die in der mobilen Datumsauswahl deines Widgets verwendet wird.
• Schriftfarbe: Passe die Schriftfarbe für den Text an, der das Datum anzeigt.
• Schriftfarbe der Aktivitätskachel: Ändere die Textfarbe, die für die Aktivitätskacheln im Kalender verwendet wird. Da die Kachelfarben auf deinen Aktivitätsgruppen basiert, empfehlen wir dir, eine neutrale Farbe zu wählen, die zu den ausgewählten Gruppen passen.

 

7. Entscheide, welche Informationen du anzeigen möchtest 

Im letzten Schritt kannst du die Informationen auswählen, die du auf den Aktivitätskacheln anzeigen möchten:

• Vorname des:r Trainers:in: Zeigt den Namen auf der Karte an. In der mobilen Ansicht wird auch das Foto der Trainer:in angezeigt.
• Raum/Platz: Geben Sie den Raum oder Platz an, in dem die Aktivität stattfindet.
• Freie Plätze: Zeigt die Anzahl der verbleibenden Plätze für die Aktivität an.
• Kurslevel: Gib das Niveau der Aktivität an (Anfänger, Intermediate, Fortgeschrittene oder alle Level).
• Tage unterteilen in Morgen, Mittag und Abend: Organisiere die Kalenderansicht, indem du die Tage unterteilst.

8. Vorschau des Widgets: 

Wenn du eine Vorschau des Widgets auf deiner Webseite sehen möchtest, kannst du die Vorschau auf der Konfigurationsseite verwenden. 

Stelle sicher, dass du die Einstellungen zuerst speicherst, um zu sehen, wie dein Design im Widget aussieht. 

 

Nachdem du die Einstellungen gespeichert haben, klicke auf den Link zur Vorschau. 

Den Code für das Stundenplan-Widget erhalten

Sobald du das Design und die Konfiguration abgeschlossen hast, kannst du das Widget speichern und den Widget-Code kopieren. 

Einbindung des Widget-Codes 

Der Code für das Stundenplan-Widget kann in ein HTML-Modul in deinen Website-Builder eingefügt werden. 

 

➡️ Wenn du ein einzelnes Widget auf einer Seite einfügen möchten:

Kopiere den gesamten Code und füge ihn in einen HTML-Block auf deiner Website ein. 

 

➡️ Wenn du mehrere Widgets auf einer Seite einfügen möchten:

1. Script einfügen: Stelle sicher, dass das Eversports-Script in deine Webseite eingefügt wird. Dieses Script ist notwendig, damit das Widget korrekt funktioniert.

Wichtig: Das Script sollte nur einmal pro Seite hinzugefügt werden.

<script type="module" src="https://widget-static.eversports.io/loader.js" async defer></script>

2. Widget-Code hinzufügen: Platziere den folgenden Code-Schnipsel an der Stelle, an der das Widget auf deiner Website erscheinen soll:

<div data-eversports-widget-id="your-widget-id-here"></div>

Ersetze "your-widget-id-here" durch die tatsächliche Widget-ID, die dir zur Verfügung gestellt wurde. Zum Beispiel, wenn deine Widget-ID "12345678-aaaa-bbbb-cccc-1234567890ab" ist, würde der Code wie folgt aussehen:

<div data-eversports-widget-id="12345678-aaaa-bbbb-cccc-1234567890ab"></div>

Dieses Element kann mehrmals pro Seite hinzugefügt werden.

Hast du derzeit die iFrame-Integration?

Wenn du das Widget-iFrame verwendest und es durch das neue Stundenplan-Widget ersetzen möchtest:

1. Lösche einfach den iFrame-Code. Da wir kein iFrame mehr verwenden, sind spezielle Abschnitte, die für iFrames vorgesehen sind, nicht mehr notwendig.
2. Füge den neuen Code in ein HTML-Modul ein.

Verlinkst du derzeit extern auf das Widget oder den Marktplatz?

1. Erstelle eine neue Seite innerhalb deiner Website und entscheide, wo auf dieser Seite du den Zeitplan anzeigen möchtest. Oder füge den Zeitplan zu einer bestehenden Seite hinzu.
2. Stelle sicher, dass das Script auf dieser Seite enthalten ist und platziere das <div>-Element an der gewünschten Stelle, an der der Kalender angezeigt werden soll.

Durch Befolgen dieser Schritte kannst du das Eversports-Stundenplan-Widget nahtlos in deine Website integrieren, eine bessere Benutzererfahrung bieten und die Kontrolle über die Navigation deiner Website behalten.