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 ainsi à tes membres de réserver directement tes offres. La variante la plus simple est d'ajouter un lien vers ta page SpotsNow sur ton site web. En outre, le widget SportsNow te permet d'intégrer entièrement ta page SportsNow à ton propre site web, selon tes souhaits individuels. Il est également possible de charger des données SportsNow sur ton propre site web par programmation, via API ou JavaScript. Ces trois dernières options te permettent d'afficher ton emploi du temps, tes abonnements et tes prix SportsNow directement sur ton site. Ainsi, ton site web est toujours à jour. L'intégration te permet ainsi d'améliorer l'expérience des visiteurs sur ton site.
Bon à savoir
- SportsNow est une plateforme de réservation en ligne et n'est pas installé en tant que logiciel autonome.
- Tu trouveras quelques exemples de clients sur l'intégration d'un site web dans notre article de blog : Des sites Web formidables. Intégré avec SportsNow.
- 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 Widget, JavaScript ou API.
Lien vers la page SportsNow
La variante la plus simple est de créer un lien direct vers ta page SportsNow. Tu trouveras le lien vers ta page SportsNow dans ton espace d'administration. Pour que tu puisses commencer tout de suite, nous avons préparé pour toi 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é à n'importe quel site web à l'aide d'un simple code HTML. Un clic sur le bouton amène tes membres directement sur 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.
SportsNow Widget
Un widget est un petit programme informatique qui s'intègre dans un autre programme. Le widget fonctionne pour tous les sites web sans aucune restriction. Le widget te permet d'intégrer entièrement ta page SportsNow dans ton propre site web, selon tes souhaits individuels. Ainsi, la réservation et le paiement d'abonnements se font directement sur ton site web, sans le quitter. Le portail vidéo et la page d'actualités peuvent également être intégrés directement. Ton site est toujours automatiquement mis à jour grâce à la gestion des données sur SportsNow.
- Nous te recommandons d'intégrer le widget sur une page séparée de ton site web (par exemple la page "Horaire"). Pour un affichage optimal, toute la largeur de la page doit être utilisée pour le widget.
- Pour éviter tout problème, le code HTML ou le widget ne doit pas être utilisé plusieurs fois sur la même page.
- Design responsive : le widget dispose par défaut d'un design responsive, il s'adapte donc automatiquement à la taille de l'écran ou est optimisé pour un affichage sur ordinateur ou sur smartphone.
- Design et couleurs : Par défaut, le widget adopte automatiquement le design (CSS) du site web. En adaptant ton propre CSS, tu peux donc adapter le widget en conséquence. De plus, les couleurs de studio définies dans SportsNow sont automatiquement appliquées dans le widget à certains éléments comme les boutons et les textes, ainsi que la couleur des cours dans les paramètres des cours.
- Pour que tu puisses te faire une idée concrète du widget SportsNow, nous avons créé un site web de démonstration : https://demo.sportsnow.ch/
Autres paramètres
Le widget te permet d'effectuer d'autres réglages directement dans le code. Pour cela, tu peux insérer les paramètres ci-dessous dans le tag <sportsnow-app>.
- defaultClassFilter : Définis une valeur prédéfinie pour le filtre « Cours » dans l'affichage du calendrier en direct, de l'horaire ou du workshop, afin que seules les heures filtrées soient initialement affichées.
Exemple : <sportsnow-app defaultClassFilter=« Pilates Mat Class 2 » ...>. - defaultTeamFilter : Définir le filtre « Equipe » dans l'affichage du calendrier en direct, de l'horaire ou du workshop sur une valeur prédéfinie, de sorte que seules les cours du membre de l'équipe filtré soient initialement affichées.
Exemple : <sportsnow-app defaultTeamFilter=« Anna Moser » ...>. - defaultLiveStreamFilter: Définir le filtre « Livestream » dans l'affichage du calendrier en direct, de l'horaire, ou du workshop initialement sur « Livestream », de sorte que seules les heures de livestream soient affichées initialement.
Exemple : <sportsnow-app defaultLiveStreamFilter=« livestream_only » ...>.
Étape-par-Étape
Sur le web
- Clique dans le domaine d'administrateur sur « 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.
Note: 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.
Note: 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.
Note: 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 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> <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 locale=de par locale=en, locale=fr ou locale=it partout dans le code ci-dessus.
- Si tu utilises un plug-in multilingue qui permet de changer de langue par page, utilise plutôt le code suivant avec reconnaissance automatique de la langue :
var locale = 'fr'; var pathNameParts = window.location.pathname.split('/'); switch (pathNameParts[1]) { case 'de': locale = 'de'; break; case 'en': locale = 'en'; break; case 'it': locale = 'it'; break; } jQuery(document).ready(function () { jQuery("#calendar-container").load("https://www.sportsnow.ch/providers/yoganow/calendar?locale=" + locale); jQuery("#schedule-container").load("https://www.sportsnow.ch/providers/yoganow/schedule?locale=" + locale); jQuery("#events-container").load("https://www.sportsnow.ch/providers/yoganow/events?locale=" + locale); jQuery("#pricing-container").load("https://www.sportsnow.ch/providers/yoganow/pricing?locale=" + locale); }); - 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.
Étape-par-Étape
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 locale=de par locale=en, locale=fr ou locale=it partout dans le code ci-dessus.
- Si tu utilises un plug-in multilingue qui permet de changer de langue par page, utilise plutôt le code suivant avec reconnaissance automatique de la langue :
var locale = 'fr'; var pathNameParts = window.location.pathname.split('/'); switch (pathNameParts[1]) { case 'de': locale = 'de'; break; case 'en': locale = 'en'; break; case 'it': locale = 'it'; break; } jQuery(document).ready(function () { jQuery("#calendar-container").load("https://www.sportsnow.ch/providers/yoganow/calendar?locale=" + locale); jQuery("#schedule-container").load("https://www.sportsnow.ch/providers/yoganow/schedule?locale=" + locale); jQuery("#events-container").load("https://www.sportsnow.ch/providers/yoganow/events?locale=" + locale); jQuery("#pricing-container").load("https://www.sportsnow.ch/providers/yoganow/pricing?locale=" + locale); }); - 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.