Embed a calculator on your website

Publish a calculator in OpenQuoteStack, authorize the parent website's exact origin, then mount the customer renderer in an iframe. The assisted script handles loading and resizing; there is no API key in the page.

Keep the two origins straight #

For this example, OpenQuoteStack lives at https://quotes.example.com and the business website lives at https://www.example.com.

The quote installation serves the calculator. The business website frames it. In Settings → Integrations, allow https://www.example.com. An origin includes scheme, hostname and a non-default port, but no path.

https://example.com and https://www.example.com are different origins. If both websites should embed the calculator, register both. Wildcards and path-specific allowlist entries are not accepted.

Use the assisted embed #

Replace the organization slug and estimator ID with values from your published calculator:

<script src="https://quotes.example.com/embed.js" defer></script>
<div
  data-oqs-organization="acme-moving"
  data-oqs-estimator="YOUR_ESTIMATOR_ID"
  data-oqs-title="Moving cost calculator"
></div>

The script mounts one iframe per target element, shows loading/error text and adjusts the height. Multiple calculators can coexist. Customer submissions remain in the OpenQuoteStack installation and require no account or third-party cookie.

The organization slug is not its internal database ID. If you rename the public identifier under Settings, update embedded links too.

Localize the surrounding messages #

The calculator's language comes from its published definition. The host script's status/link text can be customized independently:

<div
  data-oqs-organization="acme-moving"
  data-oqs-estimator="YOUR_ESTIMATOR_ID"
  data-oqs-title="Estimativa de mudança"
  data-oqs-loading="Carregando estimativa…"
  data-oqs-error="Não foi possível carregar a estimativa."
  data-oqs-open="Abrir calculadora"
></div>

Include the script once on the page. These attributes do not translate custom questions or convert currencies; use branding and localization for that work.

Choose a plain iframe when fixed height is enough #

<iframe
  src="https://quotes.example.com/embed/acme-moving/YOUR_ESTIMATOR_ID"
  title="Moving cost calculator"
  style="width:100%;height:850px;border:0"
></iframe>

The same origin allowlist applies. A plain iframe does not opt into resize messaging, so its height is controlled by the parent page. Use an informative title for assistive technology and test the result/contact screens before selecting a fixed height.

Understand the security boundary #

CSP frame-ancestors controls whether the parent can frame the calculator. It is independent of resize messaging. Administration and preview routes cannot be framed.

The assisted resize protocol checks the sender origin, source window and opaque per-frame channel. The message contains height only, not answers, contacts or prices. Do not add a parent-page listener that accepts messages from every origin or ignores the source window.

The embedding reference documents this public interface if you are building your own host integration.

Test from the real parent page #

Open the actual HTTPS business website, not just the quote URL directly. Complete every step, trigger validation, show the result and open contact capture. Confirm the iframe grows without clipping the last button and does not create horizontal scrolling on mobile.

If the iframe is blank or blocked, inspect the browser's framing error and compare the parent origin with the registered allowlist. If it stays at a fixed height, verify the assisted script loaded and that its origin points to the quote installation. A page builder may remove script tags; use a permitted custom-code block or the plain iframe option.