Switching your website from Calcumate (original) to Calcumate3D

Calcumate3D is a new embed: a new script, a new container, a signed token instead of three ids, and no stylesheet tag. Settings, design and the calculator itself are published from the dashboard; the snippet on your site is what changes.

Note

This page covers the code on your website. To move your plan or copy your calculators into Calcumate3D, see Upgrade from Calcumate (original) and Copy Calcumate (original) calculators into 3D. The FAQ Migrating to Our New High-Performance Calculator is about a Calcumate (original) endpoint update, not about Calcumate3D.

Replace the snippet

Before, with Calcumate (original):

<div id="calcumate-root"
     data-integration="www.example.com"
     data-integration-2=""
     data-ref="AQICAHh…"
     data-int="112a234c-…"></div>
<script defer src="https://production.calcumate.co/static/js/main.js"></script>

After, with Calcumate3D (copied from the Builder’s Confirm and publish step):

<div data-calcumate
     data-calcumate-ref="{{REF}}"
     data-calcumate-domain="{{DOMAIN}}"
     data-calcumate-height="720"></div>
<script async src="https://cdn.calcumate.co/calculators/calcumate3d/calcumate.js"></script>

Calcumate (original)	Calcumate3D
id="calcumate-root"	data-calcumate attribute (any element; no id needed)
data-ref + data-int	one signed data-calcumate-ref token (carries both)
data-integration / data-integration-2	data-calcumate-domain / data-calcumate-domain2 (optional; set the first inside sandboxed iframes)
<link rel="stylesheet"> (if you had one)	remove — the script injects its own CSS
production.calcumate.co/static/js/main.js (defer)	the CDN calcumate.js (async)
sizing via #calcumate-root { … } CSS	data-calcumate-height (+ a definite width from the layout)

Steps:

1. Open the calculator in the dashboard and click Edit.
2. Click Publish and copy the snippet.
3. Replace the Calcumate (original) block on every page where it appears.
4. Clear the page cache and hard refresh.

There is no downtime: the Calcumate (original) snippet keeps working until you replace it.

Sizing advice that changed

Calcumate (original) guidance	Calcumate3D
style="width: calc(100vw - 40px); max-width: calc(100vw - 40px)" on the root div (Framer, container page)	A definite width from the page layout (100% of a column or a full-bleed section). The calculator sizes to its container, not the viewport.
Wix: height: 1250px mobile / min-height: 700px desktop on #calcumate-root	Omit the height attribute inside the Wix iframe and size the HTML element: ~720px desktop, full-height mobile. 1250px is too tall for Calcumate3D — it does not scroll; its box must fit the screen.
iframe 980 × 800 desktop / 350 × 850 mobile	still works; prefer width:100% + height:720px, and min(720px, 100svh) on phones. Add allow="fullscreen".
body { padding: 10px } on the hosted iframe page	fine, but give the page a height: 100% chain or a fixed container height; the calculator needs a definite height.

Full recommendations (minimums, maximums, aspect ratios): Embedding Calcumate3D.

Events and hooks: nothing to change

Every Calcumate (original) hook keeps working with the new snippet: the four events (CalcumateInitialized, CalculationFinished, Booking, userDetails) with their payload shapes, RE-INIT, the calcumateLoad unit filter with window.listUnits / window.disableUnits, the data-disable-list-results attribute, the CTA URL params and the per-unit reserve URL.

The one behaviour that is deliberately different: the chosen CalcumateGEO facility is remembered per calculator in localStorage, not in sessionStorage['FACILITY-ID'], so the Calcumate (original) SPA cleanup snippet is no longer needed (and does nothing). Details: Calcumate (original) hooks in Calcumate3D.

New, richer events are available alongside: calcumate:ready, calcumate:state-changed, calcumate:calculated, calcumate:cta-click, calcumate:lead-captured, and their CALCUMATE_* postMessage twins for iframe hosts. See Calcumate3D events.

CSP

The domains differ from the Calcumate (original) list (no optimize.calcumate.co, no S3 buckets; the Draco decoder comes from www.gstatic.com; the Inter font is inlined as a data: URI). See Content Security Policy (CSP) for Calcumate3D.

Browser support

Modern evergreen browsers with WebGL 2. The calculator honours prefers-reduced-motion (no camera intro, instant transitions). If the GPU context is lost (mobile memory pressure) the calculator shows a notice instead of a blank canvas.