iFrame embed

The iFrame method is the simplest way to embed an iConfigure configurator on your website. The configurator runs in an isolated browsing context at https://configurator.iconfigure.io.

When to use iFrame

Advantage	Limitation
Easy to implement	Limited interaction with the host page
Style/script isolation	Third-party analytics (GTM) on the host page cannot see inside the iframe
Works on any CMS	postMessage to parent only when enabled on the submit button

For Google Analytics / GTM integration, prefer Script inject.

Basic embed

<iframe
  src="https://configurator.iconfigure.io/?product=YOUR_PRODUCT_ID"
  style="width: 100%; height: 80vh; border: none;"
  title="Product configurator"
></iframe>

Replace YOUR_PRODUCT_ID with the UUID from Manager → Configurations → open product → copy configurator URL.

Full-viewport layout

<iframe
  src="https://configurator.iconfigure.io/?product=YOUR_PRODUCT_ID"
  style="
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    height: calc(100dvh - 50px);
    border: none;
  "
  title="Product configurator"
></iframe>

Use 100dvh instead of 100vh on mobile so browser chrome does not clip the bottom of the configurator.

Pre-configuration via URL

Pass feature IDs and values as query parameters. See URL parameters.

<iframe
  src="https://configurator.iconfigure.io/?product=YOUR_PRODUCT_ID&width=100&material=oak"
></iframe>

Listening for submission events

When PostMessage is enabled on a submit button (Manager → Data Submissions), the parent page receives a message after a successful submit. See postMessage.

<script>
  const CONFIGURATOR_ORIGIN = 'https://configurator.iconfigure.io'

  window.addEventListener('message', (event) => {
    if (event.origin !== CONFIGURATOR_ORIGIN) return

    const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data
    if (data?.state === 'finished') {
      // Quotation or cart submit completed — redirect, update cart, etc.
      console.log('Submit finished:', data)
    }
  })
</script>

Origin check

Always verify event.origin matches https://configurator.iconfigure.io before trusting message data.

Dealer embeds

Dealer products may use additional query parameters (dealer, dealer_product_id). Use the embed URL copied from the dealer product in Manager.

Related

• URL parameters
• postMessage
• Webhooks