#26 - Gate Content With Custom Modals v0.1

Utilisez des modèles personnalisés pour inciter vos visiteurs à obtenir un compte payant !

Voir le projet de démonstration En savoir plus sur Memberstack


<!-- 💙 MEMBERSCRIPT #26 v0.1 💙 GATE CONTENT WITH MODALS -->
<script>
$memberstackDom.getCurrentMember().then(({ data }) => {
  if (!data) {
    // Member is not logged in
    const triggers = document.querySelectorAll('[ms-code-gate-modal-trigger]');
    const boxes = document.querySelectorAll('[ms-code-gate-modal-box]');
    
    triggers.forEach(trigger => {
      trigger.addEventListener('click', () => {
        const targetId = trigger.getAttribute('ms-code-gate-modal-trigger');
        const box = document.querySelector(`[ms-code-gate-modal-box="${targetId}"]`);
        if (box) {
          box.style.display = 'flex';
        }
      });
      // Remove links and attributes from trigger
      // Uncomment the lines below to enable this functionality
      // trigger.removeAttribute('href');
      // trigger.removeAttribute('target');
      // trigger.removeAttribute('rel');
      // trigger.removeAttribute('onclick');
    });
  }
});
</script>

Création du scénario Make.com

1. Téléchargez le modèle JSON ci-dessous pour commencer.

Télécharger le fichier

2. Naviguez jusqu'à Make.com et créez un nouveau scénario...

3. Cliquez sur la petite boîte avec trois points, puis sur Import Blueprint...

4. Téléchargez votre fichier et voilà ! Vous êtes prêt à relier vos propres comptes.

Besoin d'aide avec ce MemberScript ?

Tous les clients de Memberstack peuvent demander de l'aide dans le Slack 2.0. Veuillez noter qu'il ne s'agit pas de fonctionnalités officielles et que le support ne peut être garanti.

Rejoignez le Slack 2.0

Notes de version

Attributs

Description

Attribut

Aucun élément n'a été trouvé.

Guides / Tutoriels

Comment construire des murs payants avec Webflow

Tutoriel

Comment gérer le contenu avec les Modaux Personnalisés dans Webflow : Un guide étape par étape

Bonjour à tous ! Vous souhaitez améliorer l'expérience des utilisateurs de votre site web en restreignant le contenu à l'aide de modules personnalisés ? Vous êtes au bon endroit ! Ce tutoriel vous guidera à travers le processus, comme démontré dans la vidéo "Comment gérer le contenu avec des modales personnalisées dans Webflow".

Qu'est-ce que le contenu modal ?

L'accès au contenu à l'aide d'une fenêtre modale est une fonctionnalité très répandue sur de nombreux sites web. Elle vous permet de montrer aux utilisateurs que certaines fonctionnalités existent, mais qu'ils doivent s'inscrire ou se connecter pour y accéder. C'est un excellent moyen d'encourager les visiteurs à mettre à jour leur plan ou à se connecter.

Guide étape par étape

Étape 1 : Comprendre les éléments

Dans Webflow, vous travaillerez avec deux éléments principaux : un bouton et une fenêtre modale personnalisée. Le bouton permet aux utilisateurs d'interagir avec votre contenu, et la fenêtre modale personnalisée s'affiche lorsqu'un visiteur non connecté clique sur un élément réservé aux membres.

Étape 2 : Appliquer les attributs

Appliquer un attribut au bouton : ms-code-gate-modal-trigger. La valeur de cet attribut est un espace réservé (par exemple, "X"). Cet attribut est crucial pour le déclenchement de la modale.

Ensuite, appliquez un attribut à la couche externe de la fenêtre modale personnalisée : ms-code-gate-modal-box. La valeur de cet attribut doit correspondre à la valeur que vous avez utilisée pour l'attribut button (dans ce cas, "X"). Cet attribut est essentiel pour lier le bouton à la bonne fenêtre modale.

Étape 3 : Personnalisation de la fenêtre modale

Vous pouvez personnaliser le contenu de votre module en fonction de vos besoins. Par exemple, vous pouvez inclure des liens vers une page d'inscription ou toute autre information pertinente.

Étape 4 : Masquer la fenêtre modale

