Référence interne · goodassur.com
Catalogue des shortcodes
Tous les composants Blade disponibles sur goodassur.com. Chaque shortcode s'utilise avec une seule balise <x-...> dans un fichier Blade. Les widgets « assurance » interrogent l'API Insurance en temps réel (cache 1h).
Classement top N x-insurance-top-ranking
Liste classée des N meilleures offres pour un profil donné (auto, habitation, mutuelle). Trie par prix ou par score Selectra. Sélecteur de profil optionnel.
$profileKey clé URL-friendly du profil (ex: auto-jeune-conducteur) $vertical auto | habitation | mutuelle (alternative à $profileKey) $profile nom du profil (alternative — résolu via france-insurance.profiles) $sortBy price | score (par défaut price) $limit nombre d'offres (par défaut 5) $priceLevel 0 | 1 | 2 | 'all' (0 = pas chères seulement) $onlyPartners n'inclure que les partenaires Selectra (false par défaut) $insurerSlugs array|csv — restreint à une liste d'assureurs $withProfileSelector affiche un <select> profil au-dessus (false)
Exemples
<x-insurance-top-ranking vertical="mutuelle" profile="Famille" :limit="5" />
<x-insurance-top-ranking
profileKey="auto-jeune-conducteur"
:limit="3"
:only-partners="true"
/>
<x-insurance-top-ranking vertical="habitation" :with-profile-selector="true" />Tableau comparatif x-insurance-comparison-table
Tableau multi-assureurs avec critères personnalisables (prix, score, garanties, plafonds). Idéal pour les pages comparatives éditoriales.
$product auto | habitation | mutuelle $profile nom du profil (ex: Famille, Senior, Jeune conducteur) $insurers array|csv — slugs d'assureurs (acheel, alan, april, …) $priceLevel 0 | 1 | 2 | 'all' $criteria array|csv — colonnes additionnelles (ex: hospitalisation,dentaire,optique)
Exemples
<x-insurance-comparison-table
product="mutuelle"
profile="Senior"
:insurers="['alan','april','harmonie-mutuelle','malakoff-humanis']"
:criteria="['hospitalisation','dentaire','optique']"
/>
<x-insurance-comparison-table product="auto" profile="Famille" />Remboursements santé x-insurance-health-reimbursement
Cartes multi-assureurs montrant les remboursements pour un poste santé donné (hospitalisation, soins courants, dentaire, optique, audition, médecines douces, prévention).
$profile nom du profil (ex: Famille, Senior) $insurerSlugs array|csv — assureurs à afficher $healthPost hospitalisation | soins-courants | dentaire | optique | audition | medecines-douces | prevention $priceLevel 0 | 1 | 2 | 'all' $sortBy null | refund_desc
Exemple
<x-insurance-health-reimbursement
profile="Famille"
:insurer-slugs="['alan','april','harmonie-mutuelle']"
health-post="dentaire"
sort-by="refund_desc"
/>Simulateur RAC x-insurance-rac-simulator
Calculatrice « reste à charge » : l'utilisateur saisit le coût d'un soin, le composant calcule le RAC et propose les 3 meilleures mutuelles pour le réduire.
$categorie equipement | dentaire | hospitalisation | imagerie | analyses | paramedical | consultations-generalistes | consultations-specialistes | prevention | cure-thermale (slug catégorie, optionnel) $profile profil par défaut (par défaut « Famille »)
Exemple
<x-insurance-rac-simulator categorie="equipement" />
Lettre de résiliation x-insurance-resignation-letter
Sélecteur de modèle de lettre de résiliation par situation (loi Hamon, échéance annuelle, déménagement, etc.) avec téléchargement PDF.
$vertical habitation | auto | mutuelle $default slug de la situation pré-sélectionnée (optionnel)
Exemple
<x-insurance-resignation-letter vertical="auto" />
Carte d'offre unique x-insurance-offer-card
Affiche une seule offre (assureur + profil) avec les détails (prix, garanties principales, CTA). Utilisée sur les pages assureur ou les comparatifs ciblés.
$product auto | habitation | mutuelle $insurer slug de l'assureur $profile nom du profil (par défaut « Famille ») $priceLevel 0 | 1 | 2 | 'all' $offer offre pré-hydratée (alternative à $insurer) $withProfileSelector affiche un sélecteur de profil (false) $defaultProfile profil par défaut quand le sélecteur est actif $allowedProfiles restreint la liste du sélecteur
Exemple
<x-insurance-offer-card product="auto" insurer="acheel" />
CTA téléphone x-phone-cta
Bandeau d'appel avec horaire d'ouverture en direct. Le numéro et l'URL de tracking dépendent de la verticale.
$vertical habitation | auto | mutuelle | animaux | general $title titre (par défaut « Besoin d'aide ? ») $description texte explicatif $hours ligne horaires (par défaut « Appel non surtaxé · du lundi au vendredi… »)
Un expert Selectra vous aide gratuitement
Nos experts en assurance sont prêts à vous guider pour trouver la meilleure offre adaptée à vos besoins.
Nos experts vous accompagnent gratuitement par téléphone :
01 86 65 20 05Appel non surtaxé · du lundi au vendredi de 8h30 à 20h, samedi de 9h à 18h
Code
<x-phone-cta vertical="auto" />
<x-phone-cta
vertical="mutuelle"
title="Trouvez la meilleure mutuelle santé"
description="Nos conseillers comparent gratuitement les offres."
/>CTA affiliation x-affiliate-cta
Bloc de redirection vers une landing partenaire (Acheel, April, etc.). Logo, badge, titre, description, liste de bénéfices et bouton.
$title titre principal $description paragraphe sous le titre $badge petit badge en tête (ex: « Devis gratuit et sans engagement ») $href URL de destination (selection/...) $ctaLabel libellé du bouton $logo URL du logo partenaire $logoAlt alt text du logo $features array — bullets de bénéfices
Exemple
<x-affiliate-cta
title="Protégez votre chien dès aujourd'hui"
description="Comparez les meilleures assurances chien en 2 minutes."
badge="Devis gratuit"
href="/selection/acheel/chien-chat"
cta-label="Obtenir mon devis"
logo="https://images.goodassur.com/fr-insurance/logos/acheel-xs.png"
:features="[
'Couverture vétérinaire jusqu\'à 2 000 €/an',
'Sans questionnaire de santé',
'Souscription 100 % en ligne',
]"
/>CTA carte grise x-carte-grise-cta
Bloc CTA dédié au service carte grise. Auto-affiche le numéro de téléphone correspondant.
$title titre du bloc $description texte explicatif
Exemple
<x-carte-grise-cta
title="Faites votre carte grise en 5 minutes"
description="Service en ligne agréé ANTS — paiement sécurisé."
/>Grille devis x-devis-grid
Grille à 3 cartes (Mutuelle / Auto / Habitation par défaut) qui dirige vers les comparateurs. À utiliser comme bloc « passage à l'action » en bas d'article.
$items array de cartes — chaque item = ['icon' => '🩺', 'name' => 'Mutuelle', 'href' => '/...', 'cta' => 'Devis gratuit'] $title titre optionnel au-dessus de la grille
Exemple
<x-devis-grid title="Comparer en 2 minutes" />
<x-devis-grid :items="[
['icon' => '🚗', 'name' => 'Auto', 'href' => '/selection/comparateur-assurance-auto', 'cta' => 'Devis auto'],
['icon' => '🏠', 'name' => 'Habitation', 'href' => '/selection/comparateur-assurance-habitation', 'cta' => 'Devis habitation'],
['icon' => '🐕', 'name' => 'Animaux', 'href' => '/selection/acheel/chien-chat', 'cta' => 'Devis animal'],
]" />Podium top 3 x-podium-top3
Cartes or / argent / bronze pour le top 3 d'un classement. Médaille, logo, badge, libellé, CTA. Utilisé en tête des pages classement.
$items array de 3 items — chacun ['name', 'slug', 'cta_href', + optionnels: 'logo', 'cta_label', 'text', 'name_href'] $title titre au-dessus du podium $description paragraphe descriptif
Exemple
<x-podium-top3
title="Notre top 3 des meilleures mutuelles santé"
:items="[
['name' => 'Alan', 'slug' => 'alan', 'cta_href' => '/selection/comparateur-assurance-sante'],
['name' => 'Heyme', 'slug' => 'heyme', 'cta_href' => '/selection/heyme/mutuelle-sante'],
['name' => 'Harmonie Mutuelle', 'slug' => 'harmonie-mutuelle', 'cta_href' => '/selection/comparateur-assurance-sante'],
]"
/>Classement prix x-price-ranking
Liste éditoriale ordonnée d'assureurs avec économie %, prix de référence, et CTA. Plus dense que le podium — utilisée pour les top 5 / top 10.
$items array — chaque item ['name', 'slug', 'price', 'discount', 'href'] $legend ligne explicative sous le titre $footerCta CTA en pied de bloc
Exemple
<x-price-ranking
legend="Prix moyens annuels pour un profil Famille — mai 2025"
:items="[
['name' => 'Acheel', 'slug' => 'acheel', 'price' => '589 €/an', 'discount' => '-32 %', 'href' => '/selection/acheel/mutuelle-sante'],
['name' => 'Alan', 'slug' => 'alan', 'price' => '612 €/an', 'discount' => '-28 %', 'href' => '/selection/comparateur-assurance-sante'],
]"
/>Top 3 mutuelles x-mutuelle-rembours-top3
Trois cartes côte à côte avec deux métriques chacune (ex: remboursement dentaire + optique). Spécifique à la santé.
$items array — 3 items avec name, slug, ctaHref, metric1Label, metric1Value, metric2Label, metric2Value $legend texte sous le bloc
Code
<x-mutuelle-rembours-top3
legend="Sources : grilles tarifaires officielles, mai 2025"
:items="[ /* 3 items */ ]"
/>Carte n°1 mutuelle x-top-mutuelle-remboursement
Carte « meilleure mutuelle de l'année » avec badge, logo, téléphone, description et bouton devis. Utilisée en tête des classements thématiques.
$insurer slug de l'assureur $insurerName nom affiché $logoUrl URL du logo $insurerHref lien vers la page assureur $phoneNumber numéro affiché $phoneHref tel:+33... $topic thème (ex: « senior », « jeune ») $description paragraphe descriptif $ctaDevisHref URL du bouton devis $ctaDevisLabel libellé du bouton $year année du badge (ex: 2025)
Code
<x-top-mutuelle-remboursement
insurer="alan"
insurer-name="Alan"
logo-url="https://images.goodassur.com/fr-insurance/logos/alan-xs.png"
insurer-href="/alan"
phone-number="01 86 65 20 05"
phone-href="tel:0186652005"
topic="famille"
description="Alan se distingue par son interface 100 % digitale…"
cta-devis-href="/selection/comparateur-assurance-sante"
cta-devis-label="Obtenir un devis Alan"
:year="2025"
/>Avis d'expert x-expert-review
Bloc d'avis éditorial avec logo, description, deux colonnes pros / cons et CTA. Sur les pages assureur (Luko, Acheel, Alan, …).
$name nom de l'assureur $slug slug (logo auto) $logo URL du logo (override) $description paragraphe d'introduction $pros array de bullets « points forts » $cons array de bullets « points faibles » $ctaHref URL du bouton $ctaLabel libellé du bouton
Exemple
<x-expert-review
name="Luko"
slug="luko"
description="Luko propose une assurance habitation 100 % digitale…"
:pros="[
'Souscription en ligne en 5 minutes',
'Indemnisation rapide via l\'application',
'Politique anti-arnaque transparente',
]"
:cons="[
'Pas de couverture vie privée incluse',
'Service client uniquement par chat',
]"
cta-href="/selection/luko/habitation"
cta-label="Obtenir un devis Luko"
/>Carte d'identité assureur x-insurer-identity
Carte compacte affichant le score Selectra, la moyenne d'avis, les produits proposés et les plateformes. Branchée sur l'API + le fichier paraphrase.
$slug slug de l'assureur $insurerName nom affiché $insurerData données API (auto-injectées par PROVIDER-PAGE-REFERENCE) $paraphrase bloc paraphrase JSON $hasAuto bool — produit auto disponible $hasHome bool — produit habitation $hasHealth bool — produit santé
Exemple
<x-insurer-identity
slug="luko"
insurer-name="Luko"
:insurer-data="$insurerData"
:paraphrase="$paraphrase"
:has-home="true"
/>Alert x-alert
Encart coloré pour mettre en valeur une information clé : info, warning, danger, success. Icône emoji par défaut, ou personnalisable.
$type info | success | warning | danger | error | primary | secondary $icon emoji ou texte court (override) $title titre en gras (optionnel)
Bon à savoir
Attention
Code
<x-alert type="info" title="Bon à savoir">
Texte de l'alerte avec <strong>mots-clés</strong>.
</x-alert>
<x-alert type="warning" title="Attention">…</x-alert>
<x-alert type="danger" icon="🚨">Sans titre, juste un message.</x-alert>
<x-alert type="success">Confirmation positive.</x-alert>Info card x-info-card
Carte informative avec dégradé bleu clair. Icône emoji, titre (avec lien optionnel), contenu libre.
$icon emoji ou caractère $title titre en gras $titleHref si fourni, le titre devient un lien
Respectez le parcours de soins
Code
<x-info-card icon="🩺" title="Respectez le parcours de soins">
Passez par votre <strong>médecin traitant</strong>…
</x-info-card>
<x-info-card icon="🪟" title="Bris de glace" title-href="/assurance-auto/bris-de-glace">
Pare-brise, optiques, vitres…
</x-info-card>Verdict box x-verdict-box
Encart « notre verdict » avec icône colorée, label, titre et contenu. À placer en fin d'article ou de section éditoriale.
$tone info | success | warning | danger $label libellé en haut (par défaut « Notre verdict ») $title titre principal
Une mutuelle solide pour les familles
Code
<x-verdict-box tone="success" label="Notre verdict" title="Une mutuelle solide pour les familles">
Avec un rapport qualité/prix au-dessus de la moyenne…
</x-verdict-box>Timeline étapes x-timeline-steps
Frise horizontale numérotée (4 étapes recommandées). Idéal pour les processus de souscription ou de sinistre.
$steps array — chaque étape ['titre', 'detail'] $tone success | danger
-
1
Comparez
Renseignez votre profil en 2 minutes.
-
2
Choisissez
Sélectionnez l'offre la mieux adaptée.
-
3
Souscrivez
En ligne ou par téléphone, en 5 minutes.
-
4 ✓
Assuré
Effet immédiat ou différé selon vos besoins.
Code
<x-timeline-steps :steps="[
['titre' => 'Comparez', 'detail' => 'Renseignez votre profil en 2 minutes.'],
['titre' => 'Choisissez', 'detail' => 'Sélectionnez l\'offre la mieux adaptée.'],
['titre' => 'Souscrivez', 'detail' => 'En ligne ou par téléphone, en 5 minutes.'],
['titre' => 'Assuré', 'detail' => 'Effet immédiat ou différé.'],
]" />Pros / cons x-pros-cons
Grille à deux colonnes « avantages » / « inconvénients ». Composant partagé du framework — utiliser via le slot ou les props.
$pros array de bullets « avantages » $cons array de bullets « inconvénients »
Avantages
- Souscription 100 % en ligne en 5 minutes
- Tarifs compétitifs pour les jeunes conducteurs
- Application mobile complète
Inconvénients
- Pas de service client par téléphone
- Couverture limitée hors UE
Code
<x-pros-cons :pros="[
'Souscription 100 % en ligne en 5 minutes',
'Tarifs compétitifs pour les jeunes conducteurs',
]" :cons="[
'Pas de service client par téléphone',
]" />Key figure x-key-figure
Chiffre clé : grand nombre, label, description courte. Utilisé en groupe (3 ou 4) pour les blocs de chiffres marquants.
$value chiffre principal (ex: « 450 € », « 73 % ») $label libellé court $description ligne explicative
450 €
d'économies
par an en moyenne sur la mutuelle santé
5 min
pour comparer
toutes les offres du marché
0 €
sans engagement
comparateur 100 % gratuit
Code
<x-key-figure
value="450 €"
label="d'économies"
description="par an en moyenne sur la mutuelle santé"
/>Étoiles x-stars
Note sur 5 étoiles avec demi-étoile. Utilisée à côté des notes Trustpilot ou Selectra.
$note note de 0 à 5 (peut être décimale) $size taille en px (par défaut 14) $color couleur des étoiles (par défaut #F97316)
Code
<x-stars :note="4.5" /> <x-stars :note="3.8" :size="20" /> <x-stars :note="5" :size="16" color="#015aa3" />
Erreur de carburant x-carburant-diagnostic
Diagnostic en deux questions : « Avez-vous démarré le moteur ? » + « Combien de litres ? ». Affiche le risque, le coût estimé et le rappel d'assurance.
Aucun prop.
⛽ Je me suis trompé de carburant — est-ce grave ?
1. Quel est le type de carburant de votre véhicule ?
2. Quel carburant avez-vous mis ?
Marche à suivre :
Code
<x-carburant-diagnostic />
Bris / perte de lunettes x-lunettes-diagnostic
Diagnostic « qui rembourse ? » : casse vs perte, dans le délai 100 % santé ou non. Pas de prop.
Code
<x-lunettes-diagnostic />
Éligibilité CSS x-css-eligibility
Calculatrice d'éligibilité à la Complémentaire santé solidaire en fonction du foyer et des revenus. Affiche le résultat (gratuite / participative / non éligible).
$compareHref URL du comparateur de mutuelles (par défaut /selection/comparateur-assurance-sante) $phone numéro à afficher $phoneHref tel:+33...
Code
<x-css-eligibility />
Convertisseur kW / DIN / CV fiscal x-puissance-converter
Convertit la puissance d'un véhicule entre kW, chevaux DIN et chevaux fiscaux (CV fiscal). Pas de prop.
Code
<x-puissance-converter />
Simulateur retraite x-retraite-simulator
Estimation de la pension de retraite en 5 étapes (base + Agirc-Arrco) avec projection nette.
Code
<x-retraite-simulator />
Simulateur rachat de trimestres x-rachat-trimestre-simulator
Calcule le coût du rachat de trimestres Cnav (« taux seul » vs « taux + durée »). Pas de prop.
Code
<x-rachat-trimestre-simulator />
Comparateurs auto / habitation / santé x-tools.comparators.*
Applications interactives complètes (formulaire multi-étapes + résultats). À placer en pleine largeur, en haut de page comparateur. Ne pas inclure dans un article éditorial — utiliser x-affiliate-cta ou x-devis-grid à la place.
Code
<x-tools.comparators.sim-comparateur-auto /> <x-tools.comparators.sim-comparateur-habitation /> <x-tools.comparators.sim-comparateur-sante />