Intégrer l'iframe de l'Espace Membre Web Xplor Deciplus sur votre site

Benjamin Hurtado

28 février 2023 09:28

Vous trouverez dans cet article, l'essentiel à connaître si vous souhaitez intégrer l'Espace Membre Web XPlor Deciplus sur votre site internet. Certaines données sont techniques et nécessitent des connaissances en développement web.

Avant de commencer

Iframe : définition et intégration

👉 Un iframe, c’est comme une fenêtre ouverte vers l'Espace Membre Web Xplor Deciplus dans votre site internet.
À travers cette fenêtre, vos adhérents voient et utilisent directement un autre espace (par exemple, l’Espace Membre avec le planning, les réservations ou la boutique) sans quitter votre site.

Sur le plan technique, il conviendra de définir ou de créer un espace dédié sur votre site internet pour y intégrer la page de votre choix.

Vous pourrez ensuite y insérer la balise suivante :

<iframe name="cadreespaceresa" src="LeLienQueJaiChoisi" width="100%" height="1000" frameborder="0"></iframe>

Remplacez "LeLienQueJaiChoisi" par l’un des liens proposés dans la partie suivante.

ℹ️ Remplacez cadresespaceresa par le nom de votre choix.

ℹ️ Remplacez LeLienQueJaiChoisi par l'un des liens intégrables présentés ci-dessous.

Quelques points techniques à connaître pour bien intégrer l'URL de l'iframe

Les espaces dans les noms deviennent %20 dans l’URL.
Les tirets - deviennent %2D.
Vérifiez qu’il n’y a pas d’espace invisible dans le nom de la ressource, de l'activité ou du coach sur lequel vous souhaitez filtrer votre URL.
Pour un affichage optimal en mode "Desktop", il conviendra de définir une width (largeur) d'au moins 1280px.

Étape 1 : Sélection de la "vue" à afficher

Avant d'intégrer votre Espace Membre à votre site web, vous devez choisir quelle "vue" sera affichée en premier sur votre site.

Certains liens seront accessibles sans authentification, d'autres nécessiteront une authentification du membre avant de pouvoir être affiché.

Consultez cet article pour savoir comment paramétrer votre Espace Membre Web afin d'autoriser la consultation des vues disponibles sans authentification.

Vues accessibles après paramétrage

Vue "tunnel d'inscription" (recommandé) :

https://member-app.deciplus.pro/nomdevotreclub

Si vous avez plusieurs sites, vous devrez sélectionner le site que vous souhaitez consulter.

Vue Planning :

https://member-app.deciplus.pro/nomdevotreclub/calendar

Filtres utilisables

calendarByZone/numérodelazone, calendarByCoach/nomducoach, calendarByActivity/nomdelactivitee.

Ces filtres vous permettront :

d’afficher le planning d’une zone précise (ex. : salle, piscine, terrain),
de mettre en avant une ressource particulière (ex. : « Espace Aqua »),
de montrer uniquement les cours d’un coach ou d’une activité donnée.

Intégration des menus personnalisés

Vue Boutique :

https://member-app.deciplus.pro/nomdevotreclub/shop

Vous pourrez personnaliser la façon dont les tarifs s'affichent. Pour savoir comment modifier l'affichage des tarifs des prestations que vous proposez, cliquez-ici.

Seuls les produits et prestations configurés pour l'affichage en ligne seront proposés sur cette vue. Pour savoir comment paramétrer un article pour la vente en ligne, cliquez ici. Pour savoir comment paramétrer une prestation pour la vente en ligne, cliquez là.

Vues accessibles sans paramétrage

Vue authentification :

https://member-app.deciplus.pro/nomdevotreclub/signIn

Vue Création de compte :

https://member-app.deciplus.pro/nomdevotreclub/signUp

Étape 2 : code à intégrer sur la page internet

Une fois la vue sélectionnée, nous vous conseillons de créer une page dédiée à votre "Espace Membre" et d'intégrer un lien vers cette page sur le menu de votre site. Cela sera bénéfique pour l'affichage de l'iframe.

Dans cette page "Espace Membre", ajoutez le code iframe :

<iframe src="Insérez ici le lien de la vue choisie" width="100%" height="1000" frameborder="0" ></iframe>

Notifications Espace Membre Web

L'Espace Membre peut notifier l'utilisateur via des petites bannières qui s'afficheront en haut de l'iframe. Veillez donc, dans le paramétrage de votre page internet, à faire en sorte que rien ne cache l'iframe dans sa partie haute, comme par exemple le menu global de votre site.

Votre iframe n'est pas dans une page dédiée

Si vous ne souhaitez pas créer une page dédiée à votre iframe, veillez à ce que l'iframe dispose d'assez d'espace pour s'afficher sans gêner la navigation du site ni celle à l'intérieur de l'iframe.

Par exemple, votre iframe peut intégrer du défilement de page (scroll). Il est en conséquence conseillé d'intégrer l'iframe dans une page sans scroll ,afin de ne pas créer de doubles défilements.

Données techniques

Le contenu de votre iframe est responsive, c'est-à-dire qu'elle adapte l'affichage du contenu en fonction de l'espace disponible.

Afin de vous faciliter l'intégration, voici les break points utilisés :

Break point global : 992px, en dessous l'iframe passe en mode mobile

Break points secondaires : 500px, 640px et 1024px. Selon ces break points, les containers du contenu des pages verront leurs dispositions adaptées.

Tableau de tunnel personnalisé :

Utilisations du tunnel

Pour utiliser le tunnel, l'URL doit être member-app.deciplus.pro/(NomDeLaZone)/tunnel?(mesQuery)

Chaque query doit être ajoutée sous cette forme : NomDuQuery=ValeurDuQuery

Chaque query, s'il est possible d'en insérer plusieurs successivement (cf tableau suivant, colonne multiple) doit être séparée de la précédente par une esperluette (&).

Nom du Query	Description	Multiple
unconnectedWelcomeModal	Affiche les produits gratuits à l’inscription aux non-connectés
connectedWelcomeModal	Affiche les produits gratuits à l’inscription aux connectés
noCornerLogo	Cache ou affiche le logo (affiché par défaut)
singleZone	Force toutes les zones à celle-ci (prioritaire sur tous les autres query zone)
unconnectedWelcomePage	Redirige vers la page en valeurs les utilisateurs non connectés
connectedWelcomePage	Redirige vers la page en valeurs les utilisateurs connectés
calendarByZone	Préfiltre la zone du calendrier
calendarByResource	Préfiltre la ressource du calendrier	X
calendarByActivity	Préfiltre l’activité du calendrier	X
calendarByCoach	Préfiltre le coach du calendrier	X
shopByZone	Préfiltre la zone du shop
customMenu	Ignore tous les autres query. Redirige vers le calendrier avec le custom menu pré-sélectionné.