#26 - Gate Content With Custom Modals

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

Conditional Visibility UX Marketing

Video Tutorial

Loom

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

26 lines

Paste this into Webflow

<!-- 💙 MEMBERSCRIPT #26 v0.1 💙 GATE CONTENT WITH MODALS -->
<script>
$memberstackDom.getCurrentMember().then(({ data }) => {
  if (!data) {
    // Member is not logged keywordin
    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 keywordfrom trigger
      // Uncomment the lines below to enable keywordthis functionality
      // trigger.funcremoveAttribute('href');
      // trigger.funcremoveAttribute('target');
      // trigger.funcremoveAttribute('rel');
      // trigger.funcremoveAttribute('onclick');
    });
  }
});
</script>

Tutoriel

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

Hello there! Are you looking to enhance your website's user experience by gating content with custom modals? You're in the right place! This tutorial will guide you through the process, as demonstrated in the video "How To Gate Content With Custom Modals In 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

Apply an attribute to the button: ms-code-gate-modal-trigger. The value for this attribute is a placeholder (for example, "X"). This attribute is crucial for triggering the modal.

Next, apply an attribute to the outer layer of the custom modal: ms-code-gate-modal-box. The value for this attribute should match the value you used for the button attribute (in this case, "X"). This attribute is essential for linking the button to the correct modal.

É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 !

For more detailed instructions, you can watch the full video tutorial here.