Furni360
Demo buchen

Möbel Konfigurator in Ihre Website einbinden

Der 3D-Konfigurator funktioniert mit jedem CMS, jeder Shop-Plattform und jedem Framework – überall, wo eine Seite einen iFrame anzeigen kann. Ihr Online-Shop bleibt, wie er ist.

  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=IHR_TOKEN&model=doha.glb&lang=de"
  title="3D-Konfigurator"
  width="100%"
  height="640"
  style="border: 0"
  allow="fullscreen; xr-spatial-tracking"
  referrerpolicy="no-referrer-when-downgrade"
  loading="lazy">
</iframe>
<p class="furni360-credit">
  3D-Konfigurator von <a href="https://furni360.com/de">Furni360</a>
</p>

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.
  • Please keep the “Furni360” link line below the configurator. You can style it to match your site.

Funktioniert mit jedem CMS und Framework

  • 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, Magento and Shopware

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

  • Wix, Squarespace and Webflow

    Add an “Embed” or “Custom code” element to the product page and paste the code.

  • React, Next.js, Vue, Angular

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

  • Custom site

    PHP, .NET, Django, static HTML or anything else: paste the iframe into the product page template.

  • 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;
}

.furni360-credit {
  margin: 8px 0 0;
  font-size: 13px;
  text-align: right;
  opacity: 0.7;
}

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.

Kontakt

Zeigen Sie Kunden alle Möglichkeiten.

Eine kurze Online-Präsentation – 30 Minuten und unverbindlich. Keine Zeit für einen Termin? Senden Sie uns Ihre Website und die Anzahl der Modelle. Wir schicken Ihnen ein erstes Angebot per E-Mail.

  1. Wir schlagen einen Termin vor
  2. Präsentation und Gespräch über Ihren Katalog
  3. Angebot nach Anzahl der Modelle und Materialien
Demo bucheninfo@furni360.com