Framer

Vue d’ensemble

Dans cette documentation, nous allons voir comment connecter Easytools à Framer de deux façons distinctes:

1. Framer comme landing page - Vos produits sont sur Easytools, et Framer sert de landing page principale. Vous pouvez aussi ajouter d’autres outils Easytools comme les Tickers, les témoignages clients et bien d’autres.
2. Contenu protégé sur Framer - Utiliser le login wall pour héberger votre contenu sur Framer tout en le protégeant des accès non autorisés.

Utiliser Framer comme landing page avec vos produits sur Easytools est une solution très simple et très sûre. Vous avez tout - tous vos produits - sur Easytools, donc aucun accès non autorisé n’est possible, et vous gardez Framer comme belle landing page principale.

Cette documentation ne couvre qu’une sélection d’outils Easytools. D’autres outils sont disponibles dans votre compte Easytools. Pour le panorama complet, consultez votre tableau de bord Easytools.

L’ajout des outils suit toujours la même logique:

• S’il s’agit d’un script - allez dans Framer Site Settings → Custom Code et collez-le là
• S’il s’agit d’un iframe/embed - utilisez l’élément Embed dans la mise en page de votre page Framer

Partie 1: Framer comme landing page

Regardez le tutoriel vidéo qui couvre les liens vers les produits, le Storefront, les widgets et les embeds:

1. Créer des liens vers des produits individuels

Quand vos produits sont sur Easytools et que Framer est votre landing page, vous pouvez faire pointer vos boutons directement vers les pages de paiement de vos produits.

1. Dans Easytools, allez dans Store → Products.
2. Trouvez le produit que vous voulez partager.
3. Cliquez sur le bouton Share et sélectionnez Copy link to checkout.
4. Dans Framer, sélectionnez l’élément bouton.
5. Collez le lien copié dans le champ de lien du bouton.

C’est tout! Quand un visiteur clique sur le bouton, il arrive directement sur la page de paiement Easycart de ce produit.

2. Créer un lien vers le Storefront

Si vous voulez renvoyer vers une page qui regroupe tous vos produits (votre catalogue), vous pouvez utiliser la fonctionnalité Storefront.

1. Dans Easytools, allez dans Store.
2. Trouvez la section Storefront.
3. Vous pouvez modifier les produits affichés sur votre Storefront - en ajouter ou en retirer selon vos besoins.
4. Copiez le lien du Storefront.
5. Dans Framer, créez un bouton (par exemple “Voir nos produits”) et collez-y le lien du Storefront.

Les visiteurs qui cliquent sur ce bouton verront l’ensemble de votre catalogue de produits Easytools.

3. Ajouter des tickers (preuve sociale)

Les tickers affichent à vos visiteurs des informations sur les achats récents: c’est une preuve sociale destinée à créer de l’engagement et à générer plus de clients.

1. Dans Easytools, allez dans Websites → Social Proof (Tickers).
2. Configurez les réglages de votre ticker.
3. Cliquez sur Copy code.
4. Dans Framer, allez dans Site Settings → Custom Code.
5. Ajoutez une nouvelle entrée de code personnalisé (par exemple “Tickers”).
6. Collez le script du ticker et enregistrez.

Vous pouvez combiner plusieurs scripts dans une même entrée Custom Code, les uns à la suite des autres. Réglez-la sur All pages pour que les widgets apparaissent partout sur votre site.

4. Intégrer les témoignages clients (wall of love)

Les témoignages sont des éléments intégrés (iframes), pas des scripts.

1. Dans Easytools, allez dans Websites → Testimonials (Wall of Love).
2. Personnalisez l’affichage des témoignages comme vous le souhaitez.
3. Cliquez sur Copy embed code.
4. Dans Framer, ouvrez la vue Layers à l’endroit où vous voulez ajouter les témoignages.
5. Depuis le menu Insert, cherchez et ajoutez un élément Embed.
6. Sélectionnez l’élément embed et vérifiez que vous avez bien choisi HTML (et non URL).
7. Collez le code d’intégration.

Retenez la différence:

• Scripts (Tickers) - dans Site Settings → Custom Code
• Embeds (témoignages) - via l’élément Embed dans la mise en page

Partie 2: Login wall (contenu protégé)

Le Login Wall vous permet d’héberger sur Framer du contenu protégé: seules les personnes ayant acheté l’accès sur Easytools peuvent le voir.

Regardez le tutoriel vidéo sur la configuration du Login Wall:

5. Configurer le login wall dans Easytools

1. Dans Easytools, allez dans Store → Products.
2. Sélectionnez le produit qui doit donner accès au contenu protégé (par exemple “Yoga Fundamentals Video Course”).
3. Cliquez sur l’icône cadenas Gate content (en haut à droite, à côté des autres icônes).
4. Sélectionnez Secure page sections or secure entire page (dans le tutoriel vidéo, nous protégeons des sections).
5. Activez Create asynchronous script - c’est important à cause du fonctionnement de Framer.
6. Copiez l’intégralité du code généré.

6. Ajouter le script du login wall dans Framer

1. Dans Framer, allez dans Site Settings → Custom Code.
2. Ajoutez une nouvelle entrée de code personnalisé.
3. Donnez-lui un nom (par exemple “Login Wall”).
4. Réglez l’emplacement sur End of .
5. Pour le réglage de page, sélectionnez uniquement la page à protéger (par exemple “/class”).
6. Collez le code copié depuis Easytools.
7. Enregistrez les réglages.

7. Créer un fichier de code personnalisé dans Framer

Vous devez également créer un fichier de code dans Framer Assets pour activer les code overrides:

1. Dans Framer, allez dans Assets.
2. Créez un New Code File.
3. Nommez-le Easytools_login_wall.tsx.
4. Collez-y le code suivant:

Enregistrez le fichier.

8. Appliquer les code overrides

1. Allez sur votre page protégée (par exemple “/class”).
2. Créez deux sections/éléments:
   • Un pour les utilisateurs non payants (par exemple “Member only area” - affiché quand la personne n’est PAS connectée)
   • Un pour les clients payants (par exemple “Congrats, you have access” - affiché quand la personne est connectée)
3. Sélectionnez l’élément destiné aux clients payants.
4. Dans le panneau de droite, trouvez Code Overrides.
5. Dans le menu déroulant, sélectionnez Easytools_login_wall (le fichier que vous avez créé).
6. Choisissez withIDpaid - cet élément ne s’affichera qu’aux clients payants.
7. Sélectionnez l’élément destiné aux utilisateurs non payants.
8. Appliquez l’override withIDfree - cet élément ne s’affichera qu’aux utilisateurs non payants.

9. Tester le login wall

Pour tester votre configuration de login wall:

1. Publiez votre site Framer.
2. Connecté en tant que client payant, vous devez voir le contenu “Congrats, you have access”.
3. Ouvrez une fenêtre de navigation privée pour tester en tant que visiteur non connecté.
4. En navigation privée, vous devez voir à la place le contenu “Member only area”.