Embedding Calcumate3D: snippet and sizing

Note

This page is for Calcumate3D. For Calcumate (original), see Container Requirements (Width/Height) and Embedding with iframes.

Just want it to work?

Copy the embed code from the Builder’s Confirm step and paste it where the calculator should appear. Leave data-calcumate-height="720" as it is. That is all most websites need. The rest of this page is for fine-tuning the size and for unusual hosts.

The snippet

Paste this where the calculator should appear. Copy your own from the Builder’s Confirm and publish step: it already contains your token and domain. There is no stylesheet tag: the script injects its own calcumate.css (resolved from its own URL) before the calculator mounts.

<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>

Attribute	Required	Meaning
data-calcumate	yes	Marks the container. The script mounts into every element carrying it.
data-calcumate-ref	yes	The signed token from the Builder’s Publish step. Opaque: never edit it.
data-calcumate-domain	recommended	The domain registered in the Builder. Defaults to the page’s hostname; always set it inside sandboxed iframes (Wix, GoDaddy) where the hostname is the sandbox’s.
data-calcumate-domain2	no	Second domain (the www. twin is derived automatically when omitted).
data-calcumate-height	recommended	Explicit height. Bare number = px ("720"), or number + unit (px, vh, dvh, svh, rem, em, %). Skips height detection.

The same snippet works on any page of the registered domain(s) and can be pasted on several pages.

One calculator per page

Each instance opens its own WebGL context, and the script warns in the console when it finds more than two containers.

Containers added after the script ran (modals, tabs, SPA routes) are picked up by a one-second retry; after that, dispatch window.dispatchEvent(new Event('RootLoaded')) to mount them. See Calcumate3D events.

How the calculator sizes itself

• The calculator fills its container: width: 100%; height: 100% of the [data-calcumate] element.
• Nothing scrolls inside the calculator. Every screen is laid out to the container’s box and the overflow is clipped. The box therefore has to be fully visible on screen: a container taller than the visitor’s viewport hides the bottom of the results screen (the “Reserve now” footer on mobile sits at the bottom of the box).
• Height is resolved in this order:
  1. data-calcumate-height (applied inline, authoritative).
  2. A height from the host’s CSS, on [data-calcumate] itself or a fixed-height ancestor.
  3. The built-in fallback: when the container measures under 150px the calculator applies min(720px, 100svh) and logs a console warning. The fallback re-checks at 0.5s / 2s, on window load and whenever the parent resizes, so late host CSS takes over automatically.
• Width always comes from the host. Give the container a definite width (100% of a column, a full-bleed wrapper, or a fixed value).
• The calculator watches its own box, not the browser window: every breakpoint below is measured on the container. Two embeds of different widths on the same page behave independently.
• On touch devices the calculator asks for fullscreen on the visitor’s first tap so the mobile layout gets the whole screen (browsers only allow this on a gesture; iPhone Safari has no element fullscreen and simply stays inline). The size you give the container is what visitors see until that tap and if they leave fullscreen.
• The CTA with Open CTA = popup opens a 520 × 720 window; the other modes navigate the top page (same tab) or a new tab.

Layout tiers (what changes at which size)

All widths and heights are the container’s inner size in CSS px.

Container width	Layout
< 1025px	Narrow: single column. The entry screen and the item picker take the full box; the 3D unit is hidden there and only shown on results, inside a band above the results dock.
≥ 1025px	Wide: entry panel and item picker float at the left, the 3D unit takes the right two thirds. Results below 1250px still use the narrow results overlay.
≥ 1250px	Two-panel results: item editor left, recommendations right, unit centred between them. 1250–1440 is a compact band (panels taper); from ~1440 up the full design.
≥ 1920px	Ultra-wide: panels scale up proportionally so 4K/ultra-wide embeds do not look empty.

Container height	Layout
≤ 760px	Compact tier: section gaps, paddings, headings and row heights shrink.
≤ 540px (narrow results)	Short tier: the selected recommendation drops its description and bundle lines. With width ≥ 640px (landscape phone) the results dock becomes a two-column grid so the unit still has a band.
≤ 480px	Compact-further tier: the smallest paddings the design supports. Below this content starts to clip.

Category and preset tiles reflow at 520px and 340px of grid width (5 → 3 → 2 columns).

Recommendations: minimum, maximum and aspect ratio

These numbers follow from the tiers above and from the sizes the calculator is tested at (1920×1080, 1600×900, 1440×900, 1366×768, 1280×800, 1024×768, 768×1024, 390×844).

Desktop and tablet-landscape embeds

	Width	Height	Width ÷ height
Absolute minimum	320px	480px	0.45
Minimum we recommend	1025px (wide layout)	600px	1.3
Recommended	1200–1600px, or 100% of the content column	720px (the default) to 900px	1.4 – 1.8 (16:10 to 16:9)
Maximum that still adds value	~1920px (beyond that only the 3D area grows)	the visible viewport height (100svh); never taller than the screen	2.4 — wider than that with less than 480px of height is unsupported

