Installer le skill sur ton ordinateur
Le skill growthsquare-landing-page contient toute la méthode. Une fois installé, Claude Code l'utilise automatiquement dès que tu lui demandes de créer une landing page. Installation : 2 minutes.
Prérequis : Claude Code installé
Si ce n'est pas déjà fait, installe Claude Code depuis claude.com/claude-code (app desktop ou CLI). Connecte-toi avec ton compte GrowthSquare.
Télécharge le skill
Clique sur growthsquare-landing-page-skill.zip (le bouton en haut de page fait pareil). Tu obtiens un dossier growthsquare-landing-page qui contient un fichier SKILL.md.
Place-le dans ton dossier skills
Décompresse le zip dans ton dossier de skills global :
Expand-Archive growthsquare-landing-page-skill.zip -DestinationPath "$env:USERPROFILE\.claude\skills\"
unzip growthsquare-landing-page-skill.zip -d ~/.claude/skills/
Vérifie l'installation
Ouvre Claude Code, démarre une nouvelle session et écris : crée une landing page pour un client. Claude doit mentionner qu'il utilise le skill growthsquare-landing-page. Tu peux aussi taper /growthsquare-landing-page directement.
Prendre le contexte d'onboarding
La règle numéro un : on ne part jamais d'une page blanche sans contexte client. Une landing page générique, ça ne convertit pas. Tout ce qui rend la page crédible vient de l'onboarding.
Appel d'onboarding
Le transcript Fireflies de l'appel client est ta source principale. Le vocabulaire du client, ses chiffres, ses différenciateurs : tout est là.
Branding existant
Logo, couleurs, photos du client et de son équipe. Si le client a un branding, on le respecte. Sinon, on propose une palette premium.
Preuves sociales
Avis Google, nombre de clients servis, années d'expérience, certifications (RBQ, AMF, OACIQ). Chaque preuve réelle vaut 10 phrases de marketing.
Checklist du contexte minimal (si tu n'as pas ça, demande avant de coder) :
✓Niche + service exact vendu▼
✓Zone géographique desservie▼
✓Audience cible précise▼
✓Définition d'un lead « soumis »▼
Lead dans le pixel.✓Contraintes légales de la niche▼
Trouver l'offre alléchante
Une landing page ne convertit pas grâce au design. Elle convertit grâce à l'offre. Le design amplifie une bonne offre, il ne sauve jamais une offre plate. Le titre du hero, c'est l'offre, pas le nom de la compagnie.
Réduis le risque à zéro
« 100% gratuit », « sans engagement », « 0 frais pour toi ». Le visiteur ne doit rien avoir à perdre en remplissant le formulaire.
Réduis l'effort perçu
« En 60 secondes », « 3 questions », « réponse en 24h ». Le formulaire multi-étapes renforce cette promesse : la première question est toujours facile.
Rends le résultat concret
Jamais « Contactez-nous ». Toujours un résultat : « Obtiens ton évaluation gratuite », « Trouve ton entrepreneur certifié RBQ », « Découvre combien tu peux économiser ».
Ajoute un mécanisme unique
Quiz personnalisé, calculateur de capacité d'emprunt, comparaison de 17 prêteurs, jumelage avec UN entrepreneur vérifié. Le mécanisme rend l'offre différente de tous les compétiteurs qui disent « soumission gratuite ».
Le test du scroll
Demande-toi : est-ce qu'un inconnu sur Facebook arrêterait de scroller pour ÇA? Si la réponse est non, retravaille l'offre avant d'ouvrir ton éditeur.
Offres qui convertissent
- « Découvre ta capacité d'achat en 60 secondes, gratuit »
- « 3 soumissions gratuites d'entrepreneurs certifiés RBQ »
- « On magasine 17 prêteurs pour toi, 0 frais »
- « Quiz 30 secondes : combien peux-tu économiser? »
Offres qui ne convertissent pas
- « Bienvenue chez [Compagnie], leader depuis 1995 »
- « Contactez-nous pour plus d'informations »
- « Des services de qualité à prix compétitifs »
- Un formulaire de 10 champs visible d'un coup
Bâtir la page : structure, interactivité, photos
C'est ici que le skill fait 80% du travail. Donne-lui le contexte (étape 01) et l'offre (étape 02), et il génère la page selon les standards maison. Voici ce que la page DOIT contenir.
3a · La structure éprouvée
L'ordre des sections qui performe sur nos pages en production :
| # | Section | Rôle |
|---|---|---|
| 1 | Nav sticky | Logo + CTA toujours visibles, devient « glass » au scroll |
| 2 | Hero split 50/50 | Copy + badge urgence à gauche, formulaire multi-étapes à droite |
| 3 | Strip de confiance | Stats animées, badges, activité récente |
| 4 | Process 3-4 étapes | Qu'est-ce qui se passe après la soumission |
| 5 | Bénéfices | 3 cartes max, pourquoi nous |
| 6 | Section humaine | Photos équipe, galerie, showcase |
| 7 | Témoignages | Photos + prénoms + villes locales |
| 8 | Logos partenaires | Marquee défilant (prêteurs, certifications) |
| 9 | FAQ | 4-6 accordéons qui tuent les objections |
| 10 | CTA final | Bande contrastée, répète l'offre |
| 11 | Footer | Conformité, confidentialité, mentions légales |
3b · Interactivité et animations : le minimum requis
Une page GrowthSquare n'est jamais statique. Elle doit être seamless, propre, et vivante. L'animation guide l'oeil vers le CTA, elle ne distrait pas.
✓Scroll reveal sur toutes les sections▼
IntersectionObserver). Stagger les éléments d'une même rangée avec un délai de 0.1s / 0.2s / 0.3s. C'est CE pattern qui donne le feel « premium » à la page.✓Formulaire multi-étapes avec progression▼
(XXX) XXX-XXXX, code postal regex, bordure rouge + shake si invalide. Succès INLINE avec crochet vert, pas de redirect : « C'est reçu! [Prénom] regarde ton dossier et te contacte rapidement. »✓Badge d'urgence pulsant dans le hero▼
✓Marquee de logos partenaires▼
translateX(-50%) infini), pause au survol. Prêteurs, certifications, médias : tout ce qui emprunte de la crédibilité.✓Nav sticky « glass » + CTA mobile collant▼
backdrop-filter:blur(14px) au scroll. Sur mobile, une barre CTA fixée en bas apparaît après le hero pour que l'action soit toujours à un pouce de distance.✓Détails qui respirent▼
floaty 7s), compteurs qui montent au scroll, effet ripple au hover des CTA, scroll-behavior:smooth partout. Easing maison : cubic-bezier(.22,1,.36,1).3c · Photos et éléments humains
Une page sans visage humain convertit moins, point. Les photos n'ont pas besoin d'être parfaites : un peu candides, un peu random, c'est ce qui rend la page humaine et crédible.
Photo hero avec humains
Le client, son équipe, ou des visages crédibles de la région. Overlay sombre (brightness .45 ou gradient) pour garder le texte lisible.
Stack d'avatars au CTA
3-4 visages ronds qui se chevauchent + badge « +847 propriétaires aidés ». Preuve sociale instantanée juste à côté du bouton.
Témoignages avec visages
Photo, prénom, ville locale : « Marie-Claude, Laval ». Jamais de stock photo corporate américaine avec des dents trop blanches.
Galerie / showcase
Photos du travail, de l'équipe, des bureaux. Même imparfaites. L'authenticité bat le studio.
Créer et intégrer le webhook GoHighLevel
Le webhook, c'est le tuyau entre ta landing page et le CRM du client. Chaque soumission de formulaire envoie un POST vers GHL, qui crée le contact et déclenche les automatisations. Deux parties : créer le webhook dans GHL, puis le brancher dans la page.
4a · Créer le webhook dans GoHighLevel
Ouvre la sous-location du client
Dans GHL, sélectionne la sub-account du client (pas l'agence). Le lead doit atterrir dans SON CRM.
Crée le workflow avec trigger Inbound Webhook
Automation → Workflows → Create Workflow → Start from scratch. Comme trigger, choisis Inbound Webhook. GHL génère immédiatement une URL unique :
https://services.leadconnectorhq.com/hooks/{LOCATION_ID}/webhook-trigger/{TRIGGER_ID}
Envoie un POST de test
Avant de mapper, GHL doit « voir » la structure de tes données. Envoie un POST de test avec le payload complet (depuis ta page en local ou Postman), puis clique Check for new requests dans le trigger.
Mappe les champs vers le contact
Ajoute une action Create/Update Contact et mappe : nom → {{inboundWebhookRequest.nom_complet}}, téléphone → {{inboundWebhookRequest.telephone}}, courriel → {{inboundWebhookRequest.courriel}}. Crée des custom fields pour les réponses du quiz (projet, budget, étape).
Ajoute le contexte et les notifications
Action Create Note avec le récap des réponses du quiz, un tag source (ex: lp-achat), et une notification SMS/email au client pour qu'il rappelle le lead dans les 5 minutes.
Publie le workflow
Bascule le workflow en Publish. Un workflow en draft ne reçoit RIEN : c'est l'erreur classique. Copie l'URL du webhook.
4b · Intégrer le webhook dans la landing page
Au submit du formulaire (après validation), envoie le payload complet : coordonnées ET toutes les réponses du quiz. Le client veut le contexte du lead, pas juste un numéro de téléphone.
// URL copiée depuis le trigger Inbound Webhook de GHL var WEBHOOK='https://services.leadconnectorhq.com/hooks/XXXX/webhook-trigger/YYYY'; // Payload : coordonnées + TOUTES les réponses du quiz var p={ source:'nomclient-objectif', // identifiant unique de la page landing_page:'Nom Client : Achat', // label lisible pour le client page:location.pathname, nom_complet:g('f-nom'), telephone:g('f-tel'), courriel:g('f-email'), ville:g('f-ville'), projet:reponses.projet, // réponses du multi-étapes budget:reponses.budget }; fetch(WEBHOOK,{ method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(p), keepalive:true // le POST survit au changement de page }).catch(function(){}); // jamais d'erreur visible pour l'utilisateur
Créer et intégrer le Pixel Meta
Sans pixel, pas d'optimisation des campagnes. Le pixel envoie PageView au chargement et Lead au submit : c'est sur l'événement Lead que les campagnes Meta s'optimisent.
5a · Créer le pixel (si le client n'en a pas déjà un)
Events Manager
Dans le Meta Business Manager du client : Events Manager → Connecter des données → Web.
Nomme et récupère l'ID
Nomme le pixel au nom du client (ex: Pixel - Équipe Tremblay). Copie le Pixel ID (nombre de 15-16 chiffres). Choisis « installer le code manuellement ».
Vérifie la propriété
Le pixel doit appartenir au Business Manager du CLIENT, partagé avec notre BM pour gérer les campagnes. Jamais l'inverse : si le client part, son data le suit.
5b · Intégrer le pixel dans la page
Le base code va dans le <head>, identique sur toutes nos pages en production. Remplace PIXEL_ID aux 2 endroits.
<!-- Meta Pixel : [Nom Client] --> <script> !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js'); fbq('init','PIXEL_ID'); fbq('track','PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=PIXEL_ID&ev=PageView&noscript=1"/></noscript>
L'événement Lead se déclenche au submit validé, juste après le fetch du webhook :
// Événement Lead : c'est là-dessus que Meta optimise if(window.fbq){try{fbq('track','Lead',{content_name:p.source})}catch(e){}} // Bonus : event dataLayer pour GTM/GA4 si le client en a window.dataLayer=window.dataLayer||[]; window.dataLayer.push({event:'lead_submitted',form_source:p.source});
À faire
- PageView au chargement, Lead au submit validé
- Vérifier les 2 events avec l'extension Meta Pixel Helper
- Confirmer la réception dans Events Manager (delai ~5 min)
content_name= source de la page pour segmenter
À éviter
- Tirer Lead au chargement de la page (fausse les campagnes)
- Tirer Lead au clic du bouton AVANT la validation
- Oublier le PIXEL_ID dans le tag noscript
- Mettre le pixel de l'agence au lieu de celui du client
Checklist QA finale
Rien ne sort sans que TOUT soit coché. Clique sur chaque item pour suivre ta progression (la page s'en souvient).
0/12 vérifiés