Squarespace

Intégration Squarespace

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

1. Squarespace comme landing page - Vos produits sont sur Easytools, et Squarespace sert de landing page principale. Vous pouvez aussi ajouter d’autres outils Easytools comme Buy Me a Coffee, les Tickers, les sections de tarifs, les témoignages clients et bien d’autres.
2. Contenu protégé sur Squarespace - Utiliser le Login Wall pour bloquer l’accès à certaines pages, afin que seuls les clients payants puissent les consulter.

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

Formule Squarespace requise L’ajout de code personnalisé (scripts et Code Injection) nécessite la formule Core ou supérieure dans Squarespace (formules: Basic, Core, Advanced). Vérifiez que votre formule le permet avant de suivre les étapes ci-dessous.

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

• S’il s’agit d’un script - utilisez le Code Injection de Squarespace (pour tout le site ou page par page) et collez-le dans le champ Header
• S’il s’agit d’un iframe/embed - ajoutez un Code Block directement dans la mise en page de votre page et collez-y le code d’intégration

Partie 1: Squarespace comme landing page

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

1. Créer des liens vers des produits individuels

Quand vos produits sont sur Easytools et que Squarespace 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 Squarespace, modifiez l’élément bouton de votre page.
5. Cliquez sur l’icône de lien, choisissez External et collez le lien copié.
6. Cliquez sur Apply et enregistrez.

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, vous pouvez utiliser la fonctionnalité Storefront.

1. Dans Easytools, allez dans Store.
2. Trouvez la section Storefront.
3. Modifiez les produits affichés - ajoutez-en ou retirez-en selon vos besoins.
4. Copiez le lien du Storefront.
5. Dans Squarespace, créez un bouton (par exemple “Voir nos produits”) et collez le lien du Storefront comme lien externe.

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

3. Ajouter les outils qui reposent sur un script

Tout outil Easytools qui fournit une balise <script> s’ajoute via le Code Injection de Squarespace. C’est le cas des widgets comme les Social Proof Tickers - la démarche est la même pour tous.

1. Dans Easytools, ouvrez l’outil que vous voulez ajouter.
2. Configurez-le à votre goût et cliquez sur Copy code pour copier le script.
3. Dans Squarespace, choisissez où l’ajouter:
   • Sur tout le site (sur chaque page): dans le panneau Pages, descendez tout en bas et cliquez sur Custom Code → Code Injection, puis collez dans le champ Header.
   • Sur une seule page: survolez la page dans le panneau Pages, cliquez sur l’icône engrenage → onglet Advanced, et collez dans le champ Page Header Code Injection.
4. Cliquez sur Save.

Vous pouvez empiler plusieurs scripts - Collez plusieurs scripts dans le même champ Header, les uns à la suite des autres. Pas besoin d’entrées séparées.

4. Intégrer du contenu (iframes)

Tout outil Easytools qui fournit un code d’intégration (iframe) se place directement dans l’éditeur de page, sous forme de bloc. C’est le cas des témoignages clients (Easylove), des pages légales (Easylegal) et du pied de page - la démarche est la même pour tous.

1. Dans Easytools, ouvrez l’outil que vous voulez intégrer.
2. Configurez-le et cliquez sur Copy embed code.
3. Dans Squarespace, ouvrez l’éditeur de page et cliquez sur + pour ajouter un nouveau bloc.
4. Choisissez Code, collez le code d’intégration et cliquez sur Apply.
5. Enregistrez la page.

Autre possibilité: le bloc Embed

Vous pouvez aussi utiliser un bloc Embed plutôt qu’un bloc Code (utile par exemple dans le pied de page du site). Avec Embed: cliquez sur Edit, choisissez Code snippet (et non “Link”), et collez-y le code.

N’oubliez pas de publier vos modifications dans Easytools

Toute modification faite dans Easytools doit être publiée avant d’apparaître sur votre site Squarespace. Sans publication, les mises à jour ne seront pas visibles par vos visiteurs.

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

Le Login Wall vous permet de protéger certaines pages de Squarespace: seules les personnes ayant acheté l’accès sur Easytools peuvent les consulter. Les visiteurs sans accès sont automatiquement redirigés vers la page de connexion Easytools, où ils peuvent se connecter ou acheter le produit.

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

5. Configurer le login wall dans Easytools

Pour protéger une page précise, vous devez d’abord copier le script de login wall depuis votre produit Easytools.

1. Dans Easytools, allez dans Store → Products.
2. Sélectionnez le produit qui doit donner accès à la page protégée.
3. Cliquez sur l’icône cadenas (Gate content) en haut de la page du produit.
4. Sélectionnez Secure entire page.
5. Copiez le script généré.

6. Ajouter le script du login wall dans Squarespace

Le script Login Wall doit être ajouté à la page précise que vous voulez protéger, et non à tout le site.

1. Dans Squarespace, allez dans le panneau Pages.
2. Survolez la page à protéger et cliquez sur l’icône engrenage.
3. Allez dans l’onglet Advanced.
4. Collez le script copié depuis Easytools dans le champ Page Header Code Injection.
5. Cliquez sur Save.

Répétez cette étape pour chaque page à protéger. Chaque page peut être reliée à un produit différent si nécessaire.

Important: modifier une page protégée

Une fois le script du login wall actif sur une page, Squarespace bloque l’éditeur de page: vous verrez un avertissement EMBEDDED SCRIPTS et vous ne pourrez pas modifier directement le contenu de la page.

Solution de contournement: allez dans les réglages de la page (icône engrenage → Advanced → Page Header Code Injection), retirez le script, enregistrez, puis modifiez la page. Une fois vos modifications terminées, remettez le script. Attention: tant que le script est retiré, la page est accessible publiquement - travaillez vite.

7. Tester le Login Wall

Pour tester votre configuration de Login Wall:

1. Vérifiez que votre site Squarespace est bien publié (le Login Wall ne fonctionne pas en mode aperçu).
2. Pour tester l’expérience d’un visiteur sans accès: ouvrez la page protégée dans une fenêtre de navigation privée - vous devez être redirigé vers la page de connexion/achat Easytools.
3. Pour tester l’accès avec un achat valide: déconnectez-vous temporairement de Squarespace dans votre navigateur habituel (celui où vous êtes connecté à Easytools/Easycart avec le produit acheté). Ouvrez la page protégée: l’accès doit être accordé.
4. Reconnectez-vous à Squarespace une fois le test terminé.

Pourquoi ne pas simplement utiliser l’aperçu Squarespace?

Quand vous êtes connecté à Squarespace en tant que propriétaire du site et que vous ouvrez l’URL de la page en ligne, Squarespace vous redirige automatiquement vers l’interface d’édition: vous ne pouvez pas voir la page publiée comme un visiteur ordinaire. C’est une limite de Squarespace. Se déconnecter de Squarespace (ou passer en navigation privée) est le seul moyen fiable de voir ce que voient les visiteurs.