Furni360
Book a demo

How to add the 3D configurator

The configurator is a single page your site shows through an iframe – no plugins or server changes. Not technical? Send this page to whoever maintains your site, or send us a link to your site.

  1. You receive an access code (token)

    We open a license for your catalog and add the domains where the configurator will run. You receive a token and the model names.

  2. Add the iframe to your page

    Replace the token and model name. A height of at least 600 px leaves enough room for both the model and the material picker.

  3. Open the page and check

    If the domain is in the license, the configurator loads right away. For testing on your computer, localhost can be added to the license too.

Embed code
<iframe
  class="furni360"
  src="https://embed.furni360.com/embed?token=YOUR_TOKEN&model=doha.glb&lang=en"
  title="3D configurator"
  width="100%"
  height="640"
  style="border: 0"
  allow="fullscreen; xr-spatial-tracking"
  referrerpolicy="no-referrer-when-downgrade"
  loading="lazy">
</iframe>

Replace YOUR_TOKEN and the model name with the values from your license. The configurator shows your site's language; lang (sr, en…) sets it explicitly, and languages we don't support appear in English.

Rules to follow

  • Your site’s domain must be in the license. An entry like “yourdomain.com” also covers www.yourdomain.com and other subdomains.
  • Don’t set referrerpolicy="no-referrer" on the iframe or the page – the configurator checks the license using the page address.
  • The allow="fullscreen" attribute enables fullscreen viewing of the model and photos.
  • If the configurator sits further down the page or in a modal, loading="lazy" or loading on click saves bandwidth.

Guides for popular platforms

  • WordPress

    In the block editor, add a “Custom HTML” block and paste the code.

  • WooCommerce

    Paste the code into the product description (in HTML mode) or add it as a separate tab on the product page.

  • Shopify

    In the theme editor, add a “Custom Liquid” section to the product template and paste the code.

  • PrestaShop and Magento

    Use a CMS block or the HTML field in the product description. Make sure the editor doesn’t strip iframe elements.

  • React / Next.js

    Use the same iframe in JSX. For pages with many products, pass the token and model through props.

  • Modal window

    Set the src only when the shopper opens the modal and remove it on close – just like the ARVO demo store.

Fitting the screen

On phones the configurator works best when it fills most of the screen. This CSS gives it full width and a height that adapts to the device:

styles.css
.furni360 {
  display: block;
  width: 100%;
  height: min(85svh, 760px);
  min-height: 560px;
  border-radius: 16px;
}

Need help adding it to your site?

Send us a link to your site – we’ll help you put the configurator in the right place at the right size.

Contact

Show shoppers every combination.

A short online presentation – 30 minutes, no commitment. No time for a call? Send us your website link and the number of models, and we’ll reply with an indicative quote by email.

  1. We reply with a proposed time
  2. A presentation and a talk about your catalog
  3. Quote by number of models and materials
Book a demoinfo@furni360.com