Widget

Nouveau widget Planning: intégration et personnalisation

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 : 


Screenshot 2024-06-19 at 13.49.00

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.

Screenshot 2024-06-19 at 13.51.21



Comment créer, personnaliser et intégrer le widget ?

 
Explication générale + intégration du Widget sur votre site internet (Wordpress)
 
Intégration du Widget sur votre site internet (Wix)

 

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.

Copier tout le code et insérer le dans un bloc HTML de votre site internet. 

  • Une fois que vous avez personnalisé votre widget, cliquez sur « Enregistrer les paramètres du widget » pour générer le code.
  • Utilisez le lien Aperçu pour visualiser vos modifications avant d'intégrer le widget.
  • Copiez le code fourni et collez-le dans un block HTML votre site web à l'endroit où vous souhaitez que le widget apparaisse. Si vous préférez l'ajouter derrière un bouton, vous pouvez copier le lien ici:

Avez-vous actuellement intégré l'ancien widget avec iFrame ?

Si vous utilisez actuellement le widget iFrame et souhaitez le remplacer par le nouveau widget de calendrier, supprimez simplement le code de l'iFrame. Puisque nous n'utilisons plus d'iframe, toute section spécifique désignée pour les iFrames n'est plus nécessaire. Collez le nouveau code dans un module HTML.

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: 

  1. 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.
  2. 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.
En suivant ces étapes, vous pouvez intégrer sans problème le widget de calendrier Eversports sur votre site internet, offrant une meilleure expérience utilisateur et conservant le contrôle sur la navigation de votre site.

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.