Ajoutez des widgets de calculatrice à votre site Joomla dans les articles ou en tant que modules. Ce guide couvre les deux approches.
Étape 1 : Obtenez Votre Code d'Intégration
- Allez sur notre Générateur de Widget
- Choisissez votre type de calculatrice, personnalisez les couleurs et le style pour correspondre à votre site
- Copiez le code d'intégration généré depuis l'onglet "Intégration HTML"
Étape 2 : Ajouter à un Article
-
Créer ou modifier un article
Dans l'administration Joomla, allez dans Contenu → Articles et créez un nouvel article ou modifiez un article existant.
-
Passer en vue code
Dans l'éditeur d'article, cliquez sur "Basculer l'éditeur" ou le bouton "< >" pour passer en mode HTML brut.
-
Collez votre code d'intégration
Collez le code d'intégration où vous voulez que la calculatrice apparaisse dans votre article.
-
Enregistrer et visualiser
Enregistrez l'article et visualisez-le sur votre site pour voir le widget calculatrice.
Alternative : Utiliser un Module HTML Personnalisé
Pour afficher le widget dans une barre latérale ou une autre position de module :
- Allez dans Extensions → Modules → Nouveau
- Sélectionnez "Personnalisé" comme type de module
- Donnez-lui un titre et définissez la position où vous voulez qu'il apparaisse
- Dans le champ Sortie personnalisée, passez en vue code et collez votre code d'intégration
- Définissez "Préparer le contenu" sur "Non" et enregistrez le module
Conseils
- Assurez-vous que votre éditeur ne supprime pas les iframes - vérifiez les paramètres de l'éditeur si le code disparaît
- Pour TinyMCE, vous devrez peut-être ajouter "iframe" aux éléments valides étendus dans les paramètres du plugin
- Le widget ajuste automatiquement sa hauteur en fonction du contenu, vous n'avez donc pas à vous soucier des barres de défilement
Dépannage
Certains éditeurs suppriment les iframes pour des raisons de sécurité. Dans les paramètres de TinyMCE, ajoutez "iframe[src|width|height|frameborder|scrolling|style|title]" aux éléments valides étendus, ou utilisez un éditeur compatible avec le code comme CodeMirror.
Assurez-vous que le code d'intégration a été correctement collé et inclut les balises iframe et script. Vérifiez la console développeur de votre navigateur pour les erreurs.