/* Page /outil-prospection-linkedin-outreach-automation — cas d'usage généré automatiquement (pipeline GSC).
 * Gabarit standard BoomMaker : hero + sections + FAQ + CTA. CSS partagés only. */

const { useState } = React;
const { Logo, ArrowUpRight, Check, ThemeToggle, FooterMin, useReveal } = window.BMShared;

const C = {
  "slug": "outil-prospection-linkedin-outreach-automation",
  "breadcrumb": "Outreach LinkedIn automatisé",
  "eyebrow": "Acquisition · LinkedIn automation 2026",
  "h1": "Outils d'outreach LinkedIn automatisé :",
  "h1Em": "ce qui marche vraiment pour une PME",
  "lead": "Tu veux automatiser ta prospection LinkedIn sans te faire bannir ni envoyer des messages génériques que tout le monde ignore. Voici un tour d'horizon honnête des outils, de leurs limites et de ce que ça change concrètement.",
  "blocks": [
    {
      "type": "text",
      "eyebrow": "Le contexte",
      "h2": "Pourquoi l'outreach LinkedIn automatisé",
      "h2Em": "attire autant de TPE/PME",
      "intro": "",
      "paragraphs": [
        "LinkedIn reste le canal B2B le plus efficace pour toucher des décideurs sans budget publicitaire massif. Le problème : prospecter manuellement prend un temps fou. Envoyer des demandes de connexion, suivre les réponses, relancer, qualifier, c'est facilement plusieurs heures par semaine pour un résultat aléatoire.",
        "Les outils d'automation LinkedIn promettent de faire tourner tout ça en arrière-plan. La réalité est plus nuancée. Certains outils sont solides, d'autres te font courir un vrai risque de restriction de compte. Et sans une bonne liste de départ ni un message qui tient la route, aucun outil ne sauvera ta campagne.",
        "L'automatisation LinkedIn, ça amplifie ce que tu as déjà. Si ton ciblage est bon et ton message pertinent, tu gagnes un temps réel. Si c'est bancal, tu envoies juste plus vite des messages que personne ne lit."
      ],
      "stats": [],
      "cards": [],
      "steps": [],
      "items": [],
      "columns": [],
      "rows": [],
      "cases": [],
      "label": "",
      "text": ""
    },
    {
      "type": "comparison",
      "eyebrow": "Comparatif outils",
      "h2": "Les principaux outils d'outreach LinkedIn",
      "h2Em": "",
      "intro": "Voici les solutions les plus utilisées par les TPE/PME, dont Emelia, celle qu'on utilise chez Boom Maker. Toutes les infos sont publiques et vérifiables sur les sites officiels.",
      "paragraphs": [],
      "stats": [],
      "cards": [],
      "steps": [],
      "items": [],
      "columns": [
        "Outil",
        "Facilité",
        "Prix",
        "Sécurité compte",
        "IA native",
        "Multicanal"
      ],
      "rows": [
        [
          "Emelia",
          "⭐⭐⭐⭐",
          "€€",
          "Élevée",
          "Oui",
          "LinkedIn + email"
        ],
        [
          "HeyReach",
          "⭐⭐⭐⭐",
          "€€",
          "Élevée",
          "Non",
          "LinkedIn"
        ],
        [
          "Lemlist",
          "⭐⭐⭐⭐",
          "€€",
          "Élevée",
          "Oui",
          "LinkedIn + email"
        ],
        [
          "La Growth Machine",
          "⭐⭐⭐⭐",
          "€€",
          "Élevée",
          "Oui",
          "LinkedIn + email"
        ],
        [
          "Waalaxy",
          "⭐⭐⭐⭐⭐",
          "€",
          "Moyenne",
          "Non",
          "LinkedIn"
        ],
        [
          "Phantombuster",
          "⭐⭐⭐",
          "€€",
          "Faible",
          "Non",
          "LinkedIn"
        ],
        [
          "Dux-Soup",
          "⭐⭐⭐",
          "€",
          "Faible",
          "Non",
          "LinkedIn"
        ]
      ],
      "cases": [],
      "label": "",
      "text": ""
    },
    {
      "type": "callout",
      "eyebrow": "",
      "h2": "",
      "h2Em": "",
      "intro": "",
      "paragraphs": [],
      "stats": [],
      "cards": [],
      "steps": [],
      "items": [],
      "columns": [],
      "rows": [],
      "cases": [],
      "label": "La reco Boom Maker",
      "text": "Chez Boom Maker, on utilise Emelia. Il gère LinkedIn et email au même endroit, avec des séquences multicanales et une boîte de réception unifiée, ce qui évite de jongler entre plusieurs outils. On le branche ensuite sur le CRM avec Make. Les autres outils du tableau restent de très bons choix selon ton besoin, c'est surtout l'approche multicanale et française d'Emelia qui nous la fait préférer pour démarrer."
    },
    {
      "type": "stats",
      "eyebrow": "Ce que ça change",
      "h2": "Les gains réalistes d'une automatisation bien configurée",
      "h2Em": "",
      "intro": "Ces fourchettes sont basées sur ce qu'on observe chez les équipes qu'on accompagne. Elles varient selon le secteur, la qualité du ciblage et le message.",
      "paragraphs": [],
      "stats": [
        {
          "value": "6 à 12 h",
          "label": "économisées par semaine sur les tâches de prospection manuelle (envois, relances, suivi)"
        },
        {
          "value": "3 à 6 semaines",
          "label": "pour voir les premiers retours mesurables sur une séquence bien construite"
        },
        {
          "value": "2 à 5 comptes",
          "label": "LinkedIn pilotables en parallèle avec les outils multi-comptes comme Emelia ou HeyReach"
        },
        {
          "value": "1 outil suffit",
          "label": "dans la grande majorité des cas pour une PME de moins de 20 personnes. Pas besoin d'en empiler plusieurs."
        }
      ],
      "cards": [],
      "steps": [],
      "items": [],
      "columns": [],
      "rows": [],
      "cases": [],
      "label": "",
      "text": ""
    },
    {
      "type": "steps",
      "eyebrow": "Comment bien démarrer",
      "h2": "Les étapes pour lancer un outreach LinkedIn automatisé qui tient la route",
      "h2Em": "",
      "intro": "",
      "paragraphs": [],
      "stats": [],
      "cards": [],
      "steps": [
        {
          "title": "Définis ta cible avant de choisir ton outil",
          "body": "Secteur, taille d'entreprise, poste, zone géographique. Si tu ne sais pas exactement à qui tu parles, aucun outil ne compensera. Sales Navigator reste la référence pour construire des listes propres."
        },
        {
          "title": "Choisis un outil adapté à ton niveau de risque",
          "body": "Si tu as un compte LinkedIn actif et stratégique, évite les extensions Chrome (Dux-Soup, Phantombuster). Préfère les outils basés sur des API ou des comptes dédiés comme Emelia, HeyReach ou La Growth Machine. Le risque de restriction est nettement plus faible."
        },
        {
          "title": "Écris des séquences courtes et personnalisées",
          "body": "Une demande de connexion sans note, un premier message court et contextualisé, une relance maximum. Trois étapes, pas dix. La personnalisation via des variables (prénom, entreprise, secteur) fait une vraie différence sur les taux de réponse."
        },
        {
          "title": "Connecte ton outil à ton CRM",
          "body": "Un lead qui répond et qui n'est pas tracé quelque part, c'est un lead perdu. Make permet de pousser automatiquement les réponses et les connexions acceptées dans ton CRM ou ta feuille de suivi. C'est là que l'automatisation devient vraiment utile."
        }
      ],
      "items": [],
      "columns": [],
      "rows": [],
      "cases": [],
      "label": "",
      "text": ""
    },
    {
      "type": "cards",
      "eyebrow": "Profils types",
      "h2": "Qui tire vraiment parti de ces outils",
      "h2Em": "",
      "intro": "Quelques situations concrètes où l'outreach automatisé apporte une vraie valeur.",
      "paragraphs": [],
      "stats": [],
      "cards": [
        {
          "tag": "Cas 01",
          "title": "Agence ou cabinet sans commercial dédié",
          "body": "Le fondateur prospecte lui-même entre deux missions. Automatiser les envois et les relances lui libère du temps sans recruter. Il garde la main sur les réponses et les appels de qualification."
        },
        {
          "tag": "Cas 02",
          "title": "Équipe commerciale de 2 à 5 personnes",
          "body": "Chaque commercial pilote son propre compte LinkedIn avec des séquences standardisées mais personnalisables. Les réponses remontent automatiquement dans le CRM. Le manager voit les performances en temps réel."
        },
        {
          "tag": "Cas 03",
          "title": "Prestataire B2B sur un marché de niche",
          "body": "La cible est précise, le volume de prospects limité. L'outil permet de toucher l'ensemble du marché adressable de façon systématique, sans passer à côté de contacts qui auraient pu être intéressés."
        }
      ],
      "steps": [],
      "items": [],
      "columns": [],
      "rows": [],
      "cases": [],
      "label": "",
      "text": ""
    },
    {
      "type": "callout",
      "eyebrow": "",
      "h2": "",
      "h2Em": "",
      "intro": "",
      "paragraphs": [],
      "stats": [],
      "cards": [],
      "steps": [],
      "items": [],
      "columns": [],
      "rows": [],
      "cases": [],
      "label": "À retenir",
      "text": "L'outil ne fait pas la prospection à ta place. Il exécute ce que tu as conçu. Un bon message sur une bonne liste avec un outil fiable, c'est ça la combinaison gagnante. Commence simple, mesure, ajuste."
    }
  ],
  "faq": [
    {
      "q": "Est-ce que LinkedIn peut bannir mon compte si j'utilise un outil d'automation ?",
      "a": "Oui, c'est un risque réel, surtout avec les extensions Chrome qui simulent des clics dans le navigateur. Les outils basés sur des comptes dédiés ou des API (Emelia, HeyReach, La Growth Machine, Lemlist) sont nettement plus sûrs. Respecte aussi les limites d'envoi recommandées par chaque outil, en général entre 20 et 50 actions par jour pour un compte récent."
    },
    {
      "q": "Quel outil choisir si je débute et que j'ai un petit budget ?",
      "a": "Pour LinkedIn seul, Waalaxy est souvent la porte d'entrée la plus accessible : interface simple, prix contenu. Si tu veux un seul outil qui gère LinkedIn ET email avec une bonne personnalisation, Emelia est notre reco, c'est celui qu'on utilise chez Boom Maker. Lemlist ou La Growth Machine sont aussi de bons choix multicanaux, un cran au-dessus en tarif."
    },
    {
      "q": "Faut-il avoir Sales Navigator pour que ça marche ?",
      "a": "Non, ce n'est pas obligatoire. Mais Sales Navigator permet de construire des listes beaucoup plus précises avec des filtres avancés. Si tu prospectes sur un marché large ou que tu veux cibler par taille d'entreprise, croissance récente ou changement de poste, c'est un vrai plus. Pour un marché de niche bien connu, la recherche LinkedIn classique peut suffire."
    },
    {
      "q": "Combien de messages puis-je envoyer par jour sans risque ?",
      "a": "Ça dépend de l'ancienneté et de l'activité de ton compte. En règle générale, les outils sérieux recommandent de rester sous 30 à 50 invitations par jour et de monter progressivement. Un compte neuf doit commencer encore plus bas. L'objectif est de rester dans des comportements qui ressemblent à ceux d'un humain actif."
    },
    {
      "q": "Comment connecter mon outil LinkedIn à mon CRM ?",
      "a": "Certains outils proposent des intégrations natives avec HubSpot ou Pipedrive. Pour les autres CRM ou des workflows plus personnalisés, Make est la solution la plus flexible. Tu peux par exemple déclencher une action dans ton CRM dès qu'un prospect accepte ta connexion ou répond à ton message."
    },
    {
      "q": "Est-ce que Boom Maker peut configurer tout ça pour moi ?",
      "a": "Oui. On peut prendre en charge le choix de l'outil, la configuration des séquences, la connexion à ton CRM et la mise en place du suivi. On commence toujours par un audit de 30 minutes pour comprendre ta cible, ton cycle de vente et ce que tu as déjà en place. Pas de configuration générique, tout est adapté à ton contexte."
    }
  ],
  "ctaTitle": "Tu veux un outreach LinkedIn qui tourne",
  "ctaEm": "sans y passer tes soirées ?",
  "ctaText": "On regarde ensemble ton ciblage, tes messages et les outils adaptés à ta situation. Audit gratuit de 30 minutes, sans engagement.",
  "ctaSecondary": null
};

