Built for the US market · prices in USD30 live calculators
English
Sign in
InsuranceQuoteWidget
Start free

By line of business

Life

Health

Medicare

Disability & LTC

Annuities

P&C

Auto

Business

Specialty

Help · Plain HTML

Add your calculator to any HTML page

For hand-coded sites, static site generators and anything not covered by a builder guide. The inline embed is one div and one script; the rest of this page is about where they go and what a strict site configuration can block.

Start freeAll platforms

To embed a calculator on a plain HTML page, copy the inline code from your account's Embed tab. Put the div where the calculator should appear in the page body and the script just before the closing body tag, or immediately after the div. Deploy the page, load it in a browser and submit a test lead.

How it works, step by step

How it works, step by step

  1. Copy the inline code

    In your account, open the calculator or widget's Embed tab, choose Inline and copy both lines: the div and the script.

  2. Place the div

    Paste the div into your HTML at the exact spot the calculator should render — inside your main content column, not inside a paragraph or link.

  3. Place the script

    Paste the script just before </body>. Keeping it directly after the div also works if your templates make that easier.

  4. Check your Content Security Policy

    If your site sends a CSP header, allow the script's origin and the origins it connects to and frames, as shown in the embed code.

  5. Deploy and load the page

    Publish the page and open it in a private window. Use your browser's developer console to spot any blocked requests.

  6. Submit a test lead

    Complete the calculator and confirm the lead appears in your contacts, your email alert and your webhook destination.

Where your embed code goes

<!-- Paste the embed code from your account's Embed tab here -->

Common pitfalls

  • Copying only the div or only the script — the inline embed needs both.
  • A Content Security Policy that blocks outside scripts or frames — the console shows the blocked origin; add it to the right directive.
  • Opening the file from your computer (file://) instead of a web server — test on a real http(s) URL.
  • Placing the div inside an element with a fixed height or overflow hidden — results and popups get clipped.
  • Loading the script twice through a shared template and a page — keep one copy per page.
  • Templating engines escaping the code — mark the block as raw or unescaped HTML so the tags survive.

Will the calculator clash with my site's CSS and JavaScript?

No. The inline embed renders inside an isolated container (a shadow DOM), so your stylesheets can't restyle the calculator and its styles can't leak into your page. It also doesn't need any library from your site. Style it with its own theme, palette, fonts and light or dark mode settings instead of your CSS.

If you need to adjust details beyond the built-in options, use the custom CSS field in your account; it applies inside the calculator's container. See branding and themes.

When should I use the iframe or a link instead of inline?

Use the auto-resizing iframe when a page or platform can't run outside scripts in its main document but does allow frames. Use the classic iframe for fixed layouts. Use the direct link in emails, texts and ad destinations. Use the popup, floating bubble or own-trigger modes when the calculator should open on demand.

Each mode's code is on the same Embed tab. Switching modes later doesn't change your lead settings or webhook.

How do I add it to a static site generator or framework?

Put the div in the template or component for the page, and the script in your base layout before the closing body tag, loaded only on pages that use it. If your framework re-renders pages on navigation, make sure the div exists when the script runs; a full page load for that route is the simplest fix.

Mark the embed as raw HTML in templating engines that escape output, otherwise the tags arrive as text.

All platforms

WordPressWixSquarespaceWebflowShopifyHighLevel

FAQ

Questions agencies ask

Answers first, details after.

Does the script have to go before the closing body tag?

That's the recommended spot, because the page content loads first. Placing it right after the div also works. What matters is that the div exists in the page when the script runs.

What does my Content Security Policy need to allow?

The script origin in script-src, and the origins the calculator connects to and frames in connect-src and frame-src. The exact hosts are in your embed code; your browser console names any origin the policy blocks.

Can I put two calculators on one HTML page?

Yes. Paste each calculator's code where it should appear and check that both load on the live page. Or, more tidily, embed a multi-calculator widget, which shows several calculators as tabs, buttons or cards from one embed.

Can I style the calculator from my own stylesheet?

Not from your page's CSS, because the calculator is isolated. Use the theme, palette, font and custom CSS options in your account, which apply inside the calculator.

What data does the calculator collect on my page?

When a visitor submits, it collects their name, email and/or phone, any message, their consent, the calculator's inputs and results, the page URL and attribution such as UTM tags, click IDs and referrer. Cover this in your own privacy notice, since it happens on your page.

How do I send the calculator by email or text?

Use the direct link from the Embed tab. It opens the calculator as its own page, so it works anywhere a link does. Add UTM tags to the link so you can tell which message produced the lead.

Will the calculator work if my visitors block third-party scripts?

Some privacy tools block outside scripts and frames, in which case nothing renders. Add a short fallback link to the calculator's direct link near the embed, so those visitors still have a way in.

InsuranceQuoteWidget

Two lines of code, one test lead

Paste the div and the script, deploy, and submit a test. If your security policy is strict, contact us and we'll list the origins to allow.

Start freeCompare plans

Free Producer plan · 14-day trial on paid plans · cancel any time

Start freePricing