Qu'est-ce que le widget de calculatrice
Un widget de calculatrice est une version réduite et autonome d'une calculatrice complète de Calculate.Studio qui s'exécute directement dans votre propre page. Techniquement, il s'agit d'une iframe -- un élément HTML qui intègre une page à l'intérieur d'une autre -- pointant vers une version allégée de la calculatrice, accompagnée d'un court paragraphe de crédit placé juste en dessous. L'iframe est un élément HTML standard pris en charge par tous les navigateurs modernes, il n'y a donc rien à installer et rien qui puisse entrer en conflit avec le code de votre propre site.
Le widget est exactement la même calculatrice que celle qui fonctionne sur Calculate.Studio : les mêmes formules testées, les mêmes résultats instantanés calculés côté client et, pour les outils de santé et de finance, le même avertissement. Vos visiteurs saisissent leurs chiffres et voient les résultats immédiatement sans quitter votre page. Comme le calcul s'effectue dans le navigateur du visiteur plutôt que sur un serveur, le widget reste rapide même en cas de forte affluence, et aucune donnée du visiteur n'est envoyée où que ce soit.
Chacune des 210 calculatrices du site peut être intégrée. La galerie disponible sur calculate.studio/en/widgets met en avant les plus demandées -- IMC, hypothèque, prêt, pourcentage, intérêts composés, âge, calories et moyenne générale (GPA) en font partie -- et chaque page de calculatrice individuelle possède son propre bouton Embed, à côté des boutons de partage, qui révèle l'extrait de code correspondant à cet outil précis.
Comment l'installer -- la méthode générale
L'installation se résume à un simple copier-coller. L'extrait de code contient deux parties : l'iframe qui affiche la calculatrice, et un court paragraphe de crédit qui renvoie vers la calculatrice complète et vers Calculate.Studio. Conserver cette mention de crédit intacte est la seule condition de l'utilisation gratuite -- c'est elle qui permet de garder ce programme gratuit pour tout le monde.
- Ouvrez calculate.studio/en/widgets, ou ouvrez n'importe quelle page de calculatrice et cliquez sur le bouton </> Embed.
- Cliquez sur Copy code. L'extrait de code est copié dans votre presse-papiers.
- Dans l'éditeur de votre site, passez à la vue HTML (parfois appelée « code » ou « source ») de la page où la calculatrice doit apparaître.
- Collez l'extrait à l'endroit où la calculatrice doit s'afficher, puis enregistrez et publiez.
- Prévisualisez la page. La calculatrice doit se charger et calculer immédiatement -- testez-la une fois avec des chiffres d'exemple.
Instructions spécifiques par plateforme
La plupart des créateurs de sites acceptent le code HTML brut via un bloc ou un élément dédié, si bien que le même extrait fonctionne partout. Seuls les noms diffèrent d'une plateforme à l'autre :
| Plateforme | Où coller l'extrait de code |
|---|---|
| WordPress (éditeur de blocs) | Ajoutez un bloc « HTML personnalisé » et collez-y l'extrait de code. |
| WordPress (éditeur classique) | Basculez l'onglet de l'éditeur de « Visuel » à « Texte » et collez. |
| Wix | Ajoutez un élément « Intégrer du code HTML » (Ajouter → Code d'intégration → Intégrer du code HTML) et collez. |
| Squarespace | Ajoutez un bloc « Code » dans la section de la page et collez. |
| Shopify | Dans l'éditeur de page ou d'article de blog, cliquez sur le bouton <> (Afficher le HTML) et collez. |
| Webflow | Ajoutez un composant « Embed » et collez. |
| Site en HTML brut | Collez l'extrait directement dans le code HTML de la page, à l'endroit où la calculatrice doit s'afficher. |
Dimensionnement, style et performance
L'extrait de code est fourni avec des réglages par défaut sensés : pleine largeur (width="100%"), une hauteur fixe adaptée au nombre de champs de cette calculatrice, et une bordure arrondie discrète. Vous pouvez modifier la valeur de hauteur si votre thème nécessite un cadre plus haut ou plus bas, et vous pouvez modifier ou supprimer le style de bordure pour l'adapter à votre design. La largeur est réactive par défaut, si bien que le widget fonctionne sur les téléphones sans travail supplémentaire.
L'iframe inclut loading="lazy", un attribut standard du navigateur qui reporte le chargement du widget jusqu'à ce que le visiteur s'en approche en faisant défiler la page. Cela signifie qu'intégrer une calculatrice n'ajoute pratiquement rien au temps de chargement initial de votre page -- le navigateur ne récupère le widget que lorsqu'il est sur le point de devenir visible.
Les pages d'intégration elles-mêmes sont marquées noindex avec un lien canonique vers la page complète de la calculatrice, ce qui suit les recommandations de Google concernant le contenu intégré et le contenu dupliqué. Intégrer un widget ne peut donc pas créer de problème de contenu dupliqué, ni pour votre site ni pour le nôtre.
La seule règle : conserver le lien de crédit
Le programme de widgets est gratuit et sans inscription grâce à une seule condition : le court paragraphe de crédit sous l'iframe -- la ligne indiquant « [Nom de la calculatrice] by Calculate.Studio » -- doit rester en place. Il s'agit d'un texte de 12 pixels qui se trouve discrètement sous le widget et n'entre pas en concurrence avec votre contenu.
Vous êtes libre de redimensionner l'iframe, de restyliser sa bordure et de placer le widget où vous le souhaitez sur votre site, y compris sur des sites commerciaux, des blogs et des projets clients. Si vous avez besoin d'une calculatrice qui ne figure pas dans la galerie mise en avant, chaque page de calculatrice du site possède son propre bouton Embed, si bien que les 210 outils sont tous disponibles.
Quelles calculatrices fonctionnent le mieux en widgets ?
Le meilleur widget pour votre site est celui que vos lecteurs iraient chercher ailleurs s'ils devaient quitter votre page. Les blogs de fitness et de bien-être intègrent généralement les calculatrices d'IMC, de calories ou de TDEE. Les sites d'immobilier et de finances personnelles intègrent les calculatrices d'hypothèque, de prêt et d'intérêts composés. Les sites étudiants et éducatifs intègrent les calculatrices de moyenne générale (GPA) et de pourcentage, et les blogs généralistes ajoutent souvent la calculatrice d'âge à leurs articles intemporels.
Comme chaque widget affiche une version compacte de la calculatrice avec un lien vers la version complète -- laquelle inclut des tableaux d'interprétation, des exemples chiffrés et des sources -- vos lecteurs obtiennent une réponse immédiate sur votre page, avec la possibilité d'approfondir le sujet s'ils le souhaitent.
Questions fréquentes
Le widget de calculatrice est-il vraiment gratuit ?
Oui. Il n'y a aucune inscription, aucune clé API, aucune limite d'utilisation et aucun coût. La seule condition est que la petite mention de crédit sous le widget, renvoyant vers Calculate.Studio, reste en place.
Le widget va-t-il ralentir mon site web ?
Non. L'iframe utilise le chargement différé natif du navigateur, elle n'est donc récupérée que lorsqu'un visiteur s'en approche en faisant défiler la page, et le calcul s'exécute entièrement dans le navigateur du visiteur. Cela n'ajoute pratiquement rien au temps de chargement initial de votre page.
Puis-je intégrer une calculatrice sur un site commercial ou un site client ?
Oui. Les widgets peuvent être utilisés sur des sites commerciaux, des blogs et des projets clients sans frais, à condition que le lien de crédit sous le widget reste intact.
Puis-je modifier la taille ou la bordure du widget ?
Oui. Vous pouvez modifier la hauteur de l'iframe et le style de sa bordure pour l'adapter à votre site. La largeur est déjà réactive (100 %), elle s'adapte donc automatiquement aux téléphones et aux colonnes étroites.
L'intégration du widget cause-t-elle des problèmes de contenu dupliqué pour le SEO ?
Non. Les pages d'intégration sont marquées noindex avec un lien canonique pointant vers la page complète de la calculatrice, ce qui suit les recommandations documentées de Google, si bien que les moteurs de recherche ne considèrent pas le widget comme du contenu dupliqué sur votre site.
Références
- MDN Web Docs — <iframe>: The Inline Frame element. Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
- MDN Web Docs — Lazy loading (loading attribute). Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
- Google Search Central — Consolidate duplicate URLs with canonicals. Google. https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
- Google Search Central — Block search indexing with noindex. Google. https://developers.google.com/search/docs/crawling-indexing/block-indexing
- WHATWG HTML Living Standard — The iframe element. https://html.spec.whatwg.org/multipage/iframe-embed-object.html