Qui peut utiliser cette fonction?

  • Administrateurs
  • FREE (lien vers la page SportsNow) / Premium BASIC (JavaScript et API)


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. Alternativement, tu peux charger les données de SportsNow par programme, via API ou JavaScript, sur ton propre site web. Cela te permet d'afficher ton horaire, tes abonnements et les prix de SportsNow directement sur ton site web. Ainsi, ton site web est toujours à jour. En un clic, le client peut réserver l'offre souhaitée directement sur SportsNow. 

L'intégration te permet de créer une meilleure expérience pour les visiteurs de ton site web en liant ta propre page SportsNow à ton site web. SportsNow est une plateforme de réservation en ligne et n'est pas installée comme un logiciel autonome.

Nous sommes heureux de te présenter les possibilités offertes ici. 

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. 


Bon à savoir

  • L'intégration via iFrame n'est pas recommandée, car cette méthode peut entraîner des problèmes spécifiques au navigateur lors de la connexion ou du paiement en ligne. Il est donc recommandé de lier directement ta propre page SportsNow ou de mettre en place une intégration via JavaScript ou API.

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;
    }
  • À l'aide du CSS, les colonnes individuelles des tableaux peuvent être masquées afin que les tableaux soient affichés de manière réactive, c'est-à-dire adaptés à différentes tailles d'écran.
  • 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;
    }
  • À l'aide du CSS, les colonnes individuelles des tableaux peuvent être masquées afin que les tableaux soient affichés de manière réactive, c'est-à-dire adaptés à différentes tailles d'écran.

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 (voir «public»): SportsNow Platform API