Add calculator widgets to your Drupal site using the Full HTML text format or a Custom Block. This guide covers both methods.
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 a Content Page
-
Create or edit content
Go to Content → Add content (or edit an existing page).
-
Switch to Full HTML
In the body field, change the text format dropdown to "Full HTML" to allow HTML embeds.
-
Switch to source mode
Click the "Source" button in the text editor toolbar to view raw HTML.
-
Paste and save
Paste your embed code where you want the calculator to appear, then save the content.
Alternative: Using a Custom Block
For reusable widgets in sidebars or other regions, create a Custom Block:
- Go to Structure → Block layout → Custom block library → Add custom block
- Give your block a name (e.g., "BMI Calculator Widget")
- Set the text format to "Full HTML" and paste your embed code
- Save the block, then place it in your desired region via Structure → Block layout
Tips
- If "Full HTML" is not available, ask your administrator to enable it for your role
- Some text formats filter out iframes for security. Full HTML bypasses these filters.
- The widget automatically adjusts its height based on content, so you don't need to worry about scroll bars
Troubleshooting
Your text format may be filtering HTML. Switch to "Full HTML" format or ask your administrator to allow iframe tags in your current format.
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.