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 Kunden ermöglichen direkt deine Angebote zu buchen. Die einfachste Variante ist es die eigene SpotsNow-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. Mit einem Klick kann der Kunde das gewünschte Angebot direkt auf SportsNow buchen. 

Die Integration ermöglicht es dir somit ein besseres Besuchererlebnis auf deiner Website umzusetzen, indem du deine eigene SportsNow-Seite mit deiner Website verlinkst. SportsNow ist eine Online-Buchungsplattform und wird nicht als eigenständige Software installiert.

Gerne stellen wir dir die Möglichkeiten hier vor. 

Einige Kundenbeispiele, wie eine Website-Integration aussehen könnte, kannst du in unserem Blog-Beitrag hier finden: Grossartige Websites. Mit SportsNow integriert.


Gut zu wissen

  • Die Integration mittels iFrame wird nicht empfohlen, da diese Methode zu browserspezifischen Problemen beim Login oder bei Online-Bezahlungen führen kann. Es wird daher empfohlen die eigene SportsNow-Seite direkt zu verlinken oder eine Integration mittels JavaScript oder API umzusetzen.

Empfohlen: SportsNow-Seite verlinken

Die einfachste und beliebteste 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 Kunden 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.
Die eigene SportsNow-Seite kann direkt auf der Website verlinkt werden. 


SportsNow Widget
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 steht einem benutzerfreundlichem, bequemen und einfachen Buchen von Stunden nichts mehr in Wege.


Gut zu wissen

  • Begriffserklärung: Ein Widget ist ein kleines Computerprogramm, das in ein anderes Programm integriert wird.
  • Um Probleme zu vermeiden, sollte der HTML-Code bzw. das Widget nicht mehrmals auf der gleichen Seite/ Page angewendet werden.
  • Das Widget funktioniert für alle Websites ohne Einschränkungen. 
  • Damit du dir ein konkretes Bild von dem SportsNow-Widget machen kannst, haben wir eine Demo-Website erstellt, wo das Widget und die verschiedenen Bereiche präsentiert werden. Die Demo-Website kannst du hier finden: https://demo.sportsnow.ch/


Vorteile des SportsNow-Widgets

  • Kundenfreundliches Buchen und Bezahlen von Abonnementen ohne Verlassen der Website.
  • Website, die immer automatisch auf dem neuesten Stand ist, dank Verwaltung der Daten direkt auf SportsNow.

  • Moderne Website durch direktes Einbinden von Videoportal und News-Seite.

  • Individuelle Darstellung dank Einblenden von sämtlichen Bereichen der eigenen SportsNow-Seite.


Schritt-für-Schritt-Anleitung für das SportsNow Widget

  • In deinem Adminbereich unter «Apps & Integrationen» - «SportsNow Widget» kannst du 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.
    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.
    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 untenstehenden Code auf deiner Website ein, wo das Widget erscheinen soll»: Nachdem du dein Widget fertig konfiguriert hast, kannst du direkt auf dieser Seite den HTML-Code für deine Website kopieren.
    Diesen HTML-Code kannst du danach auf deiner Website dort einbauen, wo das Widget erscheinen soll.

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. 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 «local=de» mit «local=en», «local=fr» oder «local=it» ersetzen.
  • 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 graphisch individuell angepasst werden und das Design so gestaltet werden, das es genau deinen Bedürfnissen entspricht. Für diese Einbindung sind jedoch entsprechende Programmierkenntnise 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 einen 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 «local=de» mit «local=en», «local=fr» oder «local=it» ersetzen.
  • 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 graphisch individuell angepasst werden und das Design so gestaltet werden, das es genau deinen Bedürfnissen entspricht. Für diese Einbindung sind jedoch entsprechende Programmierkenntnise 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.