Add calculator widgets to your Joomla site in articles or as modules. This guide covers both approaches.
Step 1: Get Your Embed Code
- Go to our Widget Generator
- Choose your calculator type, customize colors and styling to match your website
- Copy the generated embed code from the "HTML Embed" tab
Step 2: Add to an Article
-
Create or edit an article
In the Joomla admin, go to Content → Articles and create a new article or edit an existing one.
-
Switch to code view
In the article editor, click the "Toggle Editor" or "< >" button to switch to raw HTML mode.
-
Paste your embed code
Paste the embed code where you want the calculator to appear in your article.
-
Save and preview
Save the article and view it on your site to see the calculator widget.
Alternative: Using a Custom HTML Module
To display the widget in a sidebar or other module position:
- Go to Extensions → Modules → New
- Select "Custom" as the module type
- Give it a title and set the position where you want it to appear
- In the Custom Output field, switch to code view and paste your embed code
- Set "Prepare Content" to "No" and save the module
Tips
- Make sure your editor doesn't strip iframes - check the editor settings if the code disappears
- For TinyMCE, you may need to add "iframe" to the Extended Valid Elements in the plugin settings
- The widget automatically adjusts its height based on content, so you don't need to worry about scroll bars
Troubleshooting
Some editors strip iframes for security. In TinyMCE settings, add "iframe[src|width|height|frameborder|scrolling|style|title]" to Extended Valid Elements, or use a code-friendly editor like CodeMirror.
Make sure the embed code was pasted correctly and includes both the iframe and the script tags. Check your browser's developer console for any error messages.