Embedding in WordPress

WordPress is the most common platform we get embedded on. Here's how to do it for every major editor and page builder.

Gutenberg (block editor) — most common

1. Open the page where you want the calculator.
2. Click + to add a block → search Custom HTML (or type /html).
3. Paste the iframe code from Dashboard → Embed.
4. Click Publish or Update.

Elementor

1. Edit the page with Elementor.
2. Drag an HTML widget onto the page (under "General" category).
3. Paste the iframe code into the HTML code field.
4. Click Update.

Divi Builder

1. Edit the page with Divi.
2. Add a Code module: Insert Module → Code.
3. Paste the iframe code into Content → Code.
4. Save.

Classic Editor

1. Open the page in Classic Editor.
2. Switch to the Text tab (top-right of the editor — not Visual).
3. Paste the iframe code where you want the calculator.
4. Click Update.

Floating widget on WordPress

Easiest path: free WPCode plugin.

1. Plugins → Add New → search WPCode, install + activate.
2. Code Snippets → Add Snippet → "Add Your Custom Code".
3. Paste the floating widget code (from the floating widget guide), set location to Site Wide Footer, save and activate.

Alternative: edit footer.php from Appearance → Theme File Editor and paste the floating widget code before </body>.

Advanced: a WordPress shortcode

If you want to use [calcwidgets] shortcodes instead of pasting iframe HTML every time, add this to your theme's functions.php:

function calcwidgets_shortcode($atts) {
    $atts = shortcode_atts(array(
        'subdomain' => 'yourname',
        'widgets'   => 'loan-repayment',
        'view'      => 'tab',
        'height'    => '800',
    ), $atts);

    $url = "https://{$atts['subdomain']}.calcwidgets.com/embed?widgets={$atts['widgets']}&view={$atts['view']}";
    $id  = 'calcwidgets-' . wp_unique_id();

    return '<iframe src="' . esc_url($url)
         . '" width="100%" height="' . esc_attr($atts['height'])
         . '" frameborder="0" id="' . esc_attr($id)
         . '" style="border:none;"></iframe>
<script>window.addEventListener("message",function(e){if(e.data&&e.data.type==="calcwidgets-height"){var f=document.getElementById("' . esc_js($id) . '");if(f&&e.source===f.contentWindow)f.style.height=e.data.height+"px";}});</script>';
}
add_shortcode('calcwidgets', 'calcwidgets_shortcode');

Replace yourname with your subdomain, save the file, and then use it anywhere on your site:

[calcwidgets widgets="loan-repayment,stamp-duty" view="stack"]

Common WordPress issues

"The iframe is showing scrollbars / clipped"

You're missing the auto-height script. See the auto-height guide.

"I pasted but nothing shows up"

• Make sure you used the Custom HTML block in Gutenberg (not a regular paragraph block).
• In Classic Editor, you must be on the Text tab, not Visual.
• Some security plugins (Wordfence, iThemes Security) strip iframe HTML by default. Allow calcwidgets.com as a trusted iframe source in plugin settings.

"Cloudflare / Securi is blocking the embed"

Some firewalls block third-party iframes by default. Add *.calcwidgets.com to your allow-list, or temporarily disable the firewall to confirm that's the issue.

Still stuck?

Email hello@calcwidgets.com with a link to your WordPress page and we'll help. Same-business-day response.