Stundenplan, Abos und Preise mit Website integrieren 🌐

Du kannst die wichtigsten Informationen deines Studios von SportsNow direkt auf deiner Website verlinken. Weiter unten erklĂ€ren wir dir Schritt-fĂŒr-Schritt wie du eine Integration in deine Wix- oder WordPress-Website machst.

Wie deine Website mit einer SportsNow Integration aussehen könnte, findest du hier.

Schritt-für-Schritt-Anleitung:
  • Gehe auf “Mein Adminbereich”.
  • WĂ€hle das Feld “Mit meiner Website integrieren”.
  • Direkt unter dem Titel “Mit meiner Website integrieren” findest du den Link #BOOKWITHSPORTSNOW, der dir einige gute Beispiele zeigt, wie du deine SportsNow-Seite in deine Website integrieren kannst.
  • Du hast nun die Möglichkeit entweder auf “SportsNow Button” oder auf “Deine eigene SportsNow-Seite” zu klicken.
  • Wenn du “SportsNow Button” anwĂ€hlst, dann werden dir verschiedene Grössen des SportsNow-Logos in verschiedenen Sprachen angezeigt und du kannst dann vom gewĂŒnschten Button ganz einfach den HTML-Code kopieren.
  • Mit einem Klick auf “Deine eigene SportsNow-Seite” hast du weitere Möglichkeiten, wie du SportsNow mit deiner Website integrieren kannst. Dazu gehören die Auswahl von Farben deiner Website und das Einbetten mit iFrame. Du kannst total zwei Studiofarben einstellen, mit einem Klick auf den Pinsel öffnest du die Farbpalette. Das Eingabefeld wird ĂŒbrigens automatisch mit dem HTML-Code ausgefĂŒllt. Bist du zufrieden mit deinem Design, so kannst du mit einem Klick auf „Einstellungen speichern“ deine Farbwahl bestĂ€tigen.

Integration in deine Wix-Website

Schritt-für-Schritt-Anleitung:
  • FĂŒge einen HTML-Code hinzu. Dieser erlaubt uns zudem, einen eigenen JavaScript und CSS Code in unsere Seiten einzufĂŒgen.

  • Klicke nun auf den HTML-Code, den du soeben eingefĂŒgt hast und drĂŒcke auf „HTML-Code bearbeiten“. Es öffnet sich die Einstellungsmaske.
  • WĂ€hle als „Modus“ „HTML-Code“.

  • Im Eingabefeld musst du folgenden Code einfĂŒgen:

<style>
.button {
color: red;
}
</style>

<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 drĂŒcke auf „Aktualisieren“. Nun sollten deine SportsNow-Daten in den Bereichen des HTML-Codes geladen werden.

Integration in deine WordPress-Website

Schritt-für-Schritt-Anleitung:
  • Installiere das „Script n Styles“ Plugin, damit uns das Plugin erlaubt unseren eigenen JavaScript und CSS Code in unsere 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 Bild rot markiert).
  • 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 Website erfolgreich integriert!

Integration mit der SportsNow-Schnittstelle (API)

Du kannst die Daten deines Stundenplans auch programmatisch ĂŒber unsere Schnittstelle (API) laden und völlig individuell auf deiner Website darstellen. Die Daten bieten wir ĂŒber eine RESTful Webservice im JSON-Format an.
Du findest die Dokumentation zur Schnittstelle hier: SportsNow Platform API

 

Tags: Website, Integration, Wix, WordPress, Website-Integration

Hat das deine Frage beantwortet?


de_DEDeutsch
fr_FRFrançais en_USEnglish de_DEDeutsch