#26 - Gate Content With Custom Modals v0.1

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


<!-- 💙 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é.

Guide

How to Build Paywalls with Webflow

Memberscripts needed

#26 - Gate Content With Custom Modals

Tutorial

Cloneable

https://webflow.com/made-in-webflow/website/open-modal-click-not-loggedin

Why/When would need to Build Paywalls?

Restrict functionalities only meant for logged in users.
Put premium content behind a paywall.

Many websites nowadays do something called gating content, sometimes even putting content behind a paywall.

What this means is that users can see that a certain piece of content or a feature exists, but once they try to see or use it, they’ll be informed that they need to perform an action before they can access it. This typically involves signing up for an account, paying, or both.

Today we’ll look at how you can implement this functionality into your own Webflow site using Memberstack.

How to gate content on Webflow

To be able to gate content, we’re going to use MemberScript #26 – Gate Content With Custom Modals. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting everything up

First, you need to decide what exactly on your page you want to gate from users. In our example, we’re going to assume you’ve got a Like/Unlike functionality on your page which is restricted to users who are logged in.

Go ahead and build a pop-up modal that informs users that they need to be logged in to like or unlike content on your site.

Next up, select the like/unlike buttons on your page and add the following attribute:

ms-code-gate-modal-trigger=”x”

Once that’s done, select your modal and add this attribute:

ms-code-gate-modal-box=”x”

We’re using “x” as a value just to match the trigger to the pop-up modal, so it can be whatever you want. For our purpose, it could be “like”. If you add another pop-up modal to your site with a different type of trigger, you can link them using a different value for the attributes.

This allows you to use as many triggers and modals on a site as you like without mixing them up, while also being able to customize your pop-up modals to reflect the different types of triggers (e.g. Like/Unlike, message a user, download gated content, etc.).

Making it work

Now that you’ve got the form set up, all you need to do is add the MemberScript #26 custom code to your page, before the closing body tag.

There are two things you might want to change in the custom code:

the modal’s display style – by default it’s set to flex, but if you’ve styled it in a different way, you can just replace flex with block, for example.
uncomment certain lines – you’ll see at the end of the custom code there are some lines meant to remove certain attributes from the trigger, depending on what the trigger does. For example, if the trigger opens a link to content that you want gated, you’ll need to uncomment the line that removes the href attribute. To do this, simply remove the two forward slashes from the beginning of the line.

A screen shot of a computer programDescription automatically generated

Before publishing the page, don’t forget to set your pop-up modal to hidden, so they only appear when needed.

Conclusion

That’s everything, you can now go ahead and test out your pop-up modal for users who aren’t logged in.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you gate content or features with custom modals using a very simple, attribute-based solution.

Take me to the Scripts

#26 - Gate Content With Custom Modals

Read full guide

Tutorial

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 ?

How to Build Paywalls with Webflow

Memberscripts needed

Tutorial

Cloneable

Why/When would need to Build Paywalls?

How to gate content on Webflow

Setting everything up

Making it work

Conclusion

Take me to the Scripts

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

Essayez Memberstack gratuitement

Produit

Langue

Clients

Entreprise

Ressources

Something not working as expected?