#26 - Gate Content With Custom Modals v0.1

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

View demo project Learn about 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 ?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

Join the 2.0 Slack

Version notes

Attributs

Description

Attribut

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

Guides / Tutorials

How to Build Paywalls with 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

#26 - Gate Content With Custom Modals v0.1

Création du scénario Make.com

Besoin d'aide avec ce MemberScript ?

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

Qu'est-ce que le contenu modal ?

Guide étape par étape

Étape 1 : Comprendre les éléments

Étape 2 : Appliquer les attributs

Étape 3 : Personnalisation de la fenêtre modale

Étape 4 : Masquer la fenêtre modale

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

Étape 6 : Ajustement des liens

Étape 7 : Supprimer les attributs indésirables

Conclusion

Auth & paiements pour les sites Webflow

Essayez Memberstack gratuitement

Produit

Langue

Learn about Memberstack

Entreprise

Ressources