Configurator embed
Drop a live parametric 3D configurator — viewport + branded parameter controls — into any web page with a single iframe. This is the integration point for e-commerce: the shopper adjusts dimensions / options, the 3D updates, and your store gets the configuration for pricing + checkout.
Route
/embed/:id:id is the model's immutable UUID. No catalog, no navigation — embed-ready.
Get the snippet
Open your model in the workspace → menu (⋮) → Embed settings… → Copy snippet.
<iframe
src="https://parashape.com/embed/{id}?theme=light&primary=e11d48&cart=1"
width="100%" height="600"
style="border:0;border-radius:8px"
allow="fullscreen"
></iframe>Branding (query string)
Brand the embed entirely from the iframe URL — no build step.
| Param | Effect |
|---|---|
theme=light|dark | Base color scheme. |
primary=RRGGBB | Brand accent — sliders, checkboxes, Add-to-cart. |
font=Poppins | Panel font-family. |
currency=USD | Passed through in SDK events for your pricing. |
cart=1 | Show the Add-to-cart button. |
Controls
Each visible parameter renders a type-appropriate control automatically: a range slider (numeric with min/max), a dropdown (select options), a color swatch, or a checkbox. Internal parameters (fonts, images, sub-models) are hidden.
E-commerce SDK (postMessage)
The iframe talks to your page so the store reacts to the live configuration.
| Event | Direction | Payload |
|---|---|---|
parashape:ready | → host | { modelId, name, params, currency } |
parashape:change | → host | { modelId, params } |
parashape:addToCart | → host | { modelId, name, params, currency } |
parashape:setParams | ← host | { params } |
// Host page: react to the live config + handle checkout
window.addEventListener("message", (e) => {
const m = e.data
if (m?.source !== "parashape") return
if (m.type === "change") updatePrice(m.params)
if (m.type === "addToCart") addToCart(m.modelId, m.params)
})
// Drive the configurator from the host (e.g. restore a saved config)
iframe.contentWindow.postMessage(
{ source: "parashape", type: "setParams", params: { width: 1400 } }, "*")Origin whitelist
By default any page can embed. From the same Embed settings… dialog, toggle Restrict to specific domains and list the domains allowed to load the configurator (one per line); direct (non-iframe) access is always allowed for owner preview.