const AFF = {"make":"https://www.make.com/en/register?pc=boommaker","airtable":"https://airtable.com/invite/r/b7FpxImb","claude":"https://claude.ai/referral/JkRs2Ml5fA","emelia":"https://emelia.io/fr?_by=julia87"};
const affLink = (name) => AFF[String(name || '').toLowerCase().trim()] || null;

const PageNav = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <nav className="nav" id="nav">
        <a href="/" className="nav-logo" aria-label="Boom Maker"><Logo /></a>
        <div className="nav-links">
          <div className="nav-dropdown">
            <button type="button" className="nav-dropdown-trigger" aria-haspopup="true">
              Expertises <span className="nav-dropdown-caret">▾</span>
            </button>
            <div className="nav-dropdown-menu" role="menu">
              <a href="/expertises">3 piliers</a>
              <a href="/cas-usage">Cas d'usage</a>
              <a href="/partners">Partenaires</a>
            </div>
          </div>
          <a href="/tarifs">Tarifs</a>
          <a href="/news">News</a>
          <div className="nav-dropdown">
            <button type="button" className="nav-dropdown-trigger" aria-haspopup="true">
              À propos <span className="nav-dropdown-caret">▾</span>
            </button>
            <div className="nav-dropdown-menu" role="menu">
              <a href="/a-propos">BoomMaker</a>
              <a href="/#faq">FAQ</a>
            </div>
          </div>
          <a href="/contact">Contact</a>
        </div>
        <ThemeToggle />
        <a href="/audit-gratuit" className="btn btn-glow nav-cta-desktop">Audit gratuit <ArrowUpRight /></a>
        <button className="nav-burger" aria-label="Menu" aria-expanded={open}
                onClick={() => setOpen((o) => !o)}>
          <span /><span /><span />
        </button>
      </nav>
      <div className={`nav-mobile ${open ? 'open' : ''}`} onClick={() => setOpen(false)}>
        <span className="nav-mobile-group">/ Expertises</span>
        <a href="/expertises">3 piliers</a>
        <a href="/cas-usage">Cas d'usage</a>
        <a href="/partners">Partenaires</a>
        <a href="/tarifs">Tarifs</a>
        <a href="/news">News</a>
        <span className="nav-mobile-group">/ À propos</span>
        <a href="/a-propos">BoomMaker</a>
        <a href="/#faq">FAQ</a>
        <a href="/contact">Contact</a>
        <a href="/audit-gratuit" className="btn btn-glow">Audit gratuit <ArrowUpRight /></a>
      </div>
    </>
  );
};

