-1.png?height=120&name=Logo%20Eversports%20Horizontal%20(1)-1.png)
Le widget est le lien vers le planning que vous pouvez intégrer sur votre site internet
Qu'est-ce qu'un widget ?
Un widget est un élément que vous pouvez ajouter à votre site internet, qui provient généralement d'une autre plateforme. Dans le contexte d'Eversports, un widget sert de lien entre votre site et les informations d'Eversports (planning, tarifs etc.).
En plaçant un widget Eversports Manager sur votre site internet, vos clients peuvent directement réserver sur votre planning, acheter vos carnets/abonnements etc. à partir de votre site.
Qu'est-ce que le nouveau widget planning ?
Le nouveau widget offre une vue d'ensemble de toutes vos activités sous forme de planning.
Ce widget mis à jour comprend une expérience mobile améliorée. L'intégration avec iframe, a été supprimée, ce qui améliore la facilité d'utilisation et garantit une meilleure sécurité face aux prochaines mises à jour des navigateurs.
Ce widget ne concerne pour le moment que l'intégration du planning :
Les autres sections du widget vont être développées petit à petit, par exemple:
- Tarifs
- Cartes cadeaux
- Ateliers, stages, évènements, retraites, camps, formations
- Connexion de l'utilisateur
Où se trouve maintenant la fonction de connexion de l'utilisateur ?
La fonctionnalité de connexion/inscription de l'utilisateur a été déplacée sur la page des détails de l'activité, à laquelle les utilisateurs peuvent accéder en cliquant sur les cartes du calendrier.
Si les utilisateurs se sont déjà connectés sur Eversports, ils seront déjà connectés à cette page.
De plus, si les utilisateurs se connectent une fois, ils ne devraient pas avoir besoin de se connecter à nouveau lorsqu'ils naviguent dans les différents cours du planning, car ils seront déjà connectés sur la page de cours qu'ils ouvriront.
Comment créer, personnaliser et intégrer le widget ?
Créer un nouveau lien
1. Allez dans Paramètres > Widgets [Beta]
Tous les widgets que vous créerez à l'avenir seront enregistrés ici, ce qui vous permettra d'y revenir facilement et de les modifier si nécessaire.
2. Cliquez sur "Créer un nouveau widget"
Remarque : si vous avez déjà un widget Eversports, nous l'avons automatiquement migré pour vous avec les paramètres sélectionnés. Dans ce cas, vous pouvez simplement cliquer sur les 3 points et le modifier.
3. Sélectionnez le type de widget que vous souhaitez intégrer
Sélectionnez "Planning" pour commencer.
4. Nommez votre widget
Donnez un nom à votre widget pour l'identifier facilement si vous en créez plusieurs par la suite. Ce nom est interne, vos clients ne le verront pas.
5. Choisissez comment segmenter votre widget
Vous avez la possibilité de pré-filtrer votre planning.
Par exemple, vous pouvez créer un planning avec seulement les cours du professeur X, un planning avec seulement les cours de votre groupe d'activité "Pilates" etc.
Ainsi, le planning s'affichera déjà filtré sur votre site internet et les clients n'auront pas besoin de le filtrer.
Si vous avez plusieurs profils Eversports Manager pour vos différents studios, vous aurez en plus la possibilité de sélectionner les studios que vous souhaitez afficher dans votre planning. Vous pourrez donc créer un planning par studio ou un planning combiné avec les 2 studios.
6. Personnalisez votre widget
Personnalisez votre widget pour qu'il s'intègre parfaitement à la charte graphique de votre site internet. Voici les zones personnalisables pour le widget que vous êtes en train de créer:
- Couleur arrière-plan : arrière-plan du planning, vous pouvez choisir la couleur de fond de votre site internet pour que le planning se fonde sur la page, ou choisir une autre couleur pour que le planning ressorte.
- Couleur boutons : bouton utilisé dans le sélecteur de date sur la version mobile de votre widget.
- Couleur police : couleur de la police du texte affichant les dates et les mois.
- Couleur police planning : couleur de la police utilisée sur le planning. La couleur de fond des cours est basée sur les couleurs de votre groupes d'activités, nous vous conseillons de choisir une couleur neutre (blanc ou noir par exemple) qui complète les groupes que vous avez sélectionnés.
7. Choisissez les infos à afficher sur le planning
Dans la dernière étape, vous pouvez sélectionner les informations que vous souhaitez faire figurer sur le planning:
- Prénom du professeur/entraîneur : affiche le nom du prof pour chaque cours (sur le téléphone, la photo du prof est également affichée).
- Salle/Terrain : indique la salle ou le terrain où se déroule l'activité (ceci n'est pas le lieu du cours, mais si vous avez plusieurs salles dans un même lieu, vous pouvez créer différentes salles et les afficher sur le planning).
- Nombres de places disponibles: affiche le nombre de places restantes pour chaque activité.
- Niveau de l'activité : indique le niveau de chaque activité (débutant, intermédiaire, avancé ou tous niveaux). Ces niveaux peuvent être sélectionnés dans les paramètres de chaque cours dans Activités > Gestion.
- Diviser les jours en Matin, Après-midi et Soir : permet de diviser le planning en trois parties selon le moment de la journée où le cours a lieu.
8. Prévisualisez le widget
Si vous souhaitez avoir un aperçu du widget que vous venez de créer, vous pouvez utiliser l'aperçu dans la page de configuration.
Veillez à enregistrer d'abord les paramètres pour voir comment votre style s'affichera sur le widget.
Après avoir enregistré vos paramètres, cliquez sur le lien pour obtenir un aperçu sur la droite de l'écran.
Obtenir le code du widget
Une fois le widget créé et personnalisé, vous pouvez l'enregistrer et copier son code.
Intégrer le code du widget sur votre site
Le code du widget planning peut être ajouté à un élément HTML dans votre éditeur de site internet.
IMPORTANT: le script ne doit être ajouté qu'une seule fois par page.
➡️ Si vous souhaitez insérer un seul widget sur une page:
Copier tout le code et insérer le dans un bloc HTML de votre site internet. 
➡️ Si vous souhaitez insérer plusieurs widgets sur une page:
1. Insérez le script: Assurez-vous que le script Eversports est inclus dans votre page web. Ce script est nécessaire pour que le widget fonctionne correctement.
<script type="module" src="https://widget-static.eversports.io/loader.js" async defer></script>
2. Ajoutez le code du widget: Placez l'extrait de code suivant à l'endroit où vous souhaitez que le widget apparaisse sur votre site web :
<div data-eversports-widget-id="your-widget-id-here"></div>
Remplacez « your-widget-id-here » par l'identifiant du widget qui vous a été fourni. Par exemple, si l'ID de votre widget est « 12345678-aaaa-bbbb-cccc-1234567890ab », le code ressemblera à ceci :
<div data-eversports-widget-id="12345678-aaaa-bbbb-cccc-1234567890ab"></div>
Cet élément peut être ajouté plusieurs fois par page.
Cela signifie que si vous souhaitez ajouter 2 widgets par page (ex: widget planning de la prof Aurélie et en dessous le widget planning de la prof Camille), vous pouvez ajouter le script + codes de cette manière:
<div data-eversports-widget-id="aaaaaaaaaa"></div>
<div data-eversports-widget-id="bbbbbbbbb"></div>
<script type="module" src="https://widget-static.eversports.io/loader.js" async defer></script>
Avez-vous actuellement intégré l'ancien widget avec iFrame ?
Comment remplacer les liens vers les autres onglets du widget ?
Les pages tarifs, ateliers, stages etc. ne sont pas encore créées sur le nouveau widget. Si vous utilisiez auparavant l'intégration par iFrame pour des pages telles que les ateliers, tarifs, cours, évènements, cartes cadeaux, vidéothèque etc., nous vous recommandons de créer un lien individuel vers ces pages dans la navigation de votre site internet à l'aide de l'ancien lien widget que vous trouverez dans le Manager. Vous pouvez également intégrer des liens vers des onglets spécifiques dans votre site.
Pour ce faire, copiez votre lien widget existant trouvé dans le Manager sous Paramètres > Profil > Lien widget et ajoutez les caractères suivants à la fin du lien :
Pour les ateliers : ?list=atelier
Pour les classes : ?list=classe
Pour les cours : ?list=course
Pour les formations : ?list=formation
Pour les cartes cadeaux : ?list=voucher
Pour la boutique : ?list=shop
Pour la vidéothèque : ?list=enregistrement
Pour les éducations : ?list=education
Exemple : https://www.eversports.at/widget/w/rhug07?list=voucher
Avez-vous actuellement intégré le lien vers votre profil sur le site eversports.fr ?
Dans ce cas:
- Créez une nouvelle page sur votre site internet et décidez où vous souhaitez afficher le calendrier sur cette page, ou ajoutez le calendrier à une page existante.
- Assurez-vous que le script est inclus sur cette page et placez l'élément
<div>à l'endroit où vous souhaitez que le calendrier apparaisse.
Besoin d'aide pour l'intégration ?
Si vous avez besoin d'aide pour cette intégration, veuillez nous écrire à l'adresse support@eversports.com ou directement prendre un rendez-vous en visio avec nous ici.