Avant de publier votre site web, veillez à masquer votre fenêtre modale. Notez également que le script définit la modale comme étant flexible, ce qui est une pratique courante pour centrer tout ce qui se trouve à l'intérieur de la modale.

Étape 5 : Mise en œuvre de l'amendement 26

Collez le Memberscript 26 dans votre projet Webflow. Vous n'avez pas besoin de changer quoi que ce soit ici, sauf si vous utilisez une propriété d'affichage différente (comme block au lieu de flex).

Étape 6 : Ajustement des liens

Si votre bouton renvoie à une autre page, vous devrez adapter le script pour éviter que le lien n'interfère avec la fenêtre modale. Vous pouvez le faire en décommentant certaines lignes du script.

Étape 7 : Supprimer les attributs indésirables

Si vous souhaitez supprimer des attributs personnalisés, vous pouvez le faire en copiant et en collant une ligne de code spécifique du script.

Et c'est tout ! Vous avez réussi à mettre en place une barrière de contenu avec des modales personnalisées dans Webflow.

Conclusion

L'ajout de contenu à l'aide de fenêtres modales personnalisées est un moyen puissant d'améliorer l'expérience des utilisateurs de votre site web. Avec un seul script et deux attributs, vous pouvez créer une expérience plus attrayante et personnalisée pour vos visiteurs. Si vous rencontrez des problèmes, n'hésitez pas à nous contacter pour obtenir de l'aide. Bon codage !

Pour des instructions plus détaillées, vous pouvez regarder le tutoriel vidéo complet ici.

Texte du bouton

Qu'est-ce que Memberstack ?

Auth & paiements pour les sites Webflow

Ajoutez des logins, des abonnements, du contenu à accès limité, et plus encore à votre site Webflow - facile et entièrement personnalisable.

"Nous utilisons Memberstack depuis longtemps et il nous a aidé à réaliser des choses que nous n'aurions jamais imaginées avec Webflow. Il nous a aidé à réaliser des choses que nous n'aurions jamais cru possibles en utilisant Webflow. Il nous a permis de construire des plateformes avec beaucoup de profondeur et de fonctionnalité et l'équipe derrière lui a toujours été super utile et réceptif à la rétroaction"

Jamie Debnam

39 Numérique

"J'ai construit un site d'adhésion avec Memberstack et Jetboost pour un client. On a l'impression de construire quelque chose de magique avec ces outils. J'ai travaillé dans une agence où certaines de ces applications ont été codées à partir de zéro, je comprends enfin l'engouement suscité par ces outils. C'est beaucoup plus rapide et beaucoup moins cher."

Félix Meens

Studio Webflix

"L'un des meilleurs produits pour lancer un site d'adhésion - J'aime la facilité d'utilisation de Memberstack. J'ai pu mettre en place mon site d'adhésion en l'espace d'une journée.. Il n'y a rien de plus facile. Il fournit également les fonctionnalités dont j'ai besoin pour rendre l'expérience de l'utilisateur plus personnalisée."

Eric McQuesten

Nerds des technologies de la santé

Off World Depot

"Mon entreprise ne serait pas ce qu'elle est sans Memberstack. Si vous pensez que 30 $/mois c'est cher, essayez d'engager un développeur pour intégrer des recommandations personnalisées à votre site pour ce prix-là. Un ensemble d'outils incroyablement flexibles pour ceux qui sont prêts à faire quelques efforts minimes pour regarder leur documentation bien faite."

Riley Brown

Off World Depot

"La communauté Slack est l'une des plus actives que j'ai vues et les autres clients sont prêts à intervenir pour répondre aux questions et proposer des solutions. J'ai effectué des évaluations approfondies d'outils alternatifs et nous revenons toujours à Memberstack - gagnez du temps et tentez votre chance."

Abbey Burtis

Nerds des technologies de la santé

Voir tous les témoignages Essai gratuit

Slack

Besoin d'aide avec ce MemberScript ? Rejoignez notre communauté Slack !

Rejoignez le Slack de la communauté Memberstack et posez vos questions ! Attendez-vous à une réponse rapide d'un membre de l'équipe, d'un expert Memberstack ou d'un autre membre de la communauté.

Rejoignez notre Slack