/* Rend un bloc de contenu selon son type. Wrapper commun = .expertises-cases
 * (eyebrow + titre), puis corps spécifique. */
const Block = ({ b }) => {
  const head = (
    <>
      {b.eyebrow ? (
        <div className="expertise-eyebrow eyebrow"><span className="pulse" />{b.eyebrow}</div>
      ) : null}
      {b.h2 ? (
        <h2 className="expertises-cases-title">{b.h2}{b.h2Em ? <> <em>{b.h2Em}</em></> : null}</h2>
      ) : null}
      {b.intro ? <p className="uc-intro">{b.intro}</p> : null}
    </>
  );

  let body = null;
  if (b.type === 'stats') {
    body = (
      <div className="uc-stats">
        {b.stats.map((s, i) => (
          <div className="uc-stat" key={i}>
            <div className="uc-stat-value">{s.value}</div>
            <span className="uc-stat-label">{s.label}</span>
          </div>
        ))}
      </div>
    );
  } else if (b.type === 'cards') {
    body = (
      <div className="uc-cards">
        {b.cards.map((card, i) => (
          <article className="uc-card" key={i}>
            {card.tag ? <div className="uc-card-tag">{card.tag}</div> : null}
            <h3 className="uc-card-title">{card.title}</h3>
            <p className="uc-card-body">{card.body}</p>
          </article>
        ))}
      </div>
    );
  } else if (b.type === 'steps') {
    body = (
      <ol className="uc-steps">
        {b.steps.map((s, i) => (
          <li className="uc-step" key={i}>
            <div className="uc-step-num">/ {String(i + 1).padStart(2, '0')}</div>
            <div className="uc-step-content">
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          </li>
        ))}
      </ol>
    );
  } else if (b.type === 'comparison') {
    body = (
      <div className="uc-table-wrap">
        <table className="uc-table">
          <thead>
            <tr>{b.columns.map((col, i) => <th key={i}>{col}</th>)}</tr>
          </thead>
          <tbody>
            {b.rows.map((row, ri) => (
              <tr key={ri}>
                {row.map((cell, ci) => {
                  if (ci !== 0) return <td key={ci}>{cell}</td>;
                  const href = affLink(cell);
                  return (
                    <th scope="row" key={ci}>
                      {href
                        ? <a href={href} target="_blank" rel="sponsored noopener">{cell}</a>
                        : cell}
                    </th>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
        {b.rows.some((r) => affLink(r[0])) ? (
          <p className="uc-aff-note">Certains liens sont affiliés : si tu passes par eux, Boom Maker peut toucher une commission, sans surcoût pour toi.</p>
        ) : null}
      </div>
    );
  } else if (b.type === 'cases') {
    body = (
      <div className="uc-cases">
        {b.cases.map((cs, i) => (
          <article className="uc-case" key={i}>
            <div className="uc-case-profile">{cs.profile}</div>
            {cs.context ? <p className="uc-case-context">{cs.context}</p> : null}
            {cs.result ? <p className="uc-case-result">{cs.result}</p> : null}
          </article>
        ))}
      </div>
    );
  } else if (b.type === 'checklist') {
    body = (
      <ul className="uc-checklist">
        {b.items.map((it, i) => (
          <li key={i}>
            <Check />
            <span>{it.strong ? <strong>{it.strong} </strong> : null}{it.text}</span>
          </li>
        ))}
      </ul>
    );
  } else if (b.type === 'callout') {
    body = (
      <div className="uc-callout">
        {b.label ? <span className="uc-callout-label">{b.label}</span> : null}
        <p>{b.text}</p>
      </div>
    );
  } else {
    body = b.paragraphs.map((p, i) => (
      <p className="expertises-cases-lead" key={i}>{p}</p>
    ));
  }

  return <section className="expertises-cases">{head}{body}</section>;
};

const PageContent = () => {
  useReveal();
  return (
    <div className="usecase-page tarifs-page">
      <PageNav />

      <article className="audit-hero">
        <div className="container">
          <nav className="expertises-breadcrumb" aria-label="Fil d'Ariane">
            <a href="/">Accueil</a>
            <span className="expertises-breadcrumb-sep" aria-hidden="true">/</span>
            <a href="/cas-usage">Cas d'usage</a>
            <span className="expertises-breadcrumb-sep" aria-hidden="true">/</span>
            <span aria-current="page">{C.breadcrumb}</span>
          </nav>
          <span className="eyebrow"><span className="pulse" /> {C.eyebrow}</span>
          <h1>{C.h1}{C.h1Em ? <> <em>{C.h1Em}</em></> : null}</h1>
          <p className="lead">{C.lead}</p>
        </div>
      </article>

      <section className="expertises-content tarifs-content">
        <div className="container">
          <div className="expertises-main">
            {C.blocks.map((b, bi) => <Block b={b} key={bi} />)}

            {C.faq.length ? (
              <section className="expertises-faq" id="faq" aria-labelledby="faq-title">
                <div className="expertise-eyebrow eyebrow"><span className="pulse" />Questions fréquentes</div>
                <h2 className="expertises-faq-title" id="faq-title">Ce qu'on nous demande <em>le plus souvent.</em></h2>
                <div className="expertises-faq-list">
                  {C.faq.map((item, i) => (
                    <details className="expertises-faq-item" key={i}>
                      <summary>
                        <span>{item.q}</span>
                        <span className="expertises-faq-caret" aria-hidden="true">+</span>
                      </summary>
                      <p>{item.a}</p>
                    </details>
                  ))}
                </div>
              </section>
            ) : null}
          </div>
        </div>
      </section>

      <section className="partners-content partners-content-minimal">
        <div className="container">
          <div className="partners-cta-final">
            <h2>{C.ctaTitle}{C.ctaEm ? <> <em>{C.ctaEm}</em></> : null}</h2>
            <p>{C.ctaText}</p>
            <div className="partners-cta">
              <a href="/audit-gratuit" className="btn btn-glow">Réserver l'audit gratuit <ArrowUpRight /></a>
              {C.ctaSecondary ? (
                <a href={C.ctaSecondary.href} className="btn btn-ghost">{C.ctaSecondary.label} <ArrowUpRight /></a>
              ) : (
                <a href="/cas-usage" className="btn btn-ghost">Voir tous les cas d'usage <ArrowUpRight /></a>
              )}
            </div>
          </div>
        </div>
      </section>

      <FooterMin />
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<PageContent />);