• 1250px of width is the threshold for the two-panel results screen. Content columns narrower than that still work (they get the overlay results), but if the page template allows a full-bleed section, use it.
• A fixed 720px height is the best default for desktop. Prefer data-calcumate-height="720" over percentages: a percentage only resolves if an ancestor has a height.
• If the design must be viewport-tall, use data-calcumate-height="100svh" (or 90svh under a sticky header), not 100vh: svh ignores the mobile browser chrome and keeps the footer visible.

Mobile embeds (portrait phones)

	Width	Height	Width ÷ height
Absolute minimum	320px	480px	—
Recommended	100% of the viewport (full-bleed; edge-to-edge is best)	min(720px, 100svh) — the built-in fallback — or the viewport height minus the site header	0.45 – 0.75 (9:16 to 3:4)
Maximum	the viewport width	the visible viewport (100svh)	—

• On phones the calculator asks for fullscreen on the first tap, so the inline size mainly matters for the entry screen and for visitors who dismiss fullscreen.
• Landscape phones (≈ 844 × 390) are supported through the short-tier layouts, but treat 480px of height as the floor everywhere.

Rules of thumb

1. Never let the box exceed the visible viewport height; the calculator cannot scroll.
2. Keep the height ≥ 600px on desktop and ≥ 480px anywhere.
3. Give wide pages ≥ 1250px so visitors see the two-panel results screen.
4. Keep the ratio between 1.3 and 2.0 on desktop; portrait on phones.
5. Avoid containers that resize while the visitor is interacting (accordion or animated sections): the 3D canvas re-fits on every resize.

Platform notes

The points that affect sizing on common website builders:

• WordPress and page builders. Themes constrain content to a column (often 700–900px, which gives the single-panel results). Prefer the builder’s “full width” section; otherwise the full-bleed wrapper (width:100vw; left:50%; margin-left:-50vw). Height still comes from data-calcumate-height, not the wrapper.
• Framer. Give the Embed element a fixed or fill height in the inspector so the space is reserved before the calculator loads; keep data-calcumate-height.
• Wix. The HTML element is a fixed-size sandboxed iframe: omit data-calcumate-height (the calculator fills the iframe) and size the element with the handles; set data-calcumate-domain.
• Squarespace. If the Code block strips <script>, move it to Code Injection → Footer.

iframe embeds (hosts that cannot run scripts)

Host a page containing the snippet and iframe it:

<iframe src="https://YOUR-HOSTED-PAGE/calculator.html"
        style="width:100%;height:720px;border:0;"
        title="Storage calculator"
        allow="fullscreen"></iframe>

• The iframe needs an explicit height (percentages collapse like containers do). The same size table applies to the iframe: 720px tall on desktop, min(720px, 100svh) on phones.
• allow="fullscreen" is needed for the mobile fullscreen request to succeed.
• Do not add sandbox without allow-popups (the “Powered by Calcumate” badge and the CTA in new-tab/popup mode are target="_blank"), and do not set referrerpolicy="no-referrer": the calculator uses the referrer to learn the parent origin it posts its CALCUMATE_* messages to.
• The Calcumate (original) guidance of 980 × 800 (desktop) / 350 × 850 (mobile) still works, but width:100% + 720px (desktop) and min(720px, 100svh) (mobile) fit the 3D layouts better.

React Native (WebView)

Load a hosted page with the snippet in react-native-webview with style={{ flex: 1 }} (the WebView is the container, so the calculator fills the screen). Forward events to the app with an injected script, exactly as in the Calcumate (original) React Native guide; the event names are unchanged (CalcumateInitialized, CalculationFinished, Booking, userDetails) and the new calcumate:* events can be forwarded the same way. See Calcumate3D events.

Troubleshooting

• Invisible calculator / 0px tall. Should not happen (see the fallback above). If the console shows [Calcumate] Host container has no definite height … applied fallback min(720px, 100svh), the page is relying on the fallback: set data-calcumate-height.
• Rejected height. "tall", "720 px" → warning + auto-detection. Accepted: a number, or number + unit.
• Domain mismatch. The calculator shows a blocking modal: the page’s domain is not one of the two registered in the Builder’s Options step. Register it (or set data-calcumate-domain to the registered one when the page is served from a sandbox), republish, replace the snippet, hard refresh.
• Checking an embed:

  document.querySelector('[data-calcumate]').getBoundingClientRect() // height > 0
  document.querySelector('.cm-root canvas').getBoundingClientRect()  // canvas matches

• Host CSS. The calculator’s styles are isolated: nothing of its CSS leaks onto the page, and page rules for bare elements (button, h2, img, …) do not restyle it. The only intended override is the container’s height. Branding goes through the Builder’s Design step.