Utilisez des modèles personnalisés pour inciter vos visiteurs à obtenir un compte payant !
View demo projectCréation du scénario Make.com
1. Téléchargez le modèle JSON ci-dessous pour commencer.
2. Naviguez jusqu'à Make.com et créez un nouveau scénario...
![](https://cdn.prod.website-files.com/5bbfaf3252489b4c484ba9b9/648c5b1fbc7994f029551c78_Screen%20Shot%202023-06-16%20at%208.51.21%20AM.jpg)
3. Cliquez sur la petite boîte avec trois points, puis sur Import Blueprint...
![](https://cdn.prod.website-files.com/5bbfaf3252489b4c484ba9b9/648c5b29e80e81cad00f11c8_Screen%20Shot%202023-06-16%20at%208.51.33%20AM.jpg)
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 SlackHow 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](https://cdn.prod.website-files.com/5c2a9a234fdbba7439c48fa4/657c4afdacaa470dfa280be8_Bv3lwk50EkCbcYUh8bleYMORuEJOwyBpp1-A_RCp8pvYZTSCBhggauZ7kYcFx9t-X2CLQJvGxXankMZE2v8VIzutlpaQFCe5IzcXdUh7_pSErYmmbc-sn5uBDGpvZu6rPqtmQz1QYc_zEDMGqO8FRXI.webp)
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.
![](https://cdn.prod.website-files.com/5c2a9a234fdbba7439c48fa4/657c4afde42cd69f79ce4e8a_DvRz3PYmo5QBzRi7-fgrcM3NqZf6EaRf8SGwvQDUGo232Xdskm-K-I_GdmZX8qrnS42wLbU8ldpt5Vc062ZB8Ecz1XE0_mCPKANKe0Ksqt4qTgXwvWYYkA3pwE4hZPZkykaqz0bXP1TUqWNrVQPVdx4.webp)
Our demo can help you gate content or features with custom modals using a very simple, attribute-based solution.
Take me to the Scripts
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.