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)

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' en document.body.style.maxWidth = '100vw' 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. Geef je beide door, dan wint het tweede argument van een lang-veld op het preConfiguration-object.
• Bij bedrijven met meer dan één gepubliceerde taal wordt de uiteindelijke taal als ?lang=<code> teruggeschreven in de URL van de hostpagina (zonder herladen), zodat de pagina in die taal deelbaar blijft.
• 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

Deze events worden altijd gepusht wanneer window.dataLayer bestaat, ook zonder tracking_enabled:

• ic_step (bij elke stapwissel)
• ic_form_show (het verzendformulier wordt zichtbaar)
• offerte_submit (bij verzenden van het offerteformulier)

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

Zie Analytics & GTM.

Inzendingsresultaten verwerken

Bij script-injectie draait de configurator in je eigen pagina, niet in een iframe. Er is dus geen parentvenster om naar te posten: de postMessage na verzenden (ook de payload van de PostMessage-optie op de verzendknop in Manager) wordt niet naar je pagina gestuurd.

Wil je op de hostpagina reageren op een verzending, luister dan naar het dataLayer-event offerte_submit (zie GTM / dataLayer), of gebruik webhooks aan de serverkant.

Heb je de postMessage-payloads (quotation / cart.action) nodig, gebruik dan de iFrame-embed. Zie postMessage voor de volledige payloadvormen.