🧲 Stratégie Lead Magnets
Guide Pipedrive

Objectif : Convertir les lecteurs du guide Pipedrive en abonnés newsletter ou prospects qualifiés via des Lead Magnets contextuels (inline boxes + exit-intent popups).

Structure & Pipelines

Lead Magnet : Template CSV des 5 pipelines types

📌 Encadré Inline (milieu d'article)

Titre

📥 Gagnez 2h de config : importez nos 5 pipelines prêts à l'emploi

Bénéfices

Détection, Projet, Devis, Closing, Onboarding — les 5 pipelines que j'utilise avec mes clients. Un fichier CSV à importer en 2 clics dans Pipedrive.

CTA

Télécharger le template CSV →

🚨 Popup Exit-Intent

🎨 Conseils Design

Couleur accent : Vert Pipedrive (#017737) — cohérent avec le sujet
Icône : Emoji 📥 ou icône de téléchargement
Visuel : Mini-aperçu du fichier CSV ou screenshot d'un pipeline
Mobile : Bouton pleine largeur, texte centré

Aperçu Inline Box

📥

Gagnez 2h de config : importez nos 5 pipelines prêts à l'emploi

Détection, Projet, Devis, Closing, Onboarding — un fichier CSV à importer en 2 clics.

Data & Champs personnalisés

Lead Magnet : Checklist PDF des 28 champs indispensables

📌 Encadré Inline

Titre

✅ Les 28 champs que 90% des CRM oublient (et qui changent tout)

Bénéfices

Cette checklist PDF liste les champs personnalisés qui transforment un CRM "passoire" en machine de qualification. Cochez ceux qui vous manquent et corrigez en 30 min.

CTA

Recevoir la checklist gratuite →

🚨 Popup Exit-Intent

🎨 Conseils Design

Couleur accent : Bleu data (#3B82F6) — évoque la structuration
Icône : Emoji ✅ ou icône checklist
Visuel : Aperçu du PDF avec quelques lignes visibles (effet "sneak peek")
Badge : "PDF gratuit" ou "28 champs"

Aperçu Inline Box

✅

Les 28 champs que 90% des CRM oublient

Cochez ceux qui vous manquent et corrigez en 30 min. PDF gratuit.

Lead Scoring (Make.com)

Lead Magnet : Blueprint du système de scoring V2

📌 Encadré Inline

Titre

🎯 Le blueprint exact du scoring que j'utilise (et qui trie 500 leads/semaine)

Bénéfices

Arrêtez de traiter tous vos leads de la même façon. Ce schéma Make.com calcule automatiquement un score basé sur 12 critères. Vos commerciaux appellent les bons en premier.

CTA

Voir le blueprint complet →

🚨 Popup Exit-Intent

🎨 Conseils Design

Couleur accent : Violet Make.com (#6366F1) — associe l'outil
Icône : Emoji 🎯 ou icône target
Visuel : Screenshot flouté du blueprint Make.com (crée la curiosité)
Badge : "Nouveau V2" ou "500 leads/semaine"

Aperçu Inline Box

🎯

Le blueprint exact du scoring que j'utilise

Calcul automatique sur 12 critères. Vos commerciaux appellent les bons leads en premier.

Automatisations & API

Lead Magnet : Guide "Économiser ses tâches Make/API"

📌 Encadré Inline

Titre

⚡ 5 astuces de pro pour diviser vos opérations Make par 3

Bénéfices

Votre facture Make explose ? Ce mini-guide révèle les techniques que j'utilise pour réduire les opérations de 70% sans toucher aux fonctionnalités. Applicable en 1 heure.

CTA

Télécharger les 5 astuces →

🚨 Popup Exit-Intent

🎨 Conseils Design

Couleur accent : Orange énergie (#F97316) — évoque l'optimisation
Icône : Emoji ⚡ ou icône lightning
Visuel : Before/After des opérations (graphique simple)
Badge : "-70% opérations" ou "5 min de lecture"

Aperçu Inline Box

⚡

5 astuces de pro pour diviser vos opérations Make par 3

Réduisez vos opérations de 70% sans toucher aux fonctionnalités. Applicable en 1h.

Migration (Notion → Pipedrive)

Lead Magnet : Migration Checklist en 10 étapes

📌 Encadré Inline

Titre

🚚 Migrer sans perdre une seule donnée : la checklist en 10 étapes

Bénéfices

J'ai migré 30+ CRM (Notion, Airtable, Excel...) vers Pipedrive. Cette checklist couvre tout : mapping des champs, export propre, import sans doublons, et vérification finale.

CTA

Recevoir la checklist migration →

🚨 Popup Exit-Intent

🎨 Conseils Design

Couleur accent : Teal sécurité (#0D9488) — évoque la fiabilité
Icône : Emoji 🚚 ou icône migration/transfer
Visuel : Illustration Notion → Pipedrive avec flèche
Badge : "30+ migrations réussies" ou "Zéro perte"

Aperçu Inline Box

🚚

Migrer sans perdre une seule donnée

La checklist en 10 étapes issue de 30+ migrations réussies.

📊 Tableau récapitulatif

Page	Lead Magnet	Couleur	Hook principal
Pipelines	Template CSV 5 pipelines	● Vert #017737	"Gagnez 2h de config"
Champs	Checklist 28 champs PDF	● Bleu #3B82F6	"90% des CRM oublient"
Lead Scoring	Blueprint Make.com V2	● Violet #7C3AED	"Trie 500 leads/semaine"
Automatisations	Guide 5 astuces Make	● Orange #F97316	"Divisez par 3 vos opérations"
Migration	Checklist 10 étapes	● Teal #0D9488	"Zéro donnée perdue"

🖼️ Aperçu Popup Exit-Intent

Design type (adaptable à chaque Lead Magnet)

💻 Script JavaScript universel

Ce script détecte automatiquement la page et affiche le bon Lead Magnet (inline + popup exit-intent).

lead-magnets.js

// ============================================
// CONFIGURATION DES LEAD MAGNETS PAR PAGE
// ============================================

const leadMagnets = {
  // Détection par URL (contient...)
  'pipelines': {
    id: 'pipelines',
    emoji: '📥',
    title: 'Gagnez 2h de config',
    subtitle: 'Template CSV des 5 pipelines prêts à l\'import',
    cta: 'Télécharger le template CSV',
    exitText: 'Récupérez le CSV des 5 pipelines que 50+ équipes utilisent déjà.',
    color: '#017737',
    colorLight: '#f0fdf4',
    formId: 'form-pipelines' // ID du formulaire (ConvertKit, Mailchimp...)
  },
  'champs': {
    id: 'champs',
    emoji: '✅',
    title: 'Les 28 champs que 90% oublient',
    subtitle: 'Checklist PDF pour un CRM propre',
    cta: 'Recevoir la checklist gratuite',
    exitText: 'Votre CRM est-il vraiment propre ? Vérifiez avec notre checklist.',
    color: '#3B82F6',
    colorLight: '#eff6ff',
    formId: 'form-champs'
  },
  'scoring': {
    id: 'scoring',
    emoji: '🎯',
    title: 'Le blueprint du scoring V2',
    subtitle: 'Système Make.com qui trie 500 leads/semaine',
    cta: 'Voir le blueprint complet',
    exitText: 'Vos commerciaux perdent du temps sur des leads froids ?',
    color: '#7C3AED',
    colorLight: '#f5f3ff',
    formId: 'form-scoring'
  },
  'automatisations': {
    id: 'automatisations',
    emoji: '⚡',
    title: '5 astuces pour -70% d\'opérations Make',
    subtitle: 'Guide court applicable en 1 heure',
    cta: 'Télécharger les 5 astuces',
    exitText: 'Vous payez trop cher Make.com ? Ces 5 astuces changent tout.',
    color: '#F97316',
    colorLight: '#fff7ed',
    formId: 'form-automatisations'
  },
  'migration': {
    id: 'migration',
    emoji: '🚚',
    title: 'Migrer sans perdre une donnée',
    subtitle: 'Checklist en 10 étapes (30+ migrations)',
    cta: 'Recevoir la checklist migration',
    exitText: 'Peur de perdre des données ? Cette checklist sécurise tout.',
    color: '#0D9488',
    colorLight: '#f0fdfa',
    formId: 'form-migration'
  }
};

// ============================================
// DÉTECTION DE LA PAGE COURANTE
// ============================================

function detectCurrentLeadMagnet() {
  const url = window.location.pathname.toLowerCase();
  
  for (const [key, magnet] of Object.entries(leadMagnets)) {
    if (url.includes(key)) {
      return magnet;
    }
  }
  
  // Default : premier Lead Magnet (pipelines)
  return leadMagnets['pipelines'];
}

// ============================================
// GÉNÉRATION DE L'INLINE BOX
// ============================================

function createInlineBox(magnet) {
  const html = `
    <div class="lead-magnet-inline" style="
      background: linear-gradient(135deg, ${magnet.colorLight} 0%, ${magnet.colorLight}dd 100%);
      border: 2px solid ${magnet.color};
      border-radius: 12px;
      padding: 1.5rem;
      margin: 2rem 0;
      text-align: left;
    ">
      <div style="font-size: 2rem; margin-bottom: 0.75rem;">${magnet.emoji}</div>
      <h4 style="font-size: 1.1rem; font-weight: 700; color: ${magnet.color}; margin-bottom: 0.5rem;">
        ${magnet.title}
      </h4>
      <p style="color: #475569; margin-bottom: 1rem; font-size: 0.95rem;">
        ${magnet.subtitle}
      </p>
      <button onclick="openLeadMagnetPopup('${magnet.id}')" style="
        background: ${magnet.color};
        color: #fff;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        font-size: 0.95rem;
      ">
        ${magnet.cta} →
      </button>
    </div>
  `;
  
  return html;
}

// ============================================
// GÉNÉRATION DE LA POPUP
// ============================================

function createPopup(magnet) {
  const popup = document.createElement('div');
  popup.id = 'lead-magnet-popup';
  popup.innerHTML = `
    <div class="popup-overlay" onclick="closeLeadMagnetPopup()" style="
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 9998;
      opacity: 0;
      transition: opacity 0.3s;
    "></div>
    <div class="popup-content" style="
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.9);
      background: #fff;
      border-radius: 16px;
      padding: 2rem;
      max-width: 400px;
      width: 90%;
      z-index: 9999;
      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
      opacity: 0;
      transition: all 0.3s;
    ">
      <button onclick="closeLeadMagnetPopup()" style="
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 32px;
        height: 32px;
        background: #f1f5f9;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        font-size: 1.25rem;
        color: #64748b;
      ">×</button>
      <div style="font-size: 2.5rem; margin-bottom: 1rem;">${magnet.emoji}</div>
      <h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem;">
        Attendez ! Avant de partir...
      </h3>
      <p style="color: #475569; margin-bottom: 1.5rem;">
        ${magnet.exitText}
      </p>
      <form onsubmit="submitLeadMagnetForm(event, '${magnet.id}')">
        <input type="email" name="email" required placeholder="votre@email.com" style="
          width: 100%;
          padding: 0.875rem;
          border: 2px solid #e2e8f0;
          border-radius: 8px;
          margin-bottom: 1rem;
          font-size: 1rem;
          box-sizing: border-box;
        ">
        <button type="submit" style="
          width: 100%;
          background: ${magnet.color};
          color: #fff;
          padding: 0.875rem;
          border-radius: 8px;
          font-weight: 600;
          border: none;
          font-size: 1rem;
          cursor: pointer;
        ">
          ${magnet.cta} →
        </button>
      </form>
      <p style="font-size: 0.8rem; color: #94a3b8; text-align: center; margin-top: 1rem;">
        🔒 Pas de spam. Désabonnement en 1 clic.
      </p>
    </div>
  `;
  
  document.body.appendChild(popup);
  
  // Animation d'entrée
  setTimeout(() => {
    popup.querySelector('.popup-overlay').style.opacity = '1';
    popup.querySelector('.popup-content').style.opacity = '1';
    popup.querySelector('.popup-content').style.transform = 'translate(-50%, -50%) scale(1)';
  }, 10);
}

// ============================================
// CONTRÔLES POPUP
// ============================================

function openLeadMagnetPopup(magnetId) {
  const magnet = Object.values(leadMagnets).find(m => m.id === magnetId);
  if (magnet) createPopup(magnet);
}

function closeLeadMagnetPopup() {
  const popup = document.getElementById('lead-magnet-popup');
  if (popup) {
    popup.querySelector('.popup-overlay').style.opacity = '0';
    popup.querySelector('.popup-content').style.opacity = '0';
    setTimeout(() => popup.remove(), 300);
  }
}

function submitLeadMagnetForm(event, magnetId) {
  event.preventDefault();
  const email = event.target.querySelector('input[name="email"]').value;
  
  // Envoyer à ton service (ConvertKit, Mailchimp, etc.)
  console.log(`Lead Magnet: ${magnetId}, Email: ${email}`);
  
  // Exemple : envoyer à ConvertKit
  // fetch('https://api.convertkit.com/v3/forms/YOUR_FORM_ID/subscribe', {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify({ api_key: 'YOUR_API_KEY', email, tags: [magnetId] })
  // });
  
  // Afficher confirmation
  event.target.innerHTML = '<p style="text-align:center;padding:1rem;color:#16a34a;font-weight:600;">✅ C\'est envoyé ! Vérifiez votre boîte mail.</p>';
  
  // Sauvegarder en localStorage pour ne pas réafficher
  localStorage.setItem(`lead-magnet-${magnetId}`, 'submitted');
  
  setTimeout(closeLeadMagnetPopup, 2000);
}

// ============================================
// EXIT INTENT DETECTION
// ============================================

let exitIntentShown = false;

function initExitIntent(magnet) {
  // Vérifier si déjà soumis
  if (localStorage.getItem(`lead-magnet-${magnet.id}`)) return;
  
  // Desktop : détection mouvement souris vers le haut
  document.addEventListener('mouseout', (e) => {
    if (exitIntentShown) return;
    if (e.clientY < 10 && e.relatedTarget === null) {
      exitIntentShown = true;
      createPopup(magnet);
    }
  });
  
  // Mobile : détection scroll rapide vers le haut (retour)
  let lastScrollY = window.scrollY;
  let scrollVelocity = 0;
  
  window.addEventListener('scroll', () => {
    scrollVelocity = lastScrollY - window.scrollY;
    lastScrollY = window.scrollY;
    
    // Si scroll rapide vers le haut près du top
    if (!exitIntentShown && scrollVelocity > 50 && window.scrollY < 200) {
      exitIntentShown = true;
      setTimeout(() => createPopup(magnet), 500);
    }
  });
}

// ============================================
// INITIALISATION
// ============================================

document.addEventListener('DOMContentLoaded', () => {
  const magnet = detectCurrentLeadMagnet();
  
  // Insérer l'inline box après le 3ème paragraphe (ou #inline-lead-magnet)
  const target = document.querySelector('#inline-lead-magnet') 
    || document.querySelectorAll('.content p')[2];
  
  if (target) {
    target.insertAdjacentHTML('afterend', createInlineBox(magnet));
  }
  
  // Activer exit intent (après 30s sur la page)
  setTimeout(() => initExitIntent(magnet), 30000);
});

📱 Conseils Mobile-Friendly

Règles à respecter

Popup : max-width: 90% de l'écran, padding adapté
Boutons : minimum 48px de hauteur (touch-friendly)
Input email : font-size: 16px minimum (évite le zoom iOS)
Exit-intent mobile : utiliser le scroll velocity, pas le mouseout
Close button : toujours visible, min 44x44px
Timing : ne pas afficher la popup avant 30s de navigation

🎯 Bonnes pratiques CRO

1 seul Lead Magnet par page — évite la confusion
Cohérence contextuelle — le contenu premium doit être lié à l'article
Pas de popup immédiate — attendre 30s ou 50% de scroll
Exit-intent = dernière chance — texte plus direct, urgence modérée
Social proof subtile — "50+ équipes" plutôt que "des milliers"
Confirmation claire — toujours dire ce qui se passe après soumission
Pas de dark patterns — le X de fermeture doit être visible
Tester les variantes — A/B test sur les titres et CTA

🧲 Stratégie Lead MagnetsGuide Pipedrive

📌 Encadré Inline (milieu d'article)

🚨 Popup Exit-Intent

🎨 Conseils Design

Gagnez 2h de config : importez nos 5 pipelines prêts à l'emploi

📌 Encadré Inline

🚨 Popup Exit-Intent

🎨 Conseils Design

Les 28 champs que 90% des CRM oublient

📌 Encadré Inline

🚨 Popup Exit-Intent

🎨 Conseils Design

Le blueprint exact du scoring que j'utilise

📌 Encadré Inline

🚨 Popup Exit-Intent

🎨 Conseils Design

5 astuces de pro pour diviser vos opérations Make par 3

📌 Encadré Inline

🚨 Popup Exit-Intent

🎨 Conseils Design

Migrer sans perdre une seule donnée

📊 Tableau récapitulatif

🖼️ Aperçu Popup Exit-Intent

Attendez ! Avant de partir...

💻 Script JavaScript universel

📱 Conseils Mobile-Friendly

Règles à respecter

🎯 Bonnes pratiques CRO

🧲 Stratégie Lead Magnets
Guide Pipedrive