See it in action

projectorwindows.netlify.app/embed/calculator.html

Copy and paste

Responsive Iframe Recommended

Scales to fit the width of its container. Best for blog posts and content pages.

<iframe
  src="https://projectorwindows.netlify.app/embed/calculator.html"
  style="width:100%;min-width:350px;height:700px;border:none;border-radius:12px;"
  title="Projector Setup Cost Calculator"
  loading="lazy"
></iframe>

Fixed-Size Iframe

Fixed width and height. Good for sidebars or widgets with a set size.

<iframe
  src="https://projectorwindows.netlify.app/embed/calculator.html"
  width="400"
  height="700"
  style="border:none;border-radius:12px;"
  title="Projector Setup Cost Calculator"
  loading="lazy"
></iframe>

Light Theme (for light websites)

Use this version if your site has a light/white background. Append ?theme=light to the URL.

<iframe
  src="https://projectorwindows.netlify.app/embed/calculator.html?theme=light"
  style="width:100%;min-width:350px;height:700px;border:none;border-radius:12px;"
  title="Projector Setup Cost Calculator"
  loading="lazy"
></iframe>

Link-Only Version

A styled button that links directly to the calculator. Use if you can't embed iframes.

Getting the best results

Minimum width

The calculator works best at 350px wide or more. Narrower than that and the option cards start to feel cramped.

Recommended height

Set the iframe height to at least 650-700px. The results page with cost breakdown needs the vertical space.

Theme matching

Dark site? Use the default. Light site? Add ?theme=light to the URL for a matching light background.