Embed guide
How to embed a calculator on any website
Here is how to embed a calculator on the website platform you already use. Every method starts the same way: copy the snippet from your account, then paste it into a block or element that accepts custom HTML. The steps below cover plain HTML pages, WordPress, Wix, Squarespace, Webflow, Shopify and HighLevel, followed by fixes for the problems people run into most.
How do I embed a calculator on my website?
Copy the embed snippet for an inline calculator, popup or floating button from your account. Then paste it into a custom HTML block or embed element on your page, save and publish. On a plain HTML site, paste it where the calculator should appear. Popups and floating buttons can go before the closing body tag.
How do you embed on a plain HTML page?
Copy the snippet
In your account, choose the calculator and embed type, then copy the snippet.
Paste it in place
For an inline calculator, paste the snippet where it should appear in the page body. For a popup or floating button, paste it just before the closing body tag.
Upload and test
Upload the page, open it in a browser and try the calculator on a phone-sized window as well.
How do you embed in WordPress?
Add a Custom HTML block
In the block editor, add a Custom HTML block where the calculator should appear.
Paste the snippet
Paste the snippet into the block. Use the Preview tab to check it.
Update and clear caches
Update the page. If you use a caching or optimization plugin, clear its cache so the new page is served.
How do you embed in Wix, Squarespace or Webflow?
Wix
Add an Embed code element (Embed HTML), choose the code option, and paste the snippet. Resize the element so the calculator has room, or use a Custom element where your plan supports it. Publish to test.
Squarespace
Edit the page, add a Code block, and paste the snippet with the display set to HTML. Save and view the live page, since some embeds only run outside the editor preview.
Webflow
Drag an Embed element onto the page, paste the snippet into the code editor, and save. Publish the site, because custom code runs on the published site rather than inside the Designer.
How do you embed in Shopify?
Choose the location
In the theme editor, open the page or template where the calculator belongs.
Add a Custom Liquid section
Add a Custom Liquid section or block and paste the snippet. On a standard page, you can instead switch the page content editor to HTML view and paste it there.
Save and preview
Save, then preview the live storefront on desktop and mobile.
How do you embed in HighLevel funnels and websites?
Open the page builder
Open the funnel step or website page in the HighLevel builder.
Add a Custom Code element
Add a Custom JS/HTML (custom code) element where the calculator should appear and paste the snippet.
Save and preview
Save the page and open the live preview, since custom code may not run inside the builder itself.
What if the calculator does not show or looks cut off?
Most problems come down to one of these. Check them in order.
- Content Security Policy: allow our calculator app's domain for frames and scripts
- Frame height: use the snippet as copied, which resizes the frame automatically
- Fixed-height containers: remove a set height on the block around the calculator
- Caching or optimization plugins: clear the cache and exclude the snippet from script delays
- Editor previews: test on the published page, not only inside the builder
- Script blockers: try a private window to rule out a browser extension
- Domain settings: if your account limits which sites can show calculators, confirm yours is listed
Embedding questions
Why is my embedded calculator blank?
The most common cause is a Content Security Policy on your site that blocks frames or scripts from other domains. Ask your developer or host to allow our calculator app's domain. Other causes include a caching plugin that delays scripts, or an account setting that limits which domains can show your calculators.
Why is the calculator cut off or showing a scroll bar?
The snippet is designed to resize the frame to fit the calculator. If it is cut off, a container around it probably has a fixed height, or the snippet was edited so the resizing script is missing. Remove the fixed height and paste the snippet again exactly as copied.
Can I put more than one calculator on the same page?
Yes. Paste a separate snippet for each calculator where you want it to appear. For popups or floating buttons, use one launcher per page to avoid stacking several buttons on top of each other. Give each inline calculator enough width to display its inputs and results side by side.
Will the embedded calculator slow down my site?
The calculator loads in its own frame, so it does not block the rest of your page from appearing. If you use an optimization plugin that delays or combines scripts, exclude the snippet so it is not broken by the optimization.
Do I need to update the snippet when you change a calculator?
No. The snippet points to the live calculator, so fixes and improvements appear on your site automatically. You only need a new snippet if you change the calculator, embed type or settings that are written into the snippet itself. Keep a copy of your snippets so you can paste them again if you rebuild a page.
Why does the calculator work in preview but not on my live site?
Check whether your account limits calculators to specific domains, and whether a caching layer is serving an older copy of the page. Clear the cache, publish again and test in a private browser window. If it still fails, check the browser console for a blocked-content message and send it to us.
Can I embed a calculator in an email?
No. Email programs do not run embedded frames or scripts. Instead, link from the email to a page on your website where the calculator is embedded. A button or link that says what the calculator does, such as "estimate your payment," tends to work well. The visitor then lands on the full calculator, and any lead they submit is captured as usual.
Does the embed work on mobile?
Yes. The calculator adapts to the width of the space it is placed in. Test on a phone after publishing, and make sure the block around it is not set to a fixed width that is wider than a phone screen.
Paste once, publish anywhere
Copy your snippet and follow the steps for your platform. If something looks wrong, check the troubleshooting list first.