Wer kann diese Funktion benutzen?
- Administratoren
- FREE: SportsNow-Seite verlinken
- Premium BASIC: SportsNow Widget, JavaScript und API
SportsNow kannst du einfach mit deiner Website integrieren und damit deinen Mitgliedern ermöglichen, direkt deine Angebote zu buchen. Die einfachste Variante ist es, die eigene SportsNow-Seite auf der Website zu verlinken. Zudem kannst du mit dem SportsNow Widget deine SportsNow-Seite vollumfänglich und gemäss deinen individuellen Wünschen in deine eigene Website integrieren. Alternativ besteht auch die Möglichkeit SportsNow-Daten programmatisch, per API oder JavaScript, in die eigene Website zu laden. Letztere drei Optionen ermöglichen es dir, deinen Stundenplan sowie deine Abonnemente und Preise von SportsNow direkt auf deiner Website anzuzeigen. Dadurch ist deine Website stets auf dem neusten Stand. Die Integration ermöglicht es dir somit ein besseres Besuchererlebnis auf deiner Website umzusetzen.
Gut zu wissen
- SportsNow ist eine Online-Buchungsplattform und wird nicht als eigenständige Software installiert.
- Einige Kundenbeispiele, wie eine Website-Integration aussehen könnte, kannst du in unserem Blog-Beitrag finden: Grossartige Websites. Mit SportsNow integriert.
- Die Integration mittels iFrame wird nicht empfohlen, da diese Methode zu Browser-spezifischen Problemen beim Log-in oder bei Online-Bezahlungen führen kann.
SportsNow-Seite verlinken
Die einfachste Variante ist es, die eigene SportsNow-Seite direkt zu verlinken. Den Link zu deiner SportsNow-Seite findest du in deinem Adminbereich. Damit du gleich loslegen kannst, haben wir für dich einen SportsNow Button mit dem Link zu deiner SportsNow-Seite vorbereitet. Dein eigener SportsNow-Button kann in unterschiedlichen Grössen und Sprachen eingesetzt werden. Er kann mit einem einfachen HTML-Code auf jeder Website eingebunden werden. Ein Klick auf den Button bringt deine Mitglieder direkt auf deine SportsNow-Seite.
- Den HTML-Code findest du in deinem Adminbereich unter «Apps & Integrationen» – «SportsNow Button».
- Der Link zur eigenen SportsNow-Seite ist im Adminbereich ersichtlich und lautet www.sportsnow.ch/go/<Dein Studio Name>. Zum Beispiel für das Studio YogaNow: www.sportsnow.ch/go/yoganow.
SportsNow Widget
Ein Widget ist ein kleines Computerprogramm, das in ein anderes Programm integriert wird. Das Widget funktioniert für alle Websites ohne Einschränkungen. Das Widget ermöglicht es dir, deine SportsNow-Seite vollumfänglich und gemäss deinen individuellen Wünschen in deine eigene Website zu integrieren. Dadurch erfolgt das Buchen und Bezahlen von Abonnementen direkt auf deiner Website, ohne diese zu verlassen. Das Videoportal und die News-Seite können ebenfalls direkt eingebunden werden. Deine Website ist immer automatisch auf dem neuesten Stand, dank Verwaltung der Daten auf SportsNow.
- Wir empfehlen, das Widget auf einer separaten Seite in deine Website zu integrieren (z.B. "Stundenplan"-Seite). Für eine optimale Darstellung sollte die ganze Breite der Seite für das Widget verwendet werden.
- Um Probleme zu vermeiden, sollte der HTML-Code bzw. das Widget nicht mehrmals auf der gleichen Seite/ Page angewendet werden.
- Responsive-Design: Das Widget verfügt standardmässig über ein Responsive Design, es passt sich somit automatisch an die Bildschirmgrösse an respektive ist optimiert für die Ansicht am Computer als auch auf dem Smartphone.
- Design und Farben: Das Widget übernimmt standardmässig automatisch das Design (CSS) der Website. Durch Anpassungen am eigenen CSS kann somit das Widget entsprechend angepasst werden. Zusätzlich werden standardmässig die in SportsNow definierten Studiofarben automatisch im Widget auf bestimmte Elemente, wie Buttons und Texte angewendet sowie die Farbe der Stunden in den Stundeneinstellungen übernommen.
- Damit du dir ein konkretes Bild von dem SportsNow-Widget machen kannst, haben wir eine Demo-Website erstellt: https://demo.sportsnow.ch/
Weitere Einstellungen
Das Widget ermöglicht dir, weitere Einstellungen direkt im Code vorzunehmen. Dazu kannst du die unten stehenden Parameter im <sportsnow-app> Tag einfügen.
- defaultClassFilter: Setze den Filter «Stunde» in der Ansicht Live-Kalender, Stundenplan oder Workshop auf einen vordefinierten Wert, so dass initial nur die gefilterten Stunden angezeigt werden.
Beispiel: <sportsnow-app defaultClassFilter="Pilates Mat Class 2" ...> - defaultTeamFilter: Setze den Filter «Team» in der Ansicht Live-Kalender, Stundenplan oder Workshop auf einen vordefinierten Wert, so dass initial nur Stunden des gefilterten Teammitglieds angezeigt werden.
Beispiel: <sportsnow-app defaultTeamFilter="Anna Moser" ...> - defaultLiveStreamFilter: Setze den Filter «Livestream» in der Ansicht Live-Kalender, Stundenplan oder Workshop initial auf "Livestream", so dass initial nur Livestream-Stunden angezeigt werden.
Beispiel: <sportsnow-app defaultLiveStreamFilter="livestream_only" ...>
Schritt-für-Schritt-Anleitung
Im Web
- Klicke in deinem Adminbereich auf «Apps & Integrationen» - «SportsNow Widget».
- Du kannst das Widget nach deinen individuellen Bedürfnissen konfigurieren.
- «1. Wähle die gewünschten Bereiche aus, welche im Widget angezeigt werden sollen»: Hier hast du die Möglichkeit, einzelne Bereiche der SportsNow-Seite ein- und ausblenden zu lassen. Setze das Häkchen bei den Bereichen, welche im Widget angezeigt werden sollen.
Hinweis: Wenn dabei nur ein einziger Bereich ausgewählt wird, dann werden folglich auch keine Tabs eingeblendet. Dies kann nützlich sein, wenn man das Widget auf unterschiedlichen Seiten auf der eigenen Website einbauen möchte, wie z.B. wenn man eine separate Stundenplan-, Workshops- oder Videoseite anzeigen will. - «2. Wähle den gewünschten Stil des Live-Kalenders aus»: Weiter ermöglicht dir SportsNow den Stil deines Live-Kalenders zu konfigurieren, sprich in welchem Stil der Live-Kalender eingeblendet werden soll.
Hinweis: Diese Option erscheint nur, wenn du im Schritt oben die Anzeige des «Live-Kalenders», «Workshops» oder «Individuelle Termine» ausgewählt hast. - «3. Füge den unten stehenden Code auf deiner Website ein, wo das Widget erscheinen soll»: Nachdem du dein Widget fertig konfiguriert hast, kannst du den HTML-Code für deine Website kopieren. Diesen kannst du danach auf deiner Website dort einbauen, wo das Widget erscheinen soll.
Hinweis: Falls dieser Standard-Code nicht funktioniert, kannst du den Code einfügen, der unterhalb des Standard-Codes ersichtlich ist. Für Jimdo-Websites muss der alternative Code und nicht der Standard-Code verwendet werden, damit das Widget wie gewünscht funktioniert.
Integration mit JavaScript
SportsNow bietet dir die Möglichkeit deinen Stundenplan, deine Abos sowie deine Preise direkt in deine Website zu programmieren. Hier findest du eine Schritt-für-Schritt-Anleitung für Wix- und WordPress. Prinzipiell funktioniert die Programmierung für alle Systeme gleich. Für die Integration mit JavaScript werden Programmierkenntnisse vorausgesetzt. Den JavaScript-Code kannst du natürlich beliebig erweitern und modifizieren, beispielsweise kannst du nicht benötigte Spalten ausblenden.
Schritt-für-Schritt-Anleitung für WIX
- Füge einen «HTML-Code» hinzu. Dieser erlaubt dir zudem, einen eigenen JavaScript- und CSS Code in deine Seiten einzufügen.
- Klicke nun auf den HTML-Code, den du soeben eingefügt hast und klicke auf «HTML-Code bearbeiten». Es öffnet sich die Einstellungsmaske.
- Wähle als Modus: «HTML-Code».
- Im Eingabefeld musst du folgenden Code einfügen:
<h2>Live-Kalender</h2> <div id="calendar-container"></div> <h2>Stunden / Kurse</h2> <div id="schedule-container"></div> <h2>Workshops / Events</h2> <div id="events-container"></div> <h2>Preise</h2> <div id="pricing-container"></div> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script> jQuery(document).ready(function () { jQuery("#calendar-container").load("https://www.sportsnow.ch/providers/yoganow/calendar?locale=de"); jQuery("#schedule-container").load("https://www.sportsnow.ch/providers/yoganow/schedule?locale=de"); jQuery("#events-container").load("https://www.sportsnow.ch/providers/yoganow/events?locale=de"); jQuery("#pricing-container").load("https://www.sportsnow.ch/providers/yoganow/pricing?locale=de"); }); </script>
- Dieser Code muss noch ein wenig angepasst werden, damit es auch deine eigenen Daten lädt. Momentan lädt dieser Code, nämlich die Daten des Studios «YogaNow». Dazu musst du im obigen Code überall das Wort «yoganow» mit deiner eigenen URL austauschen. Diese kann herausgefunden werden, indem du auf www.sportsnow.ch deine eigene Seite aufrufst: https://www.sportsnow.ch/go/<Deine-URL>
- Auch die Sprache der Daten kannst du ändern. Wenn du die Daten lieber auf Englisch, Französisch oder Italienisch haben möchtest, dann musst du im obigen Code überall "locale=de" mit "locale=en", "locale=fr" oder "locale=it" ersetzen.
- Falls du ein Multilingual-Plug-in verwendest, womit die Sprache pro Seite gewechselt werden kann, dann verwende stattdessen folgenden Code mit automatischer Spracherkennung:
<script> var locale = 'de'; var pathNameParts = window.location.pathname.split('/'); switch (pathNameParts[1]) { case 'en': locale = 'en'; break; case 'fr': locale = 'fr'; break; case 'it': locale = 'it'; break; } jQuery(document).ready(function () { jQuery("#calendar-container").load("https://www.sportsnow.ch/providers/yoganow/calendar?locale=" + locale); jQuery("#schedule-container").load("https://www.sportsnow.ch/providers/yoganow/schedule?locale=" + locale); jQuery("#events-container").load("https://www.sportsnow.ch/providers/yoganow/events?locale=" + locale); jQuery("#pricing-container").load("https://www.sportsnow.ch/providers/yoganow/pricing?locale=" + locale); }); </script> - Eine Änderung der Farben der Links zeigen wir dir anhand des obigen Beispiels. Dazu haben wir folgenden CSS Code verwendet:
.button { color: red; }
- Mithilfe von CSS können einzelne Spalten von Tabellen ausgeblendet werden, damit die Tabellen responsive d.h. angepasst auf unterschiedliche Bildschirmgrössen dargestellt werden.
- Mit CSS kann die Integration grafisch individuell angepasst und das Design so gestaltet werden, dass es genau deinen Bedürfnissen entspricht. Für diese Einbindung sind jedoch entsprechende Programmierkenntnisse vorausgesetzt.
- Wenn du fertig bist, dann klicke auf «Aktualisieren». Nun werden deine SportsNow-Daten in den Bereichen des HTML-Codes geladen.
Schritt-für-Schritt-Anleitung für WordPress
- Installiere das «Script n Styles» Plugin, damit uns das Plugin erlaubt eigenen JavaScript und CSS Code in deine Seiten einzufügen.
- Lade das jQuery Script. Mithilfe von jQuery werden wir die Daten von SportsNow in WordPress laden.
- Erstelle eine neue Seite, wo du deine SportsNow-Daten integrieren möchtest. Nenne sie beispielsweise «Unser Stundenplan».
- Zuerst muss das «Scripts n Styles» Plugin aktiviert werden mittels «Ansicht anpassen» und danach muss der Editor in den «Text» Modus gewechselt werden.
- Im Editor musst du nun folgenden HTML-Code einfügen:
<h2>Live-Kalender</h2> <div id="calendar-container"></div> <h2>Stunden / Kurse</h2> <div id="schedule-container"></div> <h2>Workshops / Events</h2> <div id="events-container"></div> <h2>Preise</h2> <div id="pricing-container"></div>
- Füge jetzt den JavaScript-Code ein. Scrolle dazu ein wenig nach unten und gib folgenden Code ein:
jQuery(document).ready(function () { jQuery("#calendar-container").load("https://www.sportsnow.ch/providers/yoganow/calendar?locale=de"); jQuery("#schedule-container").load("https://www.sportsnow.ch/providers/yoganow/schedule?locale=de"); jQuery("#events-container").load("https://www.sportsnow.ch/providers/yoganow/events?locale=de"); jQuery("#pricing-container").load("https://www.sportsnow.ch/providers/yoganow/pricing?locale=de"); });
- Dieser Code muss noch ein wenig angepasst werden, damit es auch deine eigenen Daten lädt. Im Moment lädt dieser Code, nämlich die Daten des Studios «YogaNow». Dazu musst du im obigen Code überall das Wort «yoganow» mit deiner eigenen URL austauschen. Diese lässt sich herausfinden, indem du auf www.sportsnow.ch deine eigene Seite aufrufst: https://www.sportsnow.ch/go/<Deine-URL>
- Auch die Sprache der Daten kannst du ändern. Wenn du die Daten lieber auf Englisch, Französisch oder Italienisch haben möchtest, dann musst du im obigen Code überall "locale=de" mit "locale=en", "locale=fr" oder "locale=it" ersetzen.
- Falls du ein Multilingual-Plug-in verwendest, womit die Sprache pro Seite gewechselt werden kann, dann verwende stattdessen folgenden Code mit automatischer Spracherkennung:
<script> var locale = 'de'; var pathNameParts = window.location.pathname.split('/'); switch (pathNameParts[1]) { case 'en': locale = 'en'; break; case 'fr': locale = 'fr'; break; case 'it': locale = 'it'; break; } jQuery(document).ready(function () { jQuery("#calendar-container").load("https://www.sportsnow.ch/providers/yoganow/calendar?locale=" + locale); jQuery("#schedule-container").load("https://www.sportsnow.ch/providers/yoganow/schedule?locale=" + locale); jQuery("#events-container").load("https://www.sportsnow.ch/providers/yoganow/events?locale=" + locale); jQuery("#pricing-container").load("https://www.sportsnow.ch/providers/yoganow/pricing?locale=" + locale); }); </script> - Eine Änderung der Farben der Links zeigen wir dir anhand des obigen Beispiels. Dazu haben wir folgenden CSS Code verwendet:
.button { color: red; }
- Mithilfe von CSS können einzelne Spalten von Tabellen ausgeblendet werden, damit die Tabellen responsive d.h. angepasst auf unterschiedliche Bildschirmgrössen dargestellt werden.
- Mit CSS kann die Integration grafisch individuell angepasst und das Design so gestaltet werden, dass es genau deinen Bedürfnissen entspricht. Für diese Einbindung sind jedoch entsprechende Programmierkenntnisse vorausgesetzt.
Als Letztes kannst du deine Seite speichern. Du hast deine Programmierung erfolgreich abgeschlossen!
CSS Vorlage
Folgende CSS Vorlage kann als Grundlage verwendet und individuell angepasst werden, um die Darstellung den eigenen Wünschen anzupassen. Die Vorlage definiert einige Tabellenabstände, Schriftgrössen und sorgt dafür, dass die Integration auf mobilen Endgeräten (Smartphones und Tablets) gut aussieht.
/* SportsNow CSS Template */
/* Basic table styles */
table {
text-align: left;
width: 100%;
}
table td, table th {
border: 1px solid #cccccc;
font-weight: 300;
font-size: 16px;
padding: 5px;
}
table th {
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
}
table tr:nth-child(even), table thead tr {
background: #e3e3e3;
}
table td[colspan] {
font-weight: 500;
background-color: #efefef;
text-transform: uppercase;
}
.button {
color: red;
}
/* Responsiveness */
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
.calendar-container th:nth-of-type(3) {
display: none;
}
.calendar-container td:nth-of-type(3) {
display: none;
}
.calendar-container th:nth-of-type(4) {
display: none;
}
.calendar-container td:nth-of-type(4) {
display: none;
}
.calendar-container th:nth-of-type(5) {
display: none;
}
.calendar-container td:nth-of-type(5) {
display: none;
}
.schedule-container td:nth-of-type(3) {
display: none;
}
.schedule-container th:nth-of-type(3) {
display: none;
}
.schedule-container th:nth-of-type(4) {
display: none;
}
.schedule-container td:nth-of-type(4) {
display: none;
}
.schedule-container th:nth-of-type(5) {
display: none;
}
.schedule-container td:nth-of-type(5) {
display: none;
}
.events-container td:nth-of-type(4) {
display: none;
}
.events-container td:nth-of-type(5) {
display: none;
}
.events-container th:nth-of-type(4) {
display: none;
}
.events-container th:nth-of-type(5) {
display: none;
}
}Integration via SportsNow-Schnittstelle (API)
SportsNow bietet dir die Möglichkeit, die Daten deines Stundenplans programmatisch über eine Schnittstelle (API) zu laden und individuell auf deiner Website darstellen. Die Daten bieten wir über eine RESTful Webservice im JSON-Format an. Für die Integration via SportsNow-Schnittstelle (API) werden Programmierkenntnisse vorausgesetzt.
Voraussetzungen
- provider_id: Die ID deines Studios. Sende unserem Support eine Anfrage, um sie zu erhalten.
- Premium BASIC oder höher.
- Keine Authentifizierung nötig.
- Jeder HTTP Header muss folgender Wert beinhalten: Accept: application/json
Einfacher Test
Alle Endpunkte können in einem Terminal einfach mit curl getestet werden. Beispiel:
curl -X POST -H 'Content-Type: application/json' -d '{
"date": "2022-10-15",
"start_at_beginning_of_week": false
}' -v -i 'https://www.sportsnow.ch/platform/api/v1/public/provider/<providerID>/live_calendar'API-Endpunkte
Folgende API-Endpunkte stehen zur Verfügung:
Live-Kalender laden
POST https://www.sportsnow.ch/platform/api/v1/public/provider/{provider_id}/live_calendar
Die Aktion lädt den wöchentlichen Live-Kalender deines Studios.
Parameter
- provider_id: string (path), erforderlich
Die ID deines Studios. Sende uns eine Anfrage, um sie zu erhalten. - date: string (query), optional
Das gewünschte Startdatum des Live-Kalenders.
Format: YYYY-MM-DD.
Beispiel: "2022-01-31" für den 31. Januar 2022 - start_at_beginning_of_week: boolean (query), optional
Falls false, dann beginnt der Live-Kalender nicht anfangs Woche (montags).
Standardwert ist true. - locale: string (query), optional
Die gewünschte Sprache der Daten.
Optionen: de, en, fr, it
Standardwert: de
Antworten
- 200: Anfrage OK.
Beispiel-Antwort:[
{
"name": "Yoga",
"date": "2022-27-12",
"time_begin": "18:00",
"time_end": "19:00",
"team": "John",
"location_name": "Yoga Room",
"book_now_link": "https://www.sportsnow.ch/de/providers/yoganow/service_sessions/5131/bookings/new?date=2017-12-27",
"level": "service_session_level_all, service_session_level_basic, service_session_level_intermediate or service_session_level_advanced"
}
] - 400: Ungültige Parameter oder kein Premium aktiviert.
Stundenplan laden
POST https://www.sportsnow.ch/platform/api/v1/public/provider/{provider_id}/schedule
Die Aktion lädt den Stundenplan deines Studios.
Parameter
- provider_id: string (path), erforderlich
Die ID deines Studios. Sende uns eine Anfrage, um sie zu erhalten. - locale: string (query), optional
Die gewünschte Sprache der Daten.
Optionen: de, en, fr, it
Standardwert: de
Antworten
- 200: Anfrage OK.
Beispiel-Antwort:[
{
"name": "Yoga",
"weekday": 1,
"localized_weekday": "Monday",
"time_begin": "18:00",
"time_end": "19:00",
"team": "John",
"location_name": "Yoga Room",
"book_now_link": "https://www.sportsnow.ch/de/providers/yoganow/service_sessions/5131/bookings/new?date=2022-12-27",
"level": "service_session_level_all, service_session_level_basic, service_session_level_intermediate or service_session_level_advanced"
}
] - 400: Ungültige Parameter oder kein Premium aktiviert.
Workshops laden
POST https://www.sportsnow.ch/platform/api/v1/public/provider/{provider_id}/events
Die Aktion lädt die Workshops deines Studios.
Parameter
- provider_id: string (path), erforderlich
Die ID deines Studios. Sende uns eine Anfrage, um sie zu erhalten. - locale: string (query), optional
Die gewünschte Sprache der Daten.
Optionen: de, en, fr, it
Standardwert: de
Antworten
- 200: Anfrage OK
Beispiel-Antwort:[
{
"name": "Yoga Workshop",
"date": "2022-27-12",
"time_begin": "18:00",
"time_end": "19:00",
"team": "John",
"location_name": "Yoga Room",
"book_now_link": "https://www.sportsnow.ch/de/providers/yoganow/service_sessions/5131/bookings/new?date=2022-12-27",
"level": "service_session_level_all, service_session_level_basic, service_session_level_intermediate or service_session_level_advanced"
}
] - 400: Ungültige Parameter oder kein Premium aktiviert.
Abonnemente und Preise laden
POST https://www.sportsnow.ch/platform/api/v1/public/provider/{provider_id}/pricing
Die Aktion lädt die Abonnemente und Preise deines Studios.
Parameter
- provider_id: string (path), erforderlich
Die ID deines Studios. Sende uns eine Anfrage, um sie zu erhalten. - locale: string (query), optional
Die gewünschte Sprache der Daten.
Optionen: de, en, fr, it
Standardwert: de
Antworten
- 200: Anfrage OK
Beispiel-Antwort:[
{
"name": "Yoga",
"tickets": [
{
"name": "10er Abonnement Yoga (75 Min.)",
"description": "Yogakurs à 75 Minuten",
"price": 250,
"localized_price": "CHF 250.00",
"validity": "10 Wochen",
"credits": 10,
"localized_credits": "Guthaben 10"
}
]
}
] - 400: Ungültige Parameter oder kein Premium aktiviert.