How to embed a financial calculator in WordPress

Step 1: Get the embed code from your vendor

Open your calculator vendor's dashboard, select the calculator you want to embed, and copy the iframe embed code. It will look something like:

<iframe src="https://app.yourcalculator.com/embed/roth-conversion?firm=yourfirm"
        width="100%"
        height="800"
        frameborder="0"
        style="border: none;">
</iframe>

The exact attributes vary by vendor but every embed includes a src URL, dimensions, and styling.

Step 2: Open the WordPress page editor

Log into WordPress admin, go to Pages → Add New (or edit an existing page). The block editor (Gutenberg) opens. Click the + button to add a new block.

Step 3: Add a Custom HTML block

In the block search, type "Custom HTML" and select the block. A code editor area appears.

Step 4: Paste the iframe code

Paste the embed code from Step 1 directly into the Custom HTML block. Click "Preview" to see how it renders. The calculator should appear inside your page layout.

Step 5: Make it responsive

The default iframe height is fixed, which causes problems on mobile when the calculator's content is taller. Wrap the iframe in a responsive container:

<div style="position: relative; width: 100%; min-height: 800px;">
  <iframe src="https://app.yourcalculator.com/embed/roth-conversion?firm=yourfirm"
          width="100%"
          height="100%"
          frameborder="0"
          style="border: none; min-height: 800px;">
  </iframe>
</div>

Better calculators (including AdvisorCal) use postMessage to dynamically resize the iframe height as the user fills in fields, so the container grows and shrinks naturally.

Step 6: Add real surrounding content

Don't just drop a calculator on a blank page. Above the iframe, add a headline ("Roth Conversion Calculator"), a 2-3 sentence intro, and below the iframe, add an FAQ section with 4-6 common questions about Roth conversions. This is how the page ranks in Google and how it converts traffic into leads — the calculator is the experience, but the surrounding content is the SEO and trust layer.

Step 7: Publish and test

Click Publish. Open the live URL on your phone, your tablet, and your desktop. Test the calculator end-to-end. Make sure the mobile version is usable and the lead-capture form (if included) actually delivers to your inbox.

Step 8: Set up tracking

Install Google Analytics 4 if you haven't already, and verify that pageviews on the calculator page are firing. If your vendor supports event tracking inside the iframe (AdvisorCal does), you'll also see calculator interactions and lead submissions in GA4 — not just page loads.

Bottom line

Embedding a calculator in WordPress is a 5-minute job if your vendor ships clean iframe code with responsive sizing. The longer work is the surrounding page content, the SEO, and the lead-capture wiring — that's what turns the embed from a widget into a growth channel.