Skip to content

Add your estimator to a WordPress page

In WordPress you add the estimator with a Custom HTML block. No plugin is needed.

Before you start

  • Your estimator is published, and you've copied its Website code from Publish in your estimator.
  • You can edit pages in WordPress (an Administrator or Editor account).

Steps (block editor)

  1. In WordPress, go to Pages and open the page for the estimator, or add a new page.
  2. Click where it should appear, select the + (add block) button and search for Custom HTML.
  3. Paste your website code into the block.
  4. Select Update (or Publish for a new page).
  5. View the page in a private or signed-out browser window and run through the estimator once.

The block's own “Preview” tab may show a blank box; check the published page instead.

<div data-estimator-studio="YOUR-ESTIMATOR-ID"></div>
<script async src="https://estimatorstudio.com/embed.js"></script>
Example only. Copy your own code from Publish in your estimator: it already contains your estimator's ID.

Classic editor or a page builder

  • Classic editor: switch to the Text tab (not Visual) before pasting, then update the page.
  • Page builders (for example Elementor or Divi): use their HTML or code element and paste the code into it.

If the estimator doesn't appear

  • Hosted WordPress plans: some WordPress.com plans and some managed hosts remove code from pages. If the code disappears after saving, or the page shows nothing, use the hosted link instead: add a Button block and set its link to your estimator's direct link.
  • Security or caching plugins can block scripts from other websites. Allow the estimator's web address, or ask whoever manages your site.
  • See troubleshooting for more checks.

Related help

Last reviewed October 2026 against the current version of Estimator Studio.

Stuck? Email mail@estimatorstudio.com with your website address and what you see.