Script inject

Script inject mounts the configurator directly into your page DOM (no iframe). This enables:

• Google Tag Manager / dataLayer events on the host page
• Full layout control (the widget is just a DOM subtree)
• postMessage responses to window.parent after submit

What you need to load

1) The mount point

The element must exist and have id="iConfigure".

<div id="iConfigure"></div>

The inject entry point will also:

• Force a mobile-friendly viewport meta tag (maximum-scale=1, user-scalable=no)
• Set document.body.style.overflowX = 'hidden'
• Adjust the container margin on resize so the widget can align to the viewport edges

2) The inject bundle

Load the single JS file (CSS is bundled into the JS and injected at runtime).

<script
  src="https://configurator.iconfigure.io/inject.iife.js"
  crossorigin="anonymous"
></script>

Verified:

• https://configurator.iconfigure.io/inject.iife.js → 200 (application/javascript)
• https://configurator.iconfigure.io/inject/inject.iife.js → 404

3) Call injectApp(preConfig)

<script>
  injectApp({
    product: 'YOUR_PRODUCT_UUID',
    material: 'oak',
    width: '120'
  })
</script>

Pre-configuration keys (verified)

injectApp() passes its object to the configurator as preConfiguration. The configurator chooses:

1. If you pass an object with keys: it uses that object.
2. If you pass {} or nothing: it falls back to URL query parameters.

Supported high-level keys (used by the form store):

Key	Meaning
product / product_id	Product UUID
dealer	Dealer product UUID
quotation	Quotation mode
pre_config	Pre-configuration UUID (loads pre_configurations.items)

All other keys are treated as feature ID → value pairs.

See URL parameters for the same rules when using query parameters.

active_step

active_step is present in the URL generator, but it is not applied on load in the current code. Do not rely on it for deep-linking.

GTM / dataLayer

If the product has tracking enabled (tracking_enabled) and window.dataLayer exists, the configurator pushes:

• ic_setup
• ic_update (debounced)
• ic_finish

Important: dataLayer must exist before the tracking session starts (usually by loading GTM first).

See Analytics & GTM.

Handling submission results (postMessage)

When PostMessage is enabled on the submit button in Manager, the parent page receives a payload after a successful submit.

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

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

    let data = event.data
    if (typeof data === 'string') {
      try {
        data = JSON.parse(data)
      } catch {
        return
      }
    }

    if (!data || data.state !== 'finished') return

    if (data.name === 'quotation') {
      console.log('Quotation ID:', data.quotation_id, 'PDF:', data.pdf_url)
    } else if (data.name === 'cart.action') {
      console.log('Cart items:', data.items)
    }
  })
</script>

See postMessage for the full payload shapes.