Script-injectie

Script-injectie plaatst de configurator rechtstreeks in de DOM van je pagina (geen iframe). Dit maakt het volgende mogelijk:

• Google Tag Manager-/dataLayer-events op de hostpagina
• Volledige controle over de indeling (de widget is gewoon een DOM-subtree)
• postMessage-reacties naar window.parent na verzenden

Wat je moet laden

1) Het mountpunt

Het element moet bestaan en id="iConfigure" hebben.

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

Het inject-entrypoint zal daarnaast:

• Een mobielvriendelijke viewport-metatag forceren (maximum-scale=1, user-scalable=no)
• document.body.style.overflowX = 'hidden' instellen
• De containermarge bij resize aanpassen zodat de widget tot de viewportranden kan uitlijnen

2) De inject-bundle

Laad het enkele JS-bestand (de CSS zit in de JS gebundeld en wordt tijdens runtime geïnjecteerd).

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

Geverifieerd:

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

3) Roep injectApp(preConfig) aan

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

Preconfiguratiesleutels (geverifieerd)

injectApp() geeft het object door aan de configurator als preConfiguration. De configurator kiest:

1. Als je een object met sleutels doorgeeft: dan gebruikt het dat object.
2. Als je {} of niets doorgeeft: dan valt het terug op de queryparameters van de URL.

Ondersteunde high-level-sleutels (gebruikt door de form store):

Sleutel	Betekenis
product / product_id	Product-UUID
dealer	Dealerproduct-UUID
quotation	Offertemodus
pre_config	Preconfiguratie-UUID (laadt pre_configurations.items)
lang	Taalcode voor de content (zie Taal)

Alle andere sleutels worden behandeld als feature-ID → waarde-paren.

Zie URL-parameters voor dezelfde regels bij het gebruik van queryparameters.

Taal

Standaard kiest de configurator de standaardtaal van het bedrijf, of de ?lang=-URL-parameter wanneer aanwezig. Bij script-injectie kun je de taal ook vanaf de hostpagina instellen op een van deze manieren:

<script>
  // 1) Als veld op het preConfiguration-object
  injectApp({ product: 'YOUR_PRODUCT_UUID', lang: 'de' })

  // 2) Als tweede argument (houdt de preConfiguration schoon)
  injectApp({ product: 'YOUR_PRODUCT_UUID' }, { lang: 'de' })
  injectApp({ product: 'YOUR_PRODUCT_UUID' }, 'de')
</script>

• Gebruik een taalcode in kleine letters die voor het bedrijf is gepubliceerd (de, en, fr, …), of auto om de browsertaal van de bezoeker te detecteren.
• Voorrang: de ?lang=-URL-parameter wint, daarna de geïnjecteerde lang, daarna de standaardtaal van het bedrijf. Een gedeelde link met ?lang=fr overschrijft dus altijd de geïnjecteerde waarde.
• De uiteindelijke taal wordt beperkt tot de gepubliceerde talen van het bedrijf en komt terug in de inzendingspayload (data.language) en in alle vertaalde product-/formuliercontent. Zie webhooks.

active_step

active_step zit in de URL-generator, maar wordt in de huidige code niet toegepast bij het laden. Vertrouw er niet op voor deep-linking.

GTM / dataLayer

Als het product tracking ingeschakeld heeft (tracking_enabled) en window.dataLayer bestaat, pusht de configurator:

• ic_setup
• ic_update (gedebounced)
• ic_finish

Belangrijk: dataLayer moet bestaan voordat de trackingsessie start (meestal door GTM eerst te laden).

Zie Analytics & GTM.

Inzendingsresultaten verwerken (postMessage)

Wanneer PostMessage is ingeschakeld op de verzendknop in Manager, ontvangt de parentpagina een payload na een geslaagde verzending.

<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>

Zie postMessage voor de volledige payloadvormen.