issam0505's picture
Deploy Call Attraction Command Center v2.0
3d9d566
Raw
History Blame Contribute Delete
34 kB
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CALL ATTRACTION — Scripts d'Appel</title>
<meta property="og:title" content="Call Attraction — Scripts d'Appel">
<meta property="og:description" content="Scripts complets de prise de RDV charpente & bilan energetique — qualification, objections, confirmation.">
<meta property="og:image" content="/brand/og-image.png">
<meta property="og:type" content="website">
<link rel="icon" type="image/png" sizes="32x32" href="/brand/favicon-32.png">
<link rel="icon" type="image/x-icon" href="/brand/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--gold: #FFB800;
--gold-light: #FFD600;
--gold-dark: #E6A600;
--bg: #060812;
--bg-surface: #0F1219;
--bg-card: #0D1017;
--bg-elevated: #161A26;
--white: #E2E4EA;
--grey: #8b949e;
--grey-dark: #484f58;
--border: rgba(255, 255, 255, 0.06);
--blue: #002395;
--red: #ED2939;
--green: #22C55E;
}
body {
font-family: 'Inter', -apple-system, sans-serif;
background: var(--bg);
color: var(--white);
min-height: 100vh;
line-height: 1.7;
}
body::after {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.03;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}
.tricolor {
height: 3px;
background: linear-gradient(90deg, var(--blue) 33%, #FFFFFF 33% 66%, var(--red) 66%);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
.header {
position: sticky;
top: 3px;
z-index: 100;
background: linear-gradient(135deg, rgba(6,8,18,0.97), rgba(15,18,25,0.97));
border-bottom: 1px solid var(--border);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
padding: 16px 32px;
display: flex;
align-items: center;
justify-content: space-between;
}
.header-left {
display: flex;
align-items: center;
gap: 16px;
}
.back-btn {
display: flex;
align-items: center;
gap: 8px;
color: var(--grey);
text-decoration: none;
font-size: 14px;
font-weight: 500;
padding: 8px 16px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg-card);
transition: all 0.2s;
}
.back-btn:hover {
color: var(--gold);
border-color: rgba(255,184,0,0.3);
background: rgba(255,184,0,0.05);
}
.page-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 22px;
font-weight: 700;
background: linear-gradient(135deg, var(--gold), var(--gold-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-subtitle {
color: var(--grey);
font-size: 13px;
margin-top: 2px;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 32px 24px 80px;
}
/* Intro banner */
.intro-banner {
background: linear-gradient(135deg, rgba(255,184,0,0.06), rgba(255,214,0,0.03));
border: 1px solid rgba(255,184,0,0.15);
border-radius: 16px;
padding: 24px 28px;
margin-bottom: 28px;
display: flex;
gap: 16px;
align-items: flex-start;
}
.intro-banner .intro-icon {
font-size: 28px;
min-width: 36px;
}
.intro-banner h2 {
font-family: 'Space Grotesk', sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--gold);
margin-bottom: 8px;
}
.intro-banner p {
font-size: 13px;
color: var(--grey);
line-height: 1.7;
}
.intro-banner .rule {
color: var(--gold);
font-weight: 600;
}
/* Tabs */
.tabs-wrapper {
display: flex;
gap: 4px;
background: var(--bg-surface);
border-radius: 12px;
padding: 6px;
border: 1px solid var(--border);
margin-bottom: 28px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tab-btn {
padding: 10px 18px;
border: none;
background: transparent;
color: var(--grey);
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.25s;
white-space: nowrap;
position: relative;
}
.tab-btn:hover {
color: var(--white);
background: rgba(255,255,255,0.04);
}
.tab-btn.active {
color: var(--bg);
background: linear-gradient(135deg, var(--gold), var(--gold-light));
box-shadow: 0 4px 16px rgba(255,184,0,0.25);
}
.tab-btn .tab-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 11px;
margin-right: 6px;
background: rgba(255,255,255,0.08);
font-weight: 700;
}
.tab-btn.active .tab-num {
background: rgba(0,0,0,0.15);
}
.tab-content {
display: none;
animation: fadeIn 0.35s ease;
}
.tab-content.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Script Card */
.script-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.script-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--gold), var(--gold-dark), transparent);
}
.script-card h3 {
font-family: 'Space Grotesk', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--gold);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 10px;
}
.script-card h3 .icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255,184,0,0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.script-text {
font-size: 15px;
line-height: 1.9;
color: var(--white);
padding: 20px 24px;
background: rgba(255,255,255,0.02);
border-radius: 10px;
border-left: 3px solid var(--gold-dark);
margin-bottom: 16px;
}
.script-text .highlight {
color: var(--gold);
font-weight: 600;
}
.script-text .variable {
color: var(--gold-light);
background: rgba(255,184,0,0.08);
padding: 2px 8px;
border-radius: 4px;
font-weight: 600;
font-size: 14px;
}
.script-text .prospect-response {
color: #60A5FA;
font-style: italic;
font-weight: 500;
}
.tip-box {
background: rgba(255,184,0,0.04);
border: 1px solid rgba(255,184,0,0.15);
border-radius: 10px;
padding: 16px 20px;
margin-top: 16px;
font-size: 13px;
color: var(--grey);
}
.tip-box strong {
color: var(--gold);
font-weight: 600;
}
.warning-box {
background: rgba(231,76,60,0.06);
border: 1px solid rgba(231,76,60,0.2);
border-radius: 10px;
padding: 16px 20px;
margin-top: 16px;
font-size: 13px;
color: #FCA5A5;
}
.warning-box strong {
color: #F87171;
font-weight: 600;
}
.success-box {
background: rgba(34,197,94,0.06);
border: 1px solid rgba(34,197,94,0.2);
border-radius: 10px;
padding: 16px 20px;
margin-top: 16px;
font-size: 13px;
color: #86EFAC;
}
.success-box strong {
color: var(--green);
font-weight: 600;
}
/* Checklist */
.checklist {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 16px;
}
.checklist li {
display: flex;
align-items: flex-start;
gap: 12px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 18px;
font-size: 14px;
transition: border-color 0.2s;
}
.checklist li:hover {
border-color: rgba(255,184,0,0.2);
}
.checklist .check-icon {
min-width: 24px;
height: 24px;
border-radius: 6px;
background: rgba(255,184,0,0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: var(--gold);
font-weight: 700;
}
.checklist .check-label {
font-weight: 600;
color: var(--white);
}
.checklist .check-note {
font-size: 12px;
color: var(--grey);
margin-top: 2px;
}
.checklist .check-example {
font-size: 12px;
color: var(--gold);
font-style: italic;
margin-top: 4px;
}
.section-label {
font-family: 'Space Grotesk', sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--grey);
margin-bottom: 12px;
margin-top: 20px;
}
.step-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 16px;
}
.step-badge.opening { background: rgba(59,130,246,0.12); color: #60A5FA; }
.step-badge.confiance { background: rgba(139,92,246,0.12); color: #A78BFA; }
.step-badge.rdv { background: rgba(255,184,0,0.12); color: var(--gold); }
.step-badge.criteres { background: rgba(46,204,113,0.12); color: #6EE7B7; }
.step-badge.confirm { background: rgba(243,156,18,0.12); color: #FBBF24; }
.step-badge.relance { background: rgba(231,76,60,0.12); color: #FCA5A5; }
.step-badge.entrant { background: rgba(34,197,94,0.12); color: #86EFAC; }
/* Flow indicator */
.flow-arrow {
text-align: center;
color: var(--grey-dark);
font-size: 20px;
margin: 8px 0;
}
/* VICIdial format box */
.vicidial-box {
background: #0a0e14;
border: 1px solid rgba(255,184,0,0.2);
border-radius: 10px;
padding: 16px 20px;
font-family: 'Courier New', monospace;
font-size: 13px;
color: var(--gold);
margin-top: 16px;
line-height: 1.6;
word-break: break-all;
}
.vicidial-box .label {
color: var(--grey);
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
display: block;
}
@media (max-width: 768px) {
.header { padding: 12px 16px; flex-direction: column; align-items: flex-start; gap: 8px; }
.container { padding: 20px 12px 60px; }
.tabs-wrapper { gap: 2px; padding: 4px; }
.tab-btn { padding: 8px 12px; font-size: 12px; }
.script-card { padding: 20px 16px; }
.script-text { padding: 14px 16px; font-size: 14px; }
.intro-banner { flex-direction: column; padding: 18px; }
}
</style>
</head>
<body>
<div class="tricolor"></div>
<div class="header">
<div class="header-left">
<a href="/" class="back-btn">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Hub
</a>
<img src="/brand/logo.png" alt="CA" style="width:28px;height:28px;object-fit:contain;">
<div>
<div class="page-title">Scripts d'Appel</div>
<div class="page-subtitle">Methode Call Attraction — Controle & Classification Habitat</div>
</div>
</div>
</div>
<div class="container">
<!-- INTRO -->
<div class="intro-banner">
<div class="intro-icon">🎯</div>
<div>
<h2>Regles d'Or — A Retenir</h2>
<p>
<span class="rule">1. Ton administratif</span> — Tu n'es PAS un commercial. Tu appelles pour un suivi de dossier.<br>
<span class="rule">2. Pas de question/reponse</span> — Tu as DEJA le dossier sous les yeux. Tu confirmes, tu ne demandes pas.<br>
<span class="rule">3. Alliance</span> — Tu es du cote du prospect, CONTRE les demarcheurs.<br>
<span class="rule">4. Rien a payer, rien a signer</span> — Toujours rappeler. Le seul engagement : quelques minutes.<br>
<span class="rule">5. Naturel</span> — Parle comme si tu connaissais deja le prospect. Pas de script robotique.
</p>
</div>
</div>
<!-- TABS -->
<div class="tabs-wrapper">
<button class="tab-btn active" onclick="showTab('accroche')"><span class="tab-num">1</span>Accroche</button>
<button class="tab-btn" onclick="showTab('confiance')"><span class="tab-num">2</span>Confiance & Alliance</button>
<button class="tab-btn" onclick="showTab('rdv')"><span class="tab-num">3</span>Proposition & RDV</button>
<button class="tab-btn" onclick="showTab('criteres')"><span class="tab-num">4</span>Criteres</button>
<button class="tab-btn" onclick="showTab('confirmation')"><span class="tab-num">5</span>Confirmation J-1</button>
<button class="tab-btn" onclick="showTab('relance')"><span class="tab-num">6</span>Relance</button>
<button class="tab-btn" onclick="showTab('entrant')"><span class="tab-num">7</span>Appel Entrant</button>
</div>
<!-- TAB 1: ACCROCHE -->
<div class="tab-content active" id="tab-accroche">
<div class="script-card">
<span class="step-badge opening">Etape 1 — Le Pretexte</span>
<h3><span class="icon">📞</span> Accroche Principale</h3>
<div class="script-text">
« Bonjour, c'est bien <span class="variable">[Mme/Mr Nom]</span> ? Oui bonjour, je suis <span class="variable">[Prenom Agent]</span>, je vous appelle <span class="highlight">suite au dernier controle energetique realise chez vous</span>. Je voulais juste vous informer d'une bonne nouvelle. Vous m'entendez bien ? »
</div>
<div class="section-label">Variante Combles</div>
<div class="script-text">
« Bonjour <span class="variable">[Mme/Mr Nom]</span>, <span class="variable">[Prenom Agent]</span> du <span class="highlight">service de suivi habitat</span>. Je vous contacte <span class="highlight">suite au dernier controle des combles effectue dans votre secteur</span>. J'ai votre dossier sous les yeux, j'ai une information importante a vous communiquer. »
</div>
<div class="section-label">Variante Regionale</div>
<div class="script-text">
« Bonjour <span class="variable">[Mme/Mr Nom]</span>, <span class="variable">[Prenom Agent]</span> du <span class="highlight">service de classification habitat</span> pour la region <span class="variable">[Region]</span>. Suite au dernier passage dans votre commune de <span class="variable">[Ville]</span>, j'ai le plaisir de vous appeler pour vous informer du resultat. »
</div>
<div class="tip-box">
<strong>💡 Ton :</strong> Administratif et bienveillant. Tu n'es PAS un commercial. Tu appelles pour donner une bonne nouvelle. Parle calmement, pas trop vite. Le prospect doit sentir que c'est un appel officiel, pas du demarchage. Ne dis JAMAIS « je suis commercial » ou « je vends ».
</div>
<div class="warning-box">
<strong>⚠️ A ne JAMAIS dire :</strong> « Je vous derange ? », « J'ai une offre pour vous », « Est-ce que vous avez 2 minutes ? ». Tu appelles pour un SUIVI — tu ne demandes pas la permission.
</div>
</div>
</div>
<!-- TAB 2: CONFIANCE & ALLIANCE -->
<div class="tab-content" id="tab-confiance">
<div class="script-card">
<span class="step-badge confiance">Etape 2 — Mise en Confiance</span>
<h3><span class="icon">🛡️</span> Classification & Alliance</h3>
<div class="section-label">La bonne nouvelle</div>
<div class="script-text">
« Alors <span class="variable">[Mme/Mr Nom]</span>, suite au dernier passage, je vous appelle pour vous informer que <span class="highlight">votre maison est classee parmi les maisons saines de la region</span>. Ca veut dire que globalement, il n'y a pas de gros travaux a prevoir, votre habitation est en bon etat. C'est une bonne nouvelle. »
</div>
<div class="flow-arrow"></div>
<div class="section-label">Alliance contre le demarchage</div>
<div class="script-text">
« Par contre, <span class="variable">[Mme/Mr Nom]</span>, on a eu <span class="highlight">pas mal de reclamations dernierement</span> comme quoi vous etes souvent derange au telephone par du demarchage et de la pub mensongere, <span class="highlight">on est bien d'accord ?</span> »
<br><br>
<span class="prospect-response">→ Le prospect repond generalement OUI (presque toujours)</span>
</div>
<div class="flow-arrow"></div>
<div class="section-label">Se positionner du meme cote</div>
<div class="script-text">
« Voila, c'est exactement pour ca qu'on a decide de <span class="highlight">faire le necessaire cette annee</span>. On va classer votre habitation et <span class="highlight">cloturer votre dossier</span>, et comme ca on aura aussi la possibilite de <span class="highlight">retirer votre numero</span> pour que les demarcheurs arretent de vous appeler tous les jours. »
</div>
<div class="tip-box">
<strong>💡 Psychologie :</strong> A ce stade, le prospect se dit : « Enfin quelqu'un qui comprend ! ». Tu es son allie, pas un vendeur. L'ironie c'est qu'on est un demarcheur, mais on se positionne CONTRE le demarchage. Ca cree une confiance immediate. Ne brise JAMAIS cette illusion.
</div>
<div class="success-box">
<strong>✅ Signal vert :</strong> Si le prospect dit « Ah oui, j'en ai marre des appels ! » ou « Oui c'est vrai qu'on est derange » → tu as gagne sa confiance. Enchaine directement sur la proposition.
</div>
</div>
</div>
<!-- TAB 3: PROPOSITION & RDV -->
<div class="tab-content" id="tab-rdv">
<div class="script-card">
<span class="step-badge rdv">Etape 3 — Proposition & Prise de RDV</span>
<h3><span class="icon">📋</span> Le Rapport & le Creneau</h3>
<div class="section-label">Proposer le passage</div>
<div class="script-text">
« Du coup <span class="variable">[Mme/Mr Nom]</span>, demain vous allez recevoir <span class="highlight">votre rapport de conformite</span> ainsi que <span class="highlight">votre dernier controle de suivi</span>. Y'a <span class="highlight">rien a payer, rien a signer</span>, le seul engagement c'est quelques minutes de votre part. »
</div>
<div class="flow-arrow"></div>
<div class="section-label">Choix du creneau (technique du choix ferme)</div>
<div class="script-text">
« Vous et <span class="variable">[Monsieur/Madame]</span>, c'est mieux <span class="highlight">la matinee ou l'apres-midi</span> ? »
<br><br>
<span class="prospect-response">→ Le prospect choisit un creneau</span>
<br><br>
« Tres bien, je vous mets sur le creneau de <span class="variable">[matin/aprem]</span>. Le technicien passera entre <span class="variable">[9h-12h / 14h-17h]</span>. Il vous appellera 30 minutes avant pour confirmer son arrivee. »
</div>
<div class="flow-arrow"></div>
<div class="section-label">Confirmation adresse</div>
<div class="script-text">
« Donc je confirme, vous etes bien au <span class="variable">[Adresse]</span> a <span class="variable">[Ville]</span> ? Et le meilleur numero pour vous joindre c'est bien le <span class="variable">[Telephone]</span> ? Parfait. »
</div>
<div class="tip-box">
<strong>💡 Technique :</strong> Ne demande JAMAIS « Quand etes-vous disponible ? ». Propose toujours un choix ferme : matinee ou apres-midi. Ca ne laisse pas de place a « je vais reflechir ». Tu confirmes l'adresse comme si tu l'avais deja (VICIdial te donne les infos).
</div>
<div class="warning-box">
<strong>⚠️ Important :</strong> Ne dis JAMAIS « visite commerciale », « devis », « offre ». C'est un « rapport de conformite » et un « controle de suivi ». Le prospect ne doit PAS se sentir dans un processus de vente.
</div>
</div>
</div>
<!-- TAB 4: CRITERES -->
<div class="tab-content" id="tab-criteres">
<div class="script-card">
<span class="step-badge criteres">Etape 4 — Prise des Criteres</span>
<h3><span class="icon">📊</span> Verification du Dossier</h3>
<div class="section-label">Introduction (tu as DEJA le dossier)</div>
<div class="script-text">
« Juste pour mettre a jour votre dossier, <span class="variable">[Mme/Mr Nom]</span>, je vais <span class="highlight">verifier quelques informations</span> qu'on a deja. Ca prend 30 secondes. »
</div>
<ul class="checklist">
<li>
<span class="check-icon">🏠</span>
<div>
<div class="check-label">Annee de construction</div>
<div class="check-note">« Votre maison date bien de <span class="highlight">19XX</span>, c'est ca ? » — Si tu ne sais pas : « Elle a ete construite dans les annees... ? »</div>
<div class="check-example">Cible : maison de +15 ans (avant 2010)</div>
</div>
</li>
<li>
<span class="check-icon">🧱</span>
<div>
<div class="check-label">Type d'isolation</div>
<div class="check-note">« Au niveau de l'isolation, c'est de la <span class="highlight">laine de verre</span> ? » — Confirme comme si tu le savais deja</div>
<div class="check-example">Types : laine de verre, laine de roche, polystyrene, rien</div>
</div>
</li>
<li>
<span class="check-icon">📐</span>
<div>
<div class="check-label">Surface habitable</div>
<div class="check-note">« La surface habitable c'est dans les <span class="highlight">100m²</span> a peu pres ? »</div>
<div class="check-example">Cible : +80m²</div>
</div>
</li>
<li>
<span class="check-icon">🪟</span>
<div>
<div class="check-label">Type de vitrage</div>
<div class="check-note">« Les fenetres c'est du <span class="highlight">double vitrage PVC</span> ? »</div>
<div class="check-example">Types : simple vitrage, double vitrage PVC / bois / alu</div>
</div>
</li>
<li>
<span class="check-icon">🔥</span>
<div>
<div class="check-label">Chauffage</div>
<div class="check-note">« Le chauffage c'est au <span class="highlight">gaz</span> chez vous ? » ou « Vous etes en <span class="highlight">electrique</span> ? »</div>
<div class="check-example">Types : gaz, electrique, fioul, PAC, clim reversible, bois</div>
</div>
</li>
<li>
<span class="check-icon">👤</span>
<div>
<div class="check-label">Situation / Ages</div>
<div class="check-note">« Vous etes bien a la <span class="highlight">retraite</span> tous les deux ? » — Si actifs : noter la profession</div>
<div class="check-example">Cible : retraites, Mr -80 ans, Mme -80 ans</div>
</div>
</li>
</ul>
<div class="section-label">Format de saisie VICIdial</div>
<div class="vicidial-box">
<span class="label">Exemple de commentaire VICIdial :</span>
14H00 RDV PRIS AVEC MME // couple prop // maison de 1975 // SUP HAB 100 M2 // db vitrage en PVC // laine de verre // chauffage clim reversible // en act Mme 1969 Mr 1948 retraite etait agricole
</div>
<div class="vicidial-box" style="margin-top: 10px;">
<span class="label">Autre exemple :</span>
10H00 RDV PRIS AVEC MR // proprio seul // maison de 1982 // SUP HAB 85 M2 // db vitrage bois // laine de roche // chauffage gaz // retraite Mr 1952 ancien fonctionnaire
</div>
<div class="tip-box">
<strong>💡 Technique :</strong> Tu CONFIRMES les infos, tu ne les DEMANDES pas. Dis « c'est bien de la laine de verre ? » et non « quel type d'isolation vous avez ? ». Si le prospect te corrige, note la bonne info. Cette technique inspire confiance car le prospect pense qu'on a deja son dossier.
</div>
</div>
</div>
<!-- TAB 5: CONFIRMATION J-1 -->
<div class="tab-content" id="tab-confirmation">
<div class="script-card">
<span class="step-badge confirm">Etape 5 — Rappel J-1</span>
<h3><span class="icon">🔔</span> Appel de Confirmation (la veille)</h3>
<div class="script-text">
« Bonjour <span class="variable">[Mme/Mr Nom]</span>, c'est <span class="variable">[Agent]</span> du service de suivi habitat. Je vous appelle pour confirmer le <span class="highlight">passage du technicien demain</span> chez vous au <span class="variable">[Adresse]</span>, sur le creneau de <span class="variable">[matin/aprem]</span>. C'est toujours bon pour vous ? »
</div>
<div class="section-label">Si le prospect confirme</div>
<div class="script-text">
« Parfait ! Le technicien sera la demain comme prevu. Il vous remettra votre <span class="highlight">rapport de conformite</span> et fera le point sur votre dossier. C'est rapide, ca prend une petite demi-heure. <span class="highlight">Bonne soiree !</span> »
</div>
<div class="section-label">Si le prospect veut reporter</div>
<div class="script-text">
« D'accord, pas de souci. Le technicien est dans votre secteur <span class="variable">[jour]</span> aussi, on peut decaler a ce moment-la. <span class="highlight">Matinee ou apres-midi ?</span> Comme ca votre dossier sera cloture rapidement. »
</div>
<div class="section-label">Si le prospect veut annuler</div>
<div class="script-text">
« <span class="variable">[Mme/Mr Nom]</span>, je comprends. Mais le technicien se deplace <span class="highlight">gratuitement</span> pour cloturer votre dossier et vous remettre votre rapport. Y'a <span class="highlight">rien a payer, rien a signer</span>. Ca serait dommage de ne pas en profiter, surtout que ca permet aussi de <span class="highlight">retirer votre numero des listes de demarchage</span>. On maintient ? »
</div>
<div class="tip-box">
<strong>💡 Conseil :</strong> L'appel J-1 est CRUCIAL. Sans confirmation, le taux de no-show explose. Rappelle toujours les 3 arguments cles : gratuit, cloture du dossier, retrait du numero.
</div>
</div>
</div>
<!-- TAB 6: RELANCE -->
<div class="tab-content" id="tab-relance">
<div class="script-card">
<span class="step-badge relance">Etape 6 — Relance</span>
<h3><span class="icon">🔄</span> Relance apres RDV Manque</h3>
<div class="section-label">Relance J+1</div>
<div class="script-text">
« Bonjour <span class="variable">[Mme/Mr Nom]</span>, c'est <span class="variable">[Agent]</span> du service de suivi habitat. Le technicien est passe hier chez vous pour <span class="highlight">cloturer votre dossier</span> mais malheureusement vous n'etiez pas la. C'est pas grave, on va <span class="highlight">reprogrammer le passage</span>. Il est dans votre secteur <span class="variable">[jour]</span>, ca vous irait ? »
</div>
<div class="section-label">Si le prospect s'excuse</div>
<div class="script-text">
« Y'a pas de souci <span class="variable">[Mme/Mr Nom]</span>, ca arrive. L'important c'est qu'on puisse <span class="highlight">cloturer votre dossier</span> et vous remettre votre rapport. Je vous remets sur le creneau de <span class="variable">[matin/aprem]</span>, <span class="variable">[jour]</span> ? »
</div>
<div class="section-label">Derniere relance (J+3)</div>
<div class="script-text">
« Bonjour <span class="variable">[Mme/Mr Nom]</span>, je me permets de vous recontacter une derniere fois pour <span class="highlight">votre dossier habitat</span>. Le technicien repasse dans votre secteur <span class="variable">[jour]</span>, c'est la derniere date disponible avant la cloture definitive. On en profite ? »
</div>
<div class="tip-box">
<strong>💡 Regle :</strong> Maximum 3 tentatives de relance. Au-dela, le prospect est considere comme perdu. Toujours rester courtois et professionnel. Le mot cle en relance : « cloturer votre dossier ».
</div>
</div>
</div>
<!-- TAB 7: APPEL ENTRANT -->
<div class="tab-content" id="tab-entrant">
<div class="script-card">
<span class="step-badge entrant">Etape 7 — Appel Entrant</span>
<h3><span class="icon">📲</span> Appel Entrant (le prospect rappelle)</h3>
<div class="section-label">Ouverture</div>
<div class="script-text">
« Call Attraction, bonjour, <span class="variable">[Prenom Agent]</span> a votre ecoute. »
</div>
<div class="flow-arrow"></div>
<div class="section-label">Si le prospect dit « On m'a laisse un message »</div>
<div class="script-text">
« Oui tout a fait, c'etait suite au <span class="highlight">dernier controle energetique de votre secteur</span>. Votre maison fait partie des habitations classees saines, et on voulait justement <span class="highlight">cloturer votre dossier</span>. »
</div>
<div class="flow-arrow"></div>
<div class="section-label">Enchainer vers la prise de RDV (meme methode que l'onglet 3)</div>
<div class="script-text">
« Du coup <span class="variable">[Mme/Mr Nom]</span>, on va pouvoir organiser <span class="highlight">le passage du technicien</span> pour vous remettre votre rapport de conformite. Y'a <span class="highlight">rien a payer, rien a signer</span>, le seul engagement c'est quelques minutes de votre part. Vous et <span class="variable">[Monsieur/Madame]</span>, c'est mieux <span class="highlight">la matinee ou l'apres-midi</span> ? »
<br><br>
<span class="prospect-response">→ Le prospect choisit un creneau</span>
<br><br>
« Tres bien, je vous mets sur le creneau de <span class="variable">[matin/aprem]</span>. Le technicien passera entre <span class="variable">[9h-12h / 14h-17h]</span>. Il vous appellera 30 minutes avant pour confirmer son arrivee. »
</div>
<div class="flow-arrow"></div>
<div class="section-label">Prise des criteres (meme methode que l'onglet 4)</div>
<div class="script-text">
« Juste pour mettre a jour votre dossier, je vais <span class="highlight">verifier quelques informations</span>. Ca prend 30 secondes. »
</div>
<ul class="checklist">
<li>
<span class="check-icon">🏠</span>
<div>
<div class="check-label">Annee de construction</div>
<div class="check-note">« Votre maison date bien de <span class="highlight">19XX</span>, c'est ca ? »</div>
</div>
</li>
<li>
<span class="check-icon">🧱</span>
<div>
<div class="check-label">Type d'isolation</div>
<div class="check-note">« Au niveau de l'isolation, c'est de la <span class="highlight">laine de verre</span> ? »</div>
</div>
</li>
<li>
<span class="check-icon">📐</span>
<div>
<div class="check-label">Surface habitable</div>
<div class="check-note">« La surface habitable c'est dans les <span class="highlight">100m²</span> a peu pres ? »</div>
</div>
</li>
<li>
<span class="check-icon">🪟</span>
<div>
<div class="check-label">Type de vitrage</div>
<div class="check-note">« Les fenetres c'est du <span class="highlight">double vitrage PVC</span> ? »</div>
</div>
</li>
<li>
<span class="check-icon">🔥</span>
<div>
<div class="check-label">Chauffage</div>
<div class="check-note">« Le chauffage c'est au <span class="highlight">gaz</span> chez vous ? »</div>
</div>
</li>
<li>
<span class="check-icon">👤</span>
<div>
<div class="check-label">Situation / Ages</div>
<div class="check-note">« Vous etes bien a la <span class="highlight">retraite</span> tous les deux ? »</div>
</div>
</li>
</ul>
<div class="success-box">
<strong>✅ Rappel :</strong> L'appel entrant est BEAUCOUP plus facile — le prospect a deja fait la demarche de rappeler, il est quasi converti. Le taux de prise de RDV sur appel entrant est nettement superieur. Sois naturel, detendu, et enchaine directement vers le RDV.
</div>
<div class="tip-box">
<strong>💡 Tips :</strong> Ne perds pas de temps a re-expliquer tout le contexte. Le prospect rappelle = il est interesse. Va droit au but : confirme le motif en une phrase, propose le creneau, prends les criteres. C'est rapide et efficace.
</div>
</div>
</div>
</div>
<script>
function showTab(id) {
document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
document.getElementById('tab-' + id).classList.add('active');
event.currentTarget.classList.add('active');
}
</script>
</body>
</html>