Documentation

Créer votre projet Portillon et installer le composant qui relie votre site Framer à votre espace.

1. 1

   Créez un projet (sélecteur de projet en haut de la barre latérale › Nouveau projet) et donnez-lui un nom dans Paramètres.

2. 2

   Dans Paramètres, renseignez l'URL de votre site Framer (https://…framer.website, .framer.app ou votre domaine).

3. 3

   Copiez la « Clé projet » (Paramètres › Identifiants du projet).

4. 4

   Dans le catalogue, copiez le code de PositionAuthProvider et collez-le dans Framer : Assets › Code › Create Code File. PositionAuthProvider

5. 5

   Glissez PositionAuthProvider sur la page (il est invisible) et collez la clé projet dans sa propriété « Clé Projet ».

6. 6

   Publiez votre site. Activez temporairement l'option « Debug » du composant pour voir son état (prêt / connecté).

✓ Résultat : Votre site Framer sait qui est connecté. Tous les autres composants fonctionnent à partir de là.

• Un seul PositionAuthProvider par page suffit ; si vous en mettez plusieurs, donnez-leur des « Auth ID » différents et reportez-les dans les autres composants.
• Travaillez le design avec « Mode Test » : un membre fictif est simulé sans créer de compte.

Connexion, inscription, mot de passe oublié, page « Mon compte » avec profil, abonnement et commandes.

1. 1

   Copiez PositionAuthForm dans Framer et placez-le sur une page « Connexion ». Il propose mot de passe, lien magique et (si activé) Google. PositionAuthForm

2. 2

   Indiquez dans « Redirect après connexion » la page « Mon compte ».

3. 3

   Sur la page « Mon compte », ajoutez PositionProfileForm (profil et photo), SubscriptionStatus (abonnement), OrdersList (commandes) et PositionSignOut. PositionProfileForm

4. 4

   Dans votre barre de navigation, ajoutez UserButton : il affiche le membre connecté et sa déconnexion. UserButton

5. 5

   Pour afficher « Connexion » aux visiteurs et l'avatar aux membres, utilisez ShowIfAuth avec vos propres calques. ShowIfAuth

✓ Résultat : Vos visiteurs créent un compte, se connectent et gèrent leur profil.

• Les e-mails de confirmation et de réinitialisation partent de votre domaine d'envoi, en français.
• Un robot ne peut pas s'inscrire en masse : un contrôle anti-robot invisible (Cloudflare Turnstile) protège les formulaires.

Réserver une page (ou toute une section) aux connectés, aux abonnés, à un plan ou à un produit acheté.

