View Categories

Essai calculateur

3 min read

échange claude https://claude.ai/chat/efc9ae9a-f975-4079-8084-db5e3e7b1ffd

Mes paramètres

60 pièces
80 %

Résultats mensuels

Pièces vendues
—
Chiffre d’affaires
—
Résultat net
—
Marge nette
—

Projection annuelle

CA annuel estimé
—
Résultat annuel
—

Ajuste les paramètres pour voir ton analyse.

Voilà le calculateur. Teste-le, ajuste les valeurs — il calcule en temps réel.

Pour l’intégrer sur ton site WordPress/Kadence, deux options :

Option 1 — La plus simple (5 min) Tu copies le code HTML dans un bloc « HTML personnalisé » de Kadence Blocks. Aucun plugin nécessaire, ça fonctionne directement.

Option 2 — Page dédiée (recommandé) Tu crées une page WordPress avec un template full-width Kadence, tu colles le code dans un bloc HTML, et tu mets un CTA en dessous qui pointe vers ton formulaire de contact ou ta page de réservation.

Tu veux que je :

  • Adapte les libellés à ton activité exacte ?
  • Ajoute un champ pour le taux horaire ou le coût matière ?
  • Prépare le code prêt à coller dans WordPress ?

Vous avez dit : c est la question quel sont les soltuoo,s pour l intégrer a wordpress ? #

c est la question quel sont les soltuoo,s pour l intégrer a wordpress ?

13:07

Claude a répondu : Les 3 options, du plus simple au plus avancé : #

Les 3 options, du plus simple au plus avancé :

Option 1 — Bloc HTML Kadence (gratuit, 5 min) Tu crées une page WordPress, tu ajoutes un bloc « HTML personnalisé » (natif dans Kadence Blocks), tu colles le code dedans. C’est tout. Aucun plugin, aucune configuration.

✅ Idéal si le calculateur est seul sur la page ⚠️ Le style s’adapte au thème Kadence mais peut nécessiter 2-3 ajustements CSS

Option 2 — Shortcode via functions.php du child theme (gratuit, 15 min) Tu enregistres le calculateur comme shortcode dans le child theme. Tu peux ensuite l’insérer n’importe où sur le site avec [calculateur_ca] — page, article, sidebar.

✅ Réutilisable partout ✅ Propre techniquement ⚠️ Nécessite d’éditer le child theme

Option 3 — Plugin « Code Snippets » (gratuit, 10 min) Même résultat que l’option 2 mais sans toucher au child theme. Tu installes le plugin Code Snippets, tu enregistres le shortcode dedans, tu l’appelles avec [calculateur_ca].

✅ Sans risque pour le thème ✅ Recommandé si tu n’es pas à l’aise avec le child theme

Mon conseil pour toi → Option 3 si tu veux aller vite et rester en sécurité. Option 1 si c’est une page dédiée unique.

Tu veux que je te prépare le code prêt à coller pour l’une de ces options ?

Vous avez dit : c est une page dédié #

c est une page dédié

13:08

Claude a répondu : Parfait. #

Parfait. Voilà le code prêt à coller.

Dans WordPress :

  1. Crée une nouvelle page
  2. Passe le template en « Largeur totale » (Full Width) dans Kadence
  3. Ajoute un bloc « HTML personnalisé »
  4. Colle ce code :

A exécuté une commande, fichier créé, lu un fichier

A exécuté une commande, fichier créé, lu un fichier

Télécharge ce fichier, ouvre-le dans un éditeur de texte (Notepad, TextEdit, VS Code), et copie tout le contenu.

Les 4 étapes dans WordPress :

  1. Nouvelle page → titre ex. « Simulateur de chiffre d’affaires »
  2. Template Kadence → choisis « Largeur totale » (sans sidebar)
  3. Ajoute un bloc → cherche « HTML personnalisé » dans Kadence Blocks
  4. Colle le code → publie

Un point important : vérifie que l’option « Désactiver le filtre WordPress sur le HTML » n’est pas active sur ton hébergement, sinon WordPress peut supprimer les balises <script>. Si ça arrive, dis-le moi — il y a une solution simple via Code Snippets.

<div id="calc-container" style="max-width:720px;margin:0 auto;padding:2rem 1rem;font-family:inherit;">

<style>
#calc-container * { box-sizing: border-box; }
#calc-container .sec-label { font-size:12px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px; }
#calc-container .input-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1.5rem; }
#calc-container .input-block { display:flex;flex-direction:column;gap:6px; }
#calc-container .input-block label { font-size:13px;color:#666; }
#calc-container .input-block input[type=number] { width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:8px;font-size:15px;color:#1a1a1a;background:#fff; }
#calc-container .slider-row { display:flex;flex-direction:column;gap:6px;margin-bottom:1.5rem; }
#calc-container .slider-row label { font-size:13px;color:#666; }
#calc-container .slider-inline { display:flex;align-items:center;gap:12px; }
#calc-container .slider-inline input[type=range] { flex:1;accent-color:#1a1a1a; }
#calc-container .slider-val { font-size:14px;font-weight:600;min-width:70px;color:#1a1a1a; }
#calc-container hr.div { border:none;border-top:1px solid #eee;margin:1.5rem 0; }
#calc-container .results-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:1.5rem; }
#calc-container .metric { background:#f6f6f4;border-radius:8px;padding:1rem; }
#calc-container .metric-label { font-size:12px;color:#888;margin-bottom:4px; }
#calc-container .metric-value { font-size:21px;font-weight:600;color:#1a1a1a; }
#calc-container .metric-value.good { color:#0F6E56; }
#calc-container .metric-value.warn { color:#854F0B; }
#calc-container .metric-value.bad { color:#A32D2D; }
#calc-container .insight { border-left:3px solid #ddd;padding:.75rem 1rem;margin-top:1rem; }
#calc-container .insight p { margin:0;font-size:14px;color:#555;line-height:1.6; }
#calc-container .insight p strong { color:#1a1a1a; }
@media(max-width:540px){
  #calc-container .input-grid { grid-template-columns:1fr; }
}
</style>

