Add the configurator to a page

Get your embed code from the console, make sure your website is allowed, and paste the code where the configurator should appear.

Your embed code

1. Sign in at app.threedezy.com.
2. On your company's Overview, find Embed code and click Copy code, or under Products, click Copy embed next to the product you want.

<script type="module" src="https://app.threedezy.com/sdk/latest/configkit.js"></script>
<configkit-viewer license="ck_live_…" product="assets/arden-table.json"></configkit-viewer>

• license is your key. It's the same for every product and safe to have in your page's code: it only works on your allowed addresses.
• product says which product to show. Each product in your console has its own.
• The <script> line is needed once per page, however many configurators the page has.

Websites that can show it

Your configurator only loads on the addresses on your account; anywhere else, shoppers see "This 3D viewer isn't available on this site right now." Email every address you'll use to support@threedezy.com, and we'll add them:

• Your main domain: yourstore.com also covers www.yourstore.com.
• Your platform address, listed separately: yourstore.myshopify.com, yourstore.squarespace.com, yourstore.webflow.io.
• Staging and preview sites. A whole family of subdomains can be allowed at once, such as every *.yourstore.com.

Your console's Websites section lists every site that has tried to load your configurator, including blocked ones, so if a page shows the message above, you'll see its address there. Ask us to allow it.

Where to paste it

Paste the code where the configurator should appear, usually under the product title or in place of the main product photos. It fills the width it's given, side panel and all, and stacks the options under the 3D view on phones.

Shopify

1. In Shopify admin, go to Online Store → Themes and click Customize.
2. Open the product page template (the selector at the top of the editor) and choose the product to preview.
3. Add a Custom Liquid block or section where you want the configurator, and paste the code.
4. Save, then open the product in your store.

One template usually serves many products. To show the configurator only on configurable products, and the right one on each, see Shopify.

WordPress

1. Edit the product page (or the WooCommerce product).
2. Add a Custom HTML block where the configurator should go, and paste the code.
3. Update the page and view it.

If the <script> line disappears when you save, your account isn't allowed to add scripts. Ask your site's administrator, or add the script line site-wide with a header-and-footer code plugin and paste only the <configkit-viewer> line into the block.

Squarespace

1. Edit the page and add a Code block where the configurator should go.
2. Paste the code, leave the display set to HTML, and save.

Squarespace runs scripts in Code blocks only on plans that include custom code. If the configurator doesn't appear on the live page, check your plan, or ask us.

Webflow

1. In the Designer, drag a Code Embed element onto the page where the configurator goes.
2. Paste the code, save and close, then publish.

Custom code runs on the published site, not inside the Designer, so check it on your webflow.io or live address.

Your own site or a developer

Paste the two lines into the page's HTML. In React, Vue and similar frameworks, load the script once (in the page head or your layout) and render <configkit-viewer> like any other element. Developers can listen to its events and use its full API; see For developers.

Wix and other site builders

Builders that put embedded code in a frame on their own domain need extra setup on our side. Tell us which builder you use and we'll set it up with you.

More than one product on a page

Keep one <script> line and add a <configkit-viewer> line for each product. Each one waits until it's about to scroll into view before loading its 3D, so a page with several stays quick.

Check it before you announce it

• On a computer: the product appears, every option changes it, and the price is right for a few builds you know.
• On a phone: the options stack under the 3D view and the page scrolls normally past it.
• AR: tap View in your room on an iPhone or Android phone and place it on the floor. On a computer, the AR button shows a QR code that opens the same build on your phone.
• Send yourself a quote request, then check your email and the console's Analytics & leads.
• If you use Shopify add to cart: add a build to the cart and check the price and the options on the cart line.