Cet article vous montre comment utiliser la fonctionnalité Hosted Content de Memberstack. Cet outil pratique vous permet de contrôler l'accès à un contenu à accès limité en fonction du statut de connexion de l'utilisateur. Si, par exemple, un utilisateur se connecte à son compte Webflow, la page affiche un bouton de téléchargement actif. Pour les visiteurs déconnectés, Webflow désactive le bouton.

Nous vous montrerons également comment étendre cet outil en ajoutant un lien de menu sécurisé qui ne s'affiche que pour les utilisateurs connectés.

Création d'un état connecté

La première étape consiste à créer un état de connexion pour les utilisateurs de Webflow. Dans cet exemple, l'interface utilisateur est un bouton de téléchargement avec une pièce jointe.

Une fois tout cela mis en place, nous devons publier le site, aller sur la page publiée et copier le code HTML du bouton.

1. Cliquez avec le bouton droit de la souris sur l'élément que vous souhaitez stocker dans Memberstack.
2. Sélectionnez Inspecter.

3. Allez dans le panneau Éléments et copiez le code HTML du bouton de téléchargement.

Mise en place de Memberstack

Accédez à votre compte Memberstack.

1. Cliquez sur Gated Content dans le menu latéral, puis sur le bouton Add.

Descendez jusqu'à la rubrique Contenu hébergé (facultatif).

1. Assurez-vous que le champ Type de contenu affiche HTML.
2. Collez le code HTML du Webflow dans le champ.
3. Saisissez un nom pour le contenu.
4. Cliquez sur le bouton Ajouter du contenu.

Pour enregistrer le contenu, vous devez remplir les autres champs obligatoires. Saisissez des informations de remplacement si nécessaire.

Création d'un état de chargement

Créez maintenant un état de chargement sur le Webflow. Cet état affiche la même page de téléchargement mais supprime le contenu sécurisé.

1. Retournez à la page de téléchargement de Webflow.
2. Sélectionnez l'élément hébergé dans le canevas.
3. Je recommande de remplacer les informations sensibles, le contenu et les liens par des espaces réservés. Dans la mesure du possible, essayez de conserver les mêmes noms de classe afin qu'ils soient enregistrés dans Webflow.
4. Le contenu de votre espace réservé ne sera pas visible longtemps (généralement moins d'une demi-seconde), mais il est tout de même judicieux de le rendre attrayant.

Dans cet exemple, j'ai supprimé le lien de téléchargement et modifié le texte du bouton.

• Si un visiteur du site clique sur le bouton de la page en direct, rien ne se passe.

Ajout d'un attribut

C'est presque terminé !

1. Retournez sur le site de Memberstack.
2. Allez dans la section Contenu hébergé.
3. Cliquez sur le bouton d'installation HTML.
4. Dans la fenêtre contextuelle, cliquez sur l'icône de copie

Retourner à Webflow.

1. Sélectionnez l'élément du bouton.
2. Allez dans le panneau de droite et ouvrez le dossier Custom attributes.
3. Collez les attributs Nom et Valeur.
4. Cliquez sur Publier.

Tester le lien

Allez sur la page Webflow en direct et connectez-vous. Webflow affiche un bouton actif et un lien de téléchargement.

‍

C'est tout.

Vous avez créé un bouton avec un lien sécurisé vers un contenu protégé.

Ajout d'un lien sécurisé

Cette fonction vous permet d'insérer dynamiquement des liens pour les membres. Le lien ne s'affichera que pour les membres connectés.

Retournez à la section Contenu hébergé dans votre tableau de bord Memberstack.

1. Cliquez sur le champ Type de contenu et sélectionnez Lien.
2. Collez l'URL de la page sécurisée (téléchargement, lien de la boîte Dropdrop, vidéo Youtube, etc.)
3. Ajouter un nom pour ce lien.
4. Cliquez sur Enregistrer.

• Dans la fenêtre contextuelle, copiez les attributs de données pour ce lien sécurisé.

• Ensuite, retournez dans Webflow. Et ajoutez un lien vers votre site. Dans cet exemple, j'ai ajouté un lien vers la barre de navigation de mon site de marketing.

1. Ouvrez l'interface utilisateur des attributs personnalisés.
2. Collez les attributs du lien.
3. Cliquez sur Publier.

• Allez sur la page live et connectez-vous. Webflow affiche le lien du menu sécurisé.

• Lorsque je clique sur le lien du menu, Webflow ouvre la bonne page.

• Lorsque je me déconnecte du site, Webflow supprime le lien du menu sécurisé.

‍

C'est tout.

Vous savez maintenant comment créer des liens pour des contenus sécurisés qui peuvent être ajoutés à des boutons de téléchargement ou à une barre de navigation.