Qui peut utiliser cette fonction?

  • Administrateurs
  • FREE (lien vers la page SportsNow) / Premium BASIC (via les interfaces)


Tu peux facilement intégrer SportsNow à ton site web et permettre à tes clients de réserver directement tes offres. L'option recommandée est de créer un lien vers ta propre page SpotsNow sur ton site web. Tu peux également charger les données de SportsNow par programme, via API ou JavaScript, sur ton propre site web. Nous sommes heureux de te présenter ici les possibilités qui s'offrent à toi. Tu peux trouver des exemples de clients de ce à quoi pourrait ressembler une intégration de site web dans notre article de blog ici : Des sites Web formidables. Intégré avec SportsNow. 


Recommandé : Lien vers la page SportsNow

Le moyen le plus simple et le plus populaire est de créer un lien direct vers ta page SportsNow. Tu peux trouver le lien vers ta page SportsNow dans ton domaine d'administrateur. Pour te permettre de commencer tout de suite, nous avons préparé un bouton SportsNow avec le lien vers ta page SportsNow. Ton propre bouton SportsNow peut être utilisé dans différentes tailles et langues. Il peut être intégré sur chaque site web à l'aide d'un simple code HTML. Un clic sur le bouton amène tes clients directement à ta page SportsNow. Tu peux trouver le code HTML dans ton domaine d'administrateur sous «Apps & Intégrations» - «SportsNow Button».


Intégration avec JavaScript

SportsNow t'offre la possibilité de programmer ton  horaire, tes abonnements et tes prix directement sur ton site web. Voici un guide étape par étape pour Wix et WordPress. En principe, la programmation fonctionne de la même manière pour tous les systèmes. Des connaissances en programmation sont requises pour l'intégration avec JavaScript. 


Instructions étape par étape pour WIX

  • Ajoute un «Code HTML». Cela te permet également d'ajouter ton propre code JavaScript et CSS à tes pages.
  • Clique maintenant sur le code HTML que tu viens d'insérer et clique sur «Editer HTML-Code». Le masque de paramétrage s'ouvre.
  • Choissis comme Mode : «HTML-Code».
  • Dans la zone de saisie, il faut insérer le code suivant :
    <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>
  • Ce code a encore besoin d'un petit ajustement pour qu'il puisse charger tes propres données. Pour l'instant, ce code charge les données du studio «YogaNow». Pour ce faire, tu dois remplacer le mot «yoganow» par ta propre URL partout dans le code ci-dessus. Tu peux le découvrir en allant sur www.sportsnow.ch et en appelant ta propre page : https://www.sportsnow.ch/go/<Ta-URL>
  • Tu peux également changer la langue des données. Si tu préfères avoir les données en anglais, français ou italien, tu dois remplacer «local=de» par «local=en», «local=fr» ou «local=it» partout dans le code ci-dessus.
  • Un changement des couleurs des liens est montré dans l'exemple ci-dessus. Nous avons utilisé le code CSS suivant :
    .button {color: red;
    }
  • Lorsque tu as terminé, clique sur «Actualiser». Maintenant, tes données SportsNow seront chargées dans les zones de code HTML.


Instructions étape par étape pour WordPress

  • Installe le plugin «Script n Styles», afin que le plugin nous permette d'insérer un propre code JavaScript et CSS dans tes pages.
  • Charge le script jQuery. En utilisant jQuery, nous allons charger les données de SportsNow dans WordPress.
  • Crée une nouvelle page où tu souhaites intégrer tes données SportsNow. Par exemple, nomme-le «Notre horaire».
  • D'abord tu dois activer le plugin «Scripts n Styles» en utilisant «Customize View» et ensuite tu dois passer l'éditeur en mode «Text».
  • Dans l'éditeur, tu dois maintenant insérer le code HTML suivant:
    <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>
  • Maintenant, insère le code JavaScript. Fais défiler un peu vers le bas et entre le code suivant : 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");
    });
  • Ce code a encore besoin d'un petit ajustement pour qu'il puisse charger tes propres données. Pour l'instant, ce code charge les données du studio «YogaNow». Pour ce faire, tu dois remplacer le mot «yoganow» par ta propre URL partout dans le code ci-dessus. Tu peux le découvrir en allant sur www.sportsnow.ch et en appelant ta propre page : https://www.sportsnow.ch/go/<Ta-URL>
  • Tu peux également changer la langue des données. Si tu préfères avoir les données en anglais, français ou italien, tu dois remplacer «local=de» par «local=en», «local=fr» ou «local=it» partout dans le code ci-dessus.
  • Un changement des couleurs des liens est montré dans l'exemple ci-dessus. Nous avons utilisé le code CSS suivant :
    .button {color: red;
    }

La dernière chose que tu puisses faire est de sauvegarder ta page. Tu as réussi ta programmation ! 


Intégration via l'interface SportsNow (API)

SportsNow t'offre la possibilité de charger tes données d'horaires par programme via une interface (API) et de les afficher individuellement sur ton site web. Nous proposons les données via un service web RESTful au format JSON. Pour l'intégration via l'interface SportsNow (API), des compétences en programmation sont requises. Tu trouveras la documentation relative à l'interface ici : SportsNow Platform API