Section calculatrice interactive pour estimer un ROI, des économies ou un coût personnalisé.
Calculator
La section Calculator propose une calculatrice interactive permettant aux visiteurs d'estimer un retour sur investissement (ROI), des économies potentielles ou un coût personnalisé. Un outil de conversion puissant qui engage le visiteur et démontre la valeur de votre offre.
Fonctionnement
Le visiteur renseigne des valeurs dans les champs de saisie. Le résultat est calculé en temps réel selon la formule configurée (addition, multiplication, soustraction ou formule custom). Le tout sans rechargement de page.
Settings principaux
| Setting | Description | Options |
|---|---|---|
| Opération | Type de calcul | Addition / Multiplication / Soustraction / Custom |
| Formule custom | Expression mathématique personnalisée | Texte (ex: (A * B) - C) |
| Layout | Disposition du formulaire | Vertical / Horizontal |
| Format résultat | Format d'affichage du résultat | Nombre / Monétaire / Pourcentage |
| Devise | Symbole monétaire | EUR / USD / GBP / Custom |
| Préfixe résultat | Texte avant le résultat | Texte (ex: "Vous économisez") |
| Suffixe résultat | Texte après le résultat | Texte (ex: "par an") |
| Animation résultat | Compteur animé pour le résultat | On / Off |
Blocs disponibles
| Bloc | Description |
|---|---|
| Heading | Titre de la section |
| Text | Description / instructions |
| Calculator Input | Champ de saisie numérique |
| Button | Bouton CTA (ex: "Obtenir un devis") |
Bloc Calculator Input
Chaque champ de saisie est un bloc avec ces paramètres :
| Champ | Description |
|---|---|
| Label | Nom du champ (ex: "Budget mensuel actuel") |
| Placeholder | Texte indicatif dans le champ |
| Valeur par défaut | Valeur pré-remplie |
| Min | Valeur minimale autorisée |
| Max | Valeur maximale autorisée |
| Step | Incrément (ex: 10, 100) |
| Type | Champ texte / Slider / Select |
| Variable | Lettre de la variable (A, B, C, D) |
Mode Custom (formule personnalisée)
Le mode Custom permet de définir une formule mathématique libre utilisant les variables A, B, C, D correspondant aux blocs Calculator Input.
Exemples de formules :
| Formule | Description |
|---|---|
A + B | Simple addition |
A * 12 | Valeur annualisée |
(A * B) - C | Calcul avec soustraction |
A * B * 0.3 | Avec coefficient fixe |
(A - B) / A * 100 | Pourcentage d'économie |
Cas d'utilisation
Calculateur d'économies
- Layout Horizontal
- Input A : "Dépense mensuelle actuelle" (slider, 0-5000)
- Input B : "Nombre de mois" (select, 6/12/24)
- Formule :
A * B * 0.30 - Préfixe : "Vous économisez"
- Format : Monétaire EUR
- Bouton : "Commencer à économiser"
Calculateur de ROI
- Layout Vertical
- Input A : "Revenu mensuel" (champ texte)
- Input B : "Taux de conversion actuel %" (slider, 0-10)
- Input C : "Amélioration estimée %" (slider, 0-50)
- Formule custom :
A * (B / 100) * (C / 100) * 12 - Suffixe : "de revenus supplémentaires par an"
Estimateur de prix
- Layout Horizontal
- Input A : "Quantité" (slider, 1-1000)
- Input B : "Type de produit" (select avec prix unitaires)
- Opération : Multiplication
- Format : Monétaire
- Bouton : "Demander un devis"
eval sécurisé côté client. Seuls les opérateurs mathématiques de base et les variables A-D sont autorisés. Aucun risque d'injection de code.prefers-reduced-motion est actif.Prochaines étapes
- Produit mis en avant — Affichez un produit avec la calculatrice
- Blocs page produit — Intégrez le calcul dans la page produit
- Contenu repliable — FAQ sur l'utilisation du calculateur
- Formulaire de contact — Recueillez des demandes de devis