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
Nous allons utiliser une technologie web nommée "iframe" pour afficher l'Espace Membre Web sur votre site. Une iframe peut-être considérée comme une fenêtre de visualisation d'un autre site qui serait intégré dans votre site.
É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
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 : Création de votre 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.
Étape 3 : Personnalisation des Espaces Membres
Si vous ne l'avez pas encore fait en suivant ce tutoriel, paramétrez vos Espaces Membres Web et application en passant par :
Pour en apprendre davantage sur le paramétrage des Espaces Membres, consultez notre article en cliquant ici.
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.
| Félicitations ! Vous savez maintenant comment intégrer l'iframe Xplor Deciplus sur votre site internet. |
Commentaires
Vous devez vous connecter pour laisser un commentaire.