<p class="sec-label">Mes paramètres</p>

<div class="input-grid">
  <div class="input-block">
    <label>Prix de vente moyen par pièce (€)</label>
    <input type="number" id="cp-prix" value="45" min="1" step="1">
  </div>
  <div class="input-block">
    <label>Charges fixes mensuelles (€)</label>
    <input type="number" id="cp-charges" value="800" min="0" step="50">
  </div>
</div>

<div class="slider-row">
  <label>Pièces produites par mois</label>
  <div class="slider-inline">
    <input type="range" id="cp-pieces" min="1" max="300" value="60" step="1">
    <span class="slider-val" id="cp-pieces-out">60 pièces</span>
  </div>
</div>

<div class="slider-row">
  <label>Taux de vente effectif (%)</label>
  <div class="slider-inline">
    <input type="range" id="cp-taux" min="10" max="100" value="80" step="1">
    <span class="slider-val" id="cp-taux-out">80 %</span>
  </div>
</div>

<hr class="div">

<p class="sec-label">Résultats mensuels</p>
<div class="results-grid">
  <div class="metric"><div class="metric-label">Pièces vendues</div><div class="metric-value" id="cp-vendues">—</div></div>
  <div class="metric"><div class="metric-label">Chiffre d'affaires</div><div class="metric-value" id="cp-ca">—</div></div>
  <div class="metric"><div class="metric-label">Résultat net</div><div class="metric-value" id="cp-net">—</div></div>
  <div class="metric"><div class="metric-label">Marge nette</div><div class="metric-value" id="cp-marge">—</div></div>
</div>

<p class="sec-label">Projection annuelle</p>
<div class="results-grid">
  <div class="metric"><div class="metric-label">CA annuel estimé</div><div class="metric-value" id="cp-ca-an">—</div></div>
  <div class="metric"><div class="metric-label">Résultat annuel</div><div class="metric-value" id="cp-net-an">—</div></div>
</div>

<div class="insight"><p id="cp-insight">Ajuste les paramètres pour voir ton analyse.</p></div>

<script>
(function(){
  var fmt = function(n){ return new Intl.NumberFormat('fr-FR',{style:'currency',currency:'EUR',maximumFractionDigits:0}).format(n); };
  function calc(){
    var prix = parseFloat(document.getElementById('cp-prix').value)||0;
    var charges = parseFloat(document.getElementById('cp-charges').value)||0;
    var pieces = parseInt(document.getElementById('cp-pieces').value)||0;
    var taux = parseInt(document.getElementById('cp-taux').value)||0;
    document.getElementById('cp-pieces-out').textContent = pieces+' pièces';
    document.getElementById('cp-taux-out').textContent = taux+' %';
    var vendues = Math.round(pieces*taux/100);
    var ca = vendues*prix;
    var net = ca-charges;
    var marge = ca>0 ? Math.round(net/ca*100) : 0;
    document.getElementById('cp-vendues').textContent = vendues;
    document.getElementById('cp-ca').textContent = fmt(ca);
    var netEl = document.getElementById('cp-net');
    netEl.textContent = fmt(net);
    netEl.className = 'metric-value '+(net>0?'good':'bad');
    var margeEl = document.getElementById('cp-marge');
    margeEl.textContent = marge+' %';
    margeEl.className = 'metric-value '+(marge>=30?'good':marge>=10?'warn':'bad');
    document.getElementById('cp-ca-an').textContent = fmt(ca*12);
    document.getElementById('cp-net-an').textContent = fmt(net*12);
    var msg='';
    if(net<0){
      var manque=Math.ceil(-net/prix);
      msg='<strong>Attention :</strong> tu es en déficit de '+fmt(-net)+' ce mois-ci. Il te faudrait vendre <strong>'+manque+' pièces supplémentaires</strong> (ou réduire tes charges) pour atteindre l\'équilibre.';
    } else if(marge<30){
      var obj=Math.ceil((charges/0.7)/prix);
      msg='Ta marge de <strong>'+marge+'%</strong> est positive mais sous 30%. Pour atteindre une marge saine, vise <strong>'+obj+' pièces vendues</strong> ou augmente ton prix moyen.';
    } else {
      msg='Bonne rentabilité ! Ta marge de <strong>'+marge+'%</strong> est solide. En maintenant ce rythme, tu génères <strong>'+fmt(net*12)+'</strong> de résultat net par an.';
    }
    document.getElementById('cp-insight').innerHTML = msg;
  }
  ['cp-prix','cp-charges','cp-pieces','cp-taux'].forEach(function(id){
    document.getElementById(id).addEventListener('input',calc);
  });
  calc();
})();
</script>

</div>
Updated on mai 4, 2026

What are your Feelings

  • Happy
  • Normal
  • Sad

Powered by BetterDocs

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *