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

Embed gallery

See it on the page before you embed it

Every calculator can wear any of 12 themes and 20 colour palettes, in light, dark or auto mode. The theme sets the structure and effects; the palette sets the colors. Below are the themes and a few live pairings.

Start freeFeatures

An embedded calculator's look comes from three choices: a theme for layout and effects, a colour palette, and light, dark or auto mode. There are 12 themes — three on every plan, more on Agency and Enterprise — plus custom fonts and custom CSS, so the calculator can match an agency's site rather than look bolted on.

Theme gallery

  1. Ledger

    The default: ruled lines and orderly rows, like a well-kept form, with figures given room to stand out. A safe, professional choice for most agency sites.

    All plans

  2. Minimal

    Stripped back to fields, results and plenty of white space. Suits sites with a quiet, text-led design.

    All plans

  3. Compact

    A tighter layout that fits more into less height. Useful in sidebars, narrow columns and popups.

    All plans

  4. Glass

    Translucent, frosted panels layered over the background. Works best over a photo or colourful section.

    Agency

  5. Neumorphic

    Soft, extruded surfaces with gentle shadows, so controls look pressed into the page. A tactile, modern look.

    Agency

  6. Aurora

    Soft, flowing gradients of colour behind the calculator. Adds warmth to campaign and landing pages.

    Agency

  7. Editorial

    Typography-led, in the manner of a magazine page, with confident headings and generous spacing. Pairs well with long-form coverage guides.

    Agency

  8. Image hero

    Opens with a large image above the calculator, so the tool feels like the start of a story rather than a form.

    Agency

  9. Split spotlight

    Divides the space into two areas, putting the inputs on one side and spotlighting the result on the other.

    Agency

  10. Depth 3D

    Layers and perspective that give the calculator a sense of physical depth. Built to make an impression on a hero section.

    Enterprise

  11. Particles

    A field of drifting particles behind the calculator for a lively, high-tech feel. Best kept for landing pages.

    Enterprise

  12. Dashboard

    Presents results like an analytics panel, with figures arranged as at-a-glance tiles. Suits number-heavy calculators such as annuity and HSA comparisons.

    Enterprise

Live examples

Life insurance needsTheme: ledger · Light
Life insurance calculator in the default ledger theme, light mode — the look most agencies start with on a life product page.
HSA vs traditional planTheme: dashboard · Dark
HSA vs. traditional plan comparison in the dashboard theme, dark mode — two plans' yearly costs read as side-by-side figures.
Long-term care costTheme: editorial · Light
Long-term care calculator in the editorial theme, light mode — a calm, readable setting for a planning-focused audience.
Immediate annuity incomeTheme: split-spotlight · Dark
Immediate annuity calculator in the split-spotlight theme, dark mode — the lump sum on one side, the estimated monthly income on the other.

How do I choose a theme for my agency site?

Choose the theme that resembles the rest of your site. A clean, text-led site suits ledger, minimal or editorial; a visual, image-heavy site suits image-hero or split-spotlight; a modern product-style site can carry glass, aurora or depth-3d. When unsure, start with ledger and change it later — your embed code stays the same.

Then pick a palette that uses your brand color for buttons and check that text on it is easy to read. The calculator's mode can follow the visitor's device setting with auto, so it looks right whether they browse in light or dark.

Do the effect-heavy themes suit every page?

No. Themes with motion and depth draw attention, which helps on a campaign landing page but can distract on a long, explanatory product page. For older audiences — Medicare-age or retirement-income visitors — a calmer theme with large, clear figures is usually the better choice. Match the theme to the visitor, not only to the brand.

Whatever you choose, check the calculator on a phone and with your operating system's reduced-motion setting switched on, and read our notes on embed accessibility before you publish.

Which themes come with which plan?

Ledger, minimal and compact are available on every plan. Glass, neumorphic, aurora, editorial, image-hero and split-spotlight are on Agency and above. Depth-3d, particles and dashboard are on Enterprise. The insurance calculators themselves are on every plan, so pick the plan by the themes and limits you need.

Compare everything each plan includes on the pricing page.

FAQ

Questions agencies ask

Answers first, details after.

Can I change the theme after the calculator is embedded?

Yes. Change it in your account and the embedded calculator updates on its next load. The embed code on your site stays the same, so you can try a few themes on the live page without editing it.

What's the difference between a theme and a palette?

The theme decides structure and effects — layout, surfaces, depth and motion. The palette decides colors. You choose them independently, so 12 themes and 20 palettes give you a wide range of combinations before custom CSS.

Can I use my agency's exact brand colors?

Start with the palette closest to your brand, then fine-tune with custom CSS if needed. Check that button text and figures stay readable against your colors in both light and dark mode.

How does auto mode work?

Auto follows the visitor's device setting: light for a light system theme, dark for dark. Use it when your own site supports both, or pick light or dark explicitly to match a site that only has one.

Can I use my own fonts?

Yes, custom fonts are supported, so the calculator can use the same typefaces as your site. Keep body text at a comfortable size, especially for audiences reading figures on a phone.

Do themes change what the calculator asks or calculates?

No. Every theme shows the same fields, results, definitions and disclaimer. Only the presentation changes, so your leads carry the same inputs whichever theme the visitor saw.

Which theme works best in a popup or floating bubble?

Compact and minimal fit tight spaces well because they keep the layout short. Image-heavy or effect-heavy themes need more room to look their best and usually belong inline on a full page.

Are the examples on this page real calculators?

Yes. They are released insurance calculators shown in the stated theme and mode. They don't collect leads here, because this site is not an agency; on your site, the same calculator would include your lead form.

InsuranceQuoteWidget

Try your brand on a live calculator

Start free, pick a calculator and switch themes until it looks like it belongs on your site. The insurance calculators are included on every plan.

Start freeCompare plans

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

Start freePricing