Qui peut utiliser cette fonction?

  • Administrateurs
  • FREE (lien vers la page SportsNow) / Premium BASIC (SportsNow Widget, 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.
De plus, le widget SportsNow te permet d'intégrer entièrement ta page SportsNow dans ton propre site web, selon tes souhaits individuels. Alternativement, tu peux charger les données de SportsNow par programme, via API ou JavaScript, sur ton propre site web. Ces trois dernières options te permettent d'afficher ton horaire ainsi que tes abonnements et les prix de SportsNow directement sur ton site. 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».


Le lien vers ta propre page SportsNow est visible dans ton domaine d'administrateur et est www.sportsnow.ch/go/<le nom de studio>. Par exemple, pour le studio YogaNow : www.sportsnow.ch/go/yoganow.

Il est possible de créer un lien vers sa propre page SportsNow directement sur le site web.


SportsNow Widget

Le widget te permet d'intégrer entièrement ta page SportsNow dans ton propre site web, selon tes souhaits individuels. Ainsi, plus rien ne t'empêche de réserver des heures de manière conviviale, pratique et simple. 


Bon à savoir

  • Explication du terme : un widget est un petit programme informatique qui s'intègre dans un autre programme.
  • Pour éviter les problèmes, le code HTML ou le widget ne doit pas être appliqué plusieurs fois sur la même page/site.
  • Le widget fonctionne pour tous les sites web sans aucune restriction.
  • Pour que tu puisses te faire une idée concrète du widget SportsNow, nous avons créé un site web de démonstration où le widget et les différentes sections sont présentés. Tu peux trouver le site de démonstration ici: https://demo.sportsnow.ch/


Avantages du SportsNow Widget 

  • Réserver et payer les abonnements de manière conviviale sans quitter le site.
  • Site Web toujours automatiquement mis à jour grâce à la gestion des données directement sur SportsNow.
  • Site web moderne grâce à l'intégration directe du portail vidéo et de la page d'actualités.
  • Présentation personnalisée grâce à l'affichage de toutes les sections du site du studio SportsNow.


Instructions étape par étape pour le SportsNow idget 

  • Dans ton domaine d'administrateur, sous «Apps & Intégrations» - «SportsNow Widget», tu peux configurer le widget selon tes besoins individuels.
  • «1. Sélectionne les sections souhaitées qui seront affichées dans le widget»: Ici, tu as la possibilité d'afficher ou de masquer certaines parties de la page SportsNow. Coche les zones que tu souhaites afficher dans le widget.
    Si tu ne sélectionnes qu'une seule zone, les onglets ne seront pas affichés. Cela peut être utile si tu souhaites intégrer le widget sur différentes pages de ton site, par exemple si tu veux afficher une page séparée pour l'emploi du temps, les ateliers ou les vidéos.
  • «2. Sélectionne le style souhaité pour le calendrier en direct»: SportsNow te permet également de configurer le style de ton calendrier en direct, c'est-à-dire le style dans lequel le calendrier en direct doit s'afficher. Cette option n'apparaît que si tu as choisi d'afficher le «Calendrier en direct», les «Workshops» ou les «Rendez-vous individuels» dans l'étape ci-dessus. 
  • «3. Colle le code ci-dessous sur ton site web, là où tu veux que le widget apparaisse.»: Une fois que tu as fini de configurer ton widget, tu peux copier le code HTML pour ton site web directement sur cette page.
    Tu peux ensuite insérer ce code HTML sur ton site Web à l'endroit où le widget doit apparaître.
    Si ce code standard ne fonctionne pas, tu peux insérer directement le code qui se trouve en dessous cucode standard. Pour les sites web Jimdo, il faut utiliser le code alternatif et pas le code standard pour que le widget fonctionne comme souhaité.

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.
  • Avec CSS, l'intégration peut être personnalisée graphiquement et le design peut être conçu pour répondre à tes besoins. Pour cette intégration, des connaissances en programmation sont toutefois nécessaires.
  • 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.
  • Avec CSS, l'intégration peut être personnalisée graphiquement et le design peut être conçu pour répondre à tes besoins. Pour cette intégration, des connaissances en programmation sont toutefois nécessaires.

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


Template CSS

Le modèle CSS suivant peut être utilisé comme base et personnalisé pour adapter la mise en page à tes propres besoins. Le modèle définit certains espaces entre les tableaux, les tailles de police et veille à ce que l'intégration soit agréable sur les appareils mobiles (smartphones et tablettes).

/** 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; }
}

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.


Exigences

  • provider_id: L'ID de ton studio. Envoie une demande à notre support pour l'obtenir.
  • Premium BASIC ou plus.
  • Aucune authentification n'est nécessaire.
  • Chaque HTTP header doit contenir la valeur suivante :  Accept: application/json


Test simple

Tous les endpoints peuvent être testés dans un terminal simplement avec curl. Exemple :


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 endpoints

Les API endpoints suivants sont disponibles :


Télécharger Live Calendar


POST https://www.sportsnow.ch/platform/api/v1/public/provider/{provider_id}/live_calendar

Cette action télécharge le calendrier hebdomadaire en direct de ton studio.


Paramètre


  • provider_id: string (path), requis
  • date: string (query), optional
    La date de début souhaitée pour le calendrier en direct.
    Format: YYYY-MM-DD. 
    Exemple : "2022-01-31" pour le 31 janvier 2022
  • start_at_beginning_of_week: boolean (query), optional
    Si false, le calendrier en direct ne commence pas en début de semaine (lundi). 

    La valeur par défaut est true.

  • locale: string (query), optional
    La langue souhaitée pour les données. 

    Options : de, en, fr, it

    Valeur par défaut : de


Réponses

  • 200: Demande OK.

    Exemple de réponse :
    [
    {
    "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: Paramètres invalides ou aucune premium activée.


Stundenplan laden


Paramètre


  • provider_id: string (path), requis
  • locale: string (query), optional
    La langue souhaitée pour les données. 

    Options : de, en, fr, it

    Valeur par défaut : de


Réponses

  • 200: Demande OK.

    Exemple de réponse :
[
{
"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: Paramètres invalides ou aucune premium activée.


Télécharger les workshops


POST https://www.sportsnow.ch/platform/api/v1/public/provider/{provider_id}/events

L'action télécharge les ateliers de ton studio.


Paramètre


  • provider_id: string (path), requis
  • locale: string (query), optional
    La langue souhaitée pour les données. 

    Options : de, en, fr, it

    Valeur par défaut : de


Réponses

  • 200: Demande OK.

    Exemple de réponse :
[
{
"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: Paramètres invalides ou aucune premium activée.


Télécharger les abonnements et les prix


POST https://www.sportsnow.ch/platform/api/v1/public/provider/{provider_id}/pricing

L'action télécharge les abonnements et les prix de ton studio.


Paramètre


  • provider_id: string (path), requis
  • locale: string (query), optional
    La langue souhaitée pour les données. 

    Options : de, en, fr, it

    Valeur par défaut : de


Réponses

  • 200: Demande OK.

    Exemple de réponse :
[
{
"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: Paramètres invalides ou aucune premium activée.