1. 1

   Dans Plugins › Tunnel de vente › Pages & protection, importez les pages de votre site (ou ajoutez un chemin à la main : /membres/* protège toute la section).

2. 2

   Dépliez la page et choisissez qui peut la voir : connectés, abonnés, plan précis, produit acheté. Enregistrez.

3. 3

   Dans Framer, ajoutez PositionPageGuard sur cette page (et PositionAuthProvider si ce n'est pas déjà fait). PositionPageGuard

4. 4

   Optionnel : renseignez « Redirection connexion » et « Redirection upgrade » pour envoyer chacun vers la bonne page.

5. 5

   Testez en navigation privée (visiteur) puis connecté : la règle est évaluée côté serveur à chaque visite.

✓ Résultat : La page est masquée tant que le visiteur n'a pas les droits, puis il est invité à se connecter ou à s'abonner.

• Le garde protège l'affichage de la page. Si le contenu est vraiment confidentiel, placez-le dans un « contenu protégé » (guide suivant).

Livrer un texte, un lien ou une vidéo uniquement aux membres autorisés - il n'existe pas dans le code de la page publique.

1. 1

   Dans Plugins › Paywall & Abonnement › Contenus protégés, créez un contenu : une clé (ex. cours-1), le contenu (HTML simple ou URL de vidéo) et qui y a droit.

2. 2

   Dans Framer, ajoutez ProtectedContent, choisissez le mode « Secure API » et collez la clé. ProtectedContent

3. 3

   Choisissez le même type de protection que dans le dashboard (connecté, abonné, plan, produit, rôle, droit).

4. 4

   Optionnel : personnalisez la carte « verrouillé » avec votre propre design (emplacement « Contenu verrouillé »).

✓ Résultat : Même en lisant le code de la page, personne ne peut voir le contenu sans y avoir droit.

• Le serveur re-vérifie les droits à chaque demande : un visiteur ne peut pas contourner en modifiant la page.
• Les scripts sont retirés du contenu par sécurité ; utilisez du HTML de mise en forme (titres, paragraphes, liens, images).

Brancher Stripe, créer vos plans, placer un bouton d'achat, suivre les ventes.

1. 1

   Dans Plugins › Paywall & Abonnement, saisissez votre clé secrète Stripe (mode test pour commencer) et enregistrez.

2. 2

   Créez un plan : nom, identifiant (slug), prix Stripe, type (abonnement ou achat unique).

3. 3

   Activez le webhook (bouton dédié) : c'est lui qui accorde l'accès après paiement.

4. 4

   Dans Framer, ajoutez SubscribeButton et indiquez le slug du plan. Pour une page de tarifs complète, utilisez PositionAbonnement. SubscribeButton

5. 5

   Testez avec la carte 4242 4242 4242 4242 (mode test). Retrouvez la commande dans Ventes et le membre dans le CRM.

6. 6

   Sur « Mon compte », ajoutez SubscriptionStatus (gérer l'abonnement) et OrdersList (historique). SubscriptionStatus

✓ Résultat : Un visiteur paie sur Stripe ; son accès est accordé automatiquement et visible dans « Mon compte ».

• Les remboursements Stripe retirent automatiquement l'accès (remboursement total) ou le conservent (partiel).
• Archiver un plan bloque les nouvelles ventes mais conserve les droits déjà acquis.
• Passez en mode live en remplaçant la clé de test par la clé live et en recréant le webhook.

Guider un visiteur de page en page, avec progression, tâches à cocher et bouton « Continuer ».

1. 1

   Dans Plugins › Tunnel de vente › Tunnels, créez un tunnel et ajoutez ses étapes dans l'ordre (ex. /offre › /inscription › /paiement › /merci). Copiez son ID.

2. 2

   Sur chaque étape, ajoutez PositionProgressBar en mode « E-learning · Pages » et collez l'ID du tunnel : la barre indique l'étape courante (étape 2/4 = 50 %). PositionProgressBar

3. 3

   Ajoutez PositionNextButton avec le même ID : il envoie vers l'étape suivante, et affiche « Terminé » à la dernière. PositionNextButton

4. 4

   Pour exiger des actions avant de continuer, ajoutez une PositionChecklist (ses tâches sont enregistrées pour chaque membre) et saisissez son ID dans PositionNextButton. PositionChecklist

5. 5

   Si la barre ou le bouton sont sur une autre page que la checklist, indiquez le « Nb. de tâches » : la progression est relue depuis l'enregistrement du membre.

✓ Résultat : Le visiteur voit où il en est, et ne peut passer à l'étape suivante qu'une fois ses tâches faites.

• Chaque tunnel sert de parcours linéaire. Protégez ses pages avec PositionPageGuard si l'accès doit être conditionné.
• Laissez « ID Checklist » vide dans PositionNextButton pour un simple bouton « Suivant » sans condition.

Retrouver un membre, voir ses droits, bloquer un compte, importer / exporter.

1. 1

   Ouvrez le CRM : recherche par nom ou e-mail, tri, pagination.

2. 2

   Cliquez sur un membre pour ouvrir sa fiche : abonnement, droits, commandes, blocage.

3. 3

   Exportez la liste en CSV, ou importez des membres existants (CSV) avec, si besoin, un plan offert. Aucun e-mail n'est envoyé à l'import.

4. 4

   Le journal d'activité garde la trace des actions sensibles (blocage, droits, import).

✓ Résultat : Vous savez qui est inscrit, qui paie, et vous pouvez agir sur chaque compte.

Les garanties de Portillon et leurs limites, sans promesse excessive.

1. 1

   Affichage seulement : ShowIfAuth, PlanGate, PositionPaywall, ProtectedContent en mode « UI Gate », PositionPageGuard. Le contenu fait partie de la page ; ces composants le masquent aux visiteurs sans droit.

2. 2

   Protection réelle : ProtectedContent en mode « Secure API ». Le contenu reste sur le serveur et n'est livré qu'après vérification des droits.

3. 3

   Les droits (abonnement, plan, produit) sont toujours décidés côté serveur à partir de Stripe ; un visiteur ne peut pas se les attribuer.

4. 4

   Les données de chaque projet sont isolées : un membre ne voit que les siennes, un propriétaire que celles de ses projets.

5. 5

   Anti-robot invisible sur les inscriptions et connexions, limitation des envois d'e-mails, URL de retour de paiement restreintes à votre site (anti-redirection frauduleuse).

6. 6

   Vos clés Stripe secrètes ne transitent jamais par Framer : elles restent côté serveur.

✓ Résultat : Vous savez quel composant choisir selon le niveau de confidentialité voulu.