Wer kann diese Funktion benutzen?

  • Administratoren
  • FREE (SportsNow-Seite verlinken) / Premium BASIC (via Schnittstellen)


SportsNow kannst du einfach mit deiner Website integrieren und damit deinen Kunden ermöglichen direkt deine Angebote zu buchen. Die empfohlene Variante ist es die eigene SpotsNow-Seite auf der Website zu verlinken. Alternativ besteht die Möglichkeit SportsNow-Daten programmatisch, per API oder JavaScript, in die eigene Website zu laden. Dies ermöglicht 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.


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


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;

}

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

}


Als letztes kannst du deine Seite speichern. Du hast deine Programmierung erfolgreich abgeschlossen!


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. Du findest die Dokumentation zur Schnittstelle hier: SportsNow Platform API