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)
lang	Content language code (see Language)

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

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

Language

By default the configurator picks the company default language, or the ?lang= URL parameter when present. In script inject you can also set the language from the host page in any of these ways:

<script>
  // 1) As a field on the preConfiguration object
  injectApp({ product: 'YOUR_PRODUCT_UUID', lang: 'de' })

  // 2) As a second argument (keeps the preConfiguration clean)
  injectApp({ product: 'YOUR_PRODUCT_UUID' }, { lang: 'de' })
  injectApp({ product: 'YOUR_PRODUCT_UUID' }, 'de')
</script>

• Use a lowercase language code published for the company (de, en, fr, …), or auto to detect the visitor's browser language.
• Precedence: ?lang= URL parameter wins, then the injected lang, then the company default. So a shared link with ?lang=fr always overrides the injected value.
• The resolved language is clamped to the company's published languages and is reflected in the submission payload (data.language) and in all translated product / form content. See webhooks.

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.