Platform guide
Embed your estimator on WordPress
The same embed code works on every WordPress theme and builder. The only thing that changes is which block you paste it into.
Copy the Standard Embed code from the Share panel, then paste it into whatever your builder calls an HTML or code block. Not a text block. That single distinction is behind almost every "the code is showing as text on my page" report we get.
Before you start
- Your embed code, from the Share button on your estimator card.
- A page to put it on. If you have not decided where, read where to put your estimator first, because placement matters more than the embed.
- Know which builder you use. If you are unsure, edit a page and see which interface appears.
Find the right block for your builder
| Builder | What to add | Watch out for |
|---|---|---|
| Gutenberg (the default WordPress editor) | A Custom HTML block | Not the Paragraph or Code block. Code displays code, it does not run it. |
| Divi | A Code module | Set the row and section width to 100%, and check the mobile settings separately. |
| Elementor | An HTML widget | The section may have default padding that squeezes it on mobile. |
| WPBakery | A Raw HTML element | Raw HTML, not Text Block. |
| Thrive Architect | A Custom HTML element | Check the content box width, which is often constrained. |
| Anything else | Whatever accepts raw HTML | If nothing does, use the direct link instead. It works everywhere. |
Steps
Copy the standard embed code
From the Share panel on your estimator card. Copy the whole block including the opening and closing tags.
Edit the page and add the right block
From the table above. Place it where you want the estimator to appear.
Paste the code in and update the page
Set the container to full width
Do this even if it looks fine on desktop. A fixed pixel width is the single most common cause of a cropped estimator on phones.
Clear your cache, then test on a real phone
WordPress caching plugins will happily serve the old page for hours. Clear the cache, then check in a private window.
What good looks like: the estimator fills the width of your content area and you can complete it on a phone without scrolling sideways.
If the embed will not behave, there is an Alternative Embed in the same Share panel. It exists for platforms that handle iframes badly. Paste it into a rich text HTML box rather than a code block.
Troubleshooting
| What you see | What it means |
|---|---|
| The code shows as text on the live page | It went into a text or paragraph block. Move it to an HTML block. |
| Blank space where it should be | A security plugin or the editor stripped the iframe. Try the alternative embed. |
| Cut off on mobile | Container width. See mobile sizing. |
| Works logged in, broken logged out | Caching. Clear it and test in a private window. |
| Changes to the estimator not appearing | Your site cache, not the estimator. Clear and hard refresh. |
Do I need a plugin?
No. Any block that accepts HTML works.
Can I put it on several pages?
Yes, the same code as many times as you like. Service pages are the highest value place to repeat it.
Will it slow my site down?
It loads in its own frame, so it does not block the rest of the page.
Can somebody else do this for me?
Yes. Request a free Agency Pack and we will write the instructions for whoever looks after your site.
Email [email protected] with the page URL and we will look at it.