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)

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' and document.body.style.maxWidth = '100vw'
• 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. When both are passed, the second argument wins over a lang field on the preConfiguration object.
• For companies with more than one published language, the resolved language is written back to the host page URL as ?lang=<code> (without a reload), so the page stays shareable in that language.
• 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

These events are always pushed when window.dataLayer exists, also without tracking_enabled:

• ic_step (every step change)
• ic_form_show (the submission form becomes visible)
• offerte_submit (on submit of the quote form)

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

See Analytics & GTM.

Handling submission results

With script inject the configurator runs in your own page, not in an iframe, so there is no parent window to post to: the submit postMessage (including the payload of the PostMessage option on the submit button in Manager) is not sent to your page.

To react to a submit on the host page, listen for the offerte_submit dataLayer event (see GTM / dataLayer), or use webhooks on the server side.

If you need the postMessage payloads (quotation / cart.action), use the iFrame embed instead. See postMessage for the full payload shapes.