Dans cet article, nous allons voir comment connecter Easytools à Webflow de deux façons:
- Webflow comme landing page - Vos produits sont sur Easytools, et Webflow sert de landing page principale. Vous pouvez faire pointer n’importe quel bouton ou élément Webflow directement vers la page de paiement d’un produit Easytools.
- Contenu protégé sur Webflow - Utiliser le Login Wall pour contrôler qui voit quoi. Vous pouvez bloquer l’accès à une page entière, ou afficher et masquer certaines sections d’une page selon que le visiteur est client payant ou non.
Contrairement à d’autres plateformes, Webflow permet non seulement de protéger une page entière, mais aussi de protéger section par section - c’est-à-dire d’afficher un contenu différent aux clients payants et aux visiteurs non payants sur la même page. C’est ce que couvre la partie 2.
Regardez le tutoriel vidéo qui couvre tous ces sujets:
Partie 1: Créer des liens vers vos produits
Quand vos produits sont sur Easytools et que Webflow est votre landing page, vous pouvez faire pointer n’importe quel bouton ou élément de votre site Webflow directement vers la page de paiement Easytools de ce produit.
1. Copier le lien du produit depuis Easytools
- Dans Easytools, allez dans Store → Products.
- Ouvrez le produit vers lequel vous voulez créer un lien.
- Cliquez sur l’icône Share en haut de la page du produit.
- Dans la fenêtre Share, cliquez sur Copy link. Vous pouvez aussi activer Shorten link pour obtenir une URL plus courte.
2. Ajouter le lien à un bouton Webflow
- Ouvrez votre site dans le Webflow Editor.
- Cliquez sur le bouton ou l’élément à lier.
- Dans le panneau de droite, ouvrez l’onglet Settings.
- Trouvez la section Link settings et collez le lien copié dans le champ URL.
- Activez Open in new tab si nécessaire.
- Cliquez sur Publish en haut à droite pour mettre les modifications en ligne.
Quand un visiteur clique sur le bouton, il arrive directement sur la page de paiement Easycart de ce produit.
Partie 2: Login Wall (contenu protégé)
Le Login Wall vous permet de contrôler l’accès au contenu de votre site Webflow. Il existe deux modes:
- Secure entire page - Bloque l’accès à toute la page. Les visiteurs non payants sont redirigés vers la page de connexion/achat Easytools.
- Secure page sections - Affiche ou masque certaines sections d’une page selon le statut d’abonnement du visiteur. Les visiteurs payants et non payants peuvent tous voir la page, mais ils voient un contenu différent.
Les deux modes reposent sur un script placé dans le champ Custom code des réglages de la page Webflow, et sur un produit Easytools qui sert de clé d’accès.
3. Protéger une page entière
Étape 1 - Récupérer le script depuis Easytools:
- Dans Easytools, allez dans Store → Products.
- Ouvrez le produit qui doit donner accès à la page protégée.
- Cliquez sur l’icône cadenas (Gate content) en haut de la page du produit.
- Cliquez sur Secure entire page.
- Cliquez sur Copy code.
Étape 2 - Ajouter le script aux réglages de la page Webflow:
- Dans le Webflow Editor, ouvrez le panneau Pages dans la barre latérale gauche.
- Survolez la page à protéger et cliquez sur Edit page settings (l’icône engrenage qui apparaît).
- Descendez jusqu’à la section Custom code.
- Collez le script dans le champ Inside tag.
- Cliquez sur Save.
- Publiez votre site pour que la modification prenne effet.
Les visiteurs non payants qui tentent d’accéder à la page sont immédiatement redirigés vers Easytools, où ils peuvent se connecter ou acheter l’accès. Les clients payants voient la page sans interruption.
4. Protéger des sections de page
La protection section par section vous permet d’afficher un contenu différent selon le visiteur, sur une même page, sans bloquer l’accès à la page elle-même. Deux choses à faire: ajouter le script à la page, puis marquer chaque section avec l’attribut approprié.
Étape 1 - Récupérer le script depuis Easytools:
- Dans Easytools, allez dans Store → Products.
- Ouvrez le produit qui doit servir de clé d’accès.
- Cliquez sur l’icône cadenas (Gate content) en haut de la page du produit.
- Cliquez sur Secure page sections.
- Cliquez sur Copy code.
Étape 2 - Ajouter le script aux réglages de la page Webflow:
- Dans le Webflow Editor, ouvrez le panneau Pages.
- Survolez la page et cliquez sur Edit page settings.
- Descendez jusqu’à Custom code et collez le script dans le champ Inside tag.
- Cliquez sur Save.
Étape 3 - Ajouter les attributs à vos sections:
Pour chaque section de la page, décidez si elle doit être visible par les clients payants, par les visiteurs non payants, ou par tout le monde. Ajoutez ensuite l’attribut personnalisé correspondant dans Webflow:
- Dans le Webflow Editor, cliquez sur la section à protéger.
- Dans le panneau de droite, ouvrez l’onglet Settings.
- Trouvez la section Custom attributes et ajoutez un nouvel attribut:
- Pour un contenu visible uniquement par les clients payants: Name = data-paid, Value = true
- Pour un contenu visible uniquement par les visiteurs non payants: Name = data-free, Value = true
- Répétez l’opération pour chaque section à protéger.
- Publiez votre site pour que les modifications prennent effet.
Seules les sections explicitement marquées data-paid ou data-free sont concernées par le script. Toute section sans l’un de ces attributs reste visible par tous les visiteurs, quel que soit leur statut d’abonnement.
5. Tester le Login Wall
Pour tester votre configuration de Login Wall:
- Vérifiez que votre site Webflow est bien publié - le Login Wall ne fonctionne que sur le site en ligne, pas dans l’aperçu du Webflow Editor.
- Pour tester l’expérience d’un visiteur sans accès ou non payant: ouvrez la page protégée dans une fenêtre de navigation privée. Avec la protection de page entière, vous devez être redirigé; avec la protection par sections, vous ne devez voir que les sections marquées data-free.
- Pour tester l’accès en tant que client payant: ouvrez la page dans un navigateur où vous êtes connecté à Easytools avec le produit acheté. La protection de page entière doit donner accès; la protection par sections doit afficher les sections marquées data-paid.