Options

Customize the configurator

Everything here is set on the <configkit-viewer> line you pasted: a style for its size and colors, and attributes for what it shows. Your products' options, prices and rules live in your console, not in this code.

Size, colors and fonts

Add a style to the element with any of these:

<configkit-viewer license="ck_live_…" product="assets/arden-table.json"
  style="--ck-height: 680px; --ck-accent-color: #8a6224;
         --ck-font: inherit; --ck-radius: 0"></configkit-viewer>

Setting	What it changes	Default
`--ck-height`	Height of the configurator on wider screens	620px
`--ck-stage-height`	Height of the 3D view on phones, where the options sit underneath	420px
`--ck-panel-width`	Width of the options panel beside the 3D view	360px
`--ck-accent-color`	Selected options and the main button	near-black
`--ck-font`	Typeface (`inherit` uses your site's)	system font
`--ck-surface`, `--ck-stage`	Panel background, and the backdrop behind the product	white, warm gray
`--ck-border`, `--ck-radius`	Border color and corner rounding	light gray, 14px

Layout

Attribute	Values
`layout`	`auto` (default): options beside the 3D view, underneath on narrow screens · `below`: always underneath · `viewer`: the 3D view alone, no options panel
`lighting`	`studio`, `daylight` or `evening`
`units`	`in`, `cm` or `mm` for dimensions (default: the product's)
`sync-url`	Keeps the current build in the page address, so copying the address shares the exact design

Loading and speed

By default the configurator shows a still picture of the product right away and loads the 3D just before it scrolls into view, so it doesn't slow your page down.

Attribute	Values
`loading`	`lazy` (default) · `click`: show the picture with a "View in 3D" button and load on tap (`start-label` changes its text) · `eager`: load straight away
`poster`	A picture to show while it loads, if you'd rather use your own photo
`loader`	`compact` (default): a slim progress bar at the bottom of the picture · `full`: an animated mark and progress ring in the middle

Turning features on and off

Everything is on unless you turn it off with ="off", for example fit="off".

Attribute	What it shows
`ar`	View in your room (AR on phones, a QR code on computers)
`dimensions`	Measurements drawn around the product
`fit`	"Will it fit?": shoppers enter their space and narrowest doorway
`spec-sheet`	A printable page of the build with views, dimensions, SKUs and price. Add `brand`, `logo` (an image address) and `contact` to print them on it.
`save`	Save design: shoppers email themselves a link back to their build
`swatches`	Free swatches, on products set up for them
`quote`	The Request quote button (`quote-label` changes its text)
`price`	Prices. Off is "price on request": shoppers configure without prices, and your quote requests still include the full build and its list price.
`photoreal`, `autorotate`	The photoreal render mode, and the slow turn before anyone touches it

To make the main button add to your Shopify cart instead of requesting a quote, see Shopify.

For developers

The element sends events that bubble up the page:

Event	When
`configkit-ready`	The product has loaded
`configkit-change`	A choice changed. `event.detail` has the selections, price and a summary.
`configkit-quote`	A shopper sent a quote request: the full build, a link that reopens it, the price lines and a picture. Call `event.preventDefault()` to handle it yourself.
`configkit-error`	Something went wrong loading it

document.querySelector('configkit-viewer').addEventListener('configkit-change', (e) => {
  console.log(e.detail.price);
});

To send leads to your own system instead of your threedezy dashboard, quote-url, save-url and swatch-url post each one as JSON to an address you give (Zapier, Formspree, your API). Most stores don't need this: your console can email leads to you and send them to a webhook while keeping them in your dashboard (see Leads).

The element's configurator property is the full API, for custom option pickers or connecting it to the rest of your page. Ask us for the reference.