postMessage

iConfigure gebruikt postMessage in twee aparte protocollen. Combineer ze niet bij het verwerken van events op je pagina.

A. Inzendingsreacties (integrators)

Wanneer PostMessage is ingeschakeld op een verzendknop, stuurt de configurator-/form-app een bericht naar window.parent na een geslaagde API-verzending.

Inschakelen via Manager → Data → Inzendingen → Actieknoppen → Triggers → PostMessage (“Voor iframe / embed-integraties”).

Berichten worden alleen verstuurd wanneer de app in een iframe draait. De app bepaalt de origin van je pagina via de browser (ancestor origin of referrer) en post alleen naar die origin, dus zet geen referrerpolicy="no-referrer" op de iframe.

Zonder PostMessage stuurt een ingesloten app na een geslaagde verzending nog steeds een minimaal bericht: { name: 'quotation', state: 'finished', productId, total }.

Offerte voltooid

Verstuurd wanneer de knop een offerte aanmaakt (minstens één van Offerte-PDF genereren, Bevestigingsmail versturen of POST naar een URL staat aan). pdf_url is null wanneer er geen PDF wordt gegenereerd:

{
  name: 'quotation',
  state: 'finished',
  productId: 'product-uuid',
  total: 1250.5,
  quotation_id: 'quotation-uuid',
  pdf_url: 'https://...'
}

Winkelwagenactie voltooid

Verstuurd wanneer de knop PostMessage aan heeft, maar geen van Offerte-PDF genereren, Bevestigingsmail versturen of POST naar een URL. Er wordt geen offerte aangemaakt en er zijn geen contactgegevens nodig:

{
  name: 'cart.action',
  state: 'finished',
  button_id: 'button-id',
  productId: 'product-uuid',
  product_id: 'product-uuid',
  dealer_id: null,
  dealer_product_id: null,
  language: 'NL',
  extra_fields: {},
  items: [ /* verrijkte configuratie-items */ ]
}

Listener op de hostpagina

Voor iFrame-insluitingen. Bij Script-injectie draait de configurator direct in je pagina (geen iframe), dus daar wordt geen inzendingsbericht naartoe gepost.

<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

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

String versus object

Inzendingsberichten worden als gewone objecten verstuurd. Strings parsen, zoals in het voorbeeld hierboven, is alleen een defensieve controle.

B. Manager-embedprotocol (iconfigure:*)

Gebruikt wanneer de configurator binnen Manager draait (preconfiguratie-editor, offerteregel-editor, stijlpreview). Berichten gebruiken een type dat begint met iconfigure:. De configurator wisselt deze berichten alleen uit met iConfigure Manager, dus je kunt ze niet vanaf je eigen website gebruiken.

Configurator → parent

type	Payload	Wanneer
iconfigure:ready	{ productId }	Configuratie geladen
iconfigure:state-update	{ items, totalPrice, productId, dealerProductId }	Gebruiker wijzigt opties (gedebounced), nadat de parent iconfigure:ready heeft bevestigd
iconfigure:submit	{ items, totalPrice, productId, dealerProductId }	Preconfiguratie opslaan in Manager

Parent → configurator

type	Payload	Wanneer
iconfigure:ack	{ ackedType: 'iconfigure:ready' }	iconfigure:ready bevestigen (de configurator herhaalt ready tot dit binnenkomt)
iconfigure:request-state	{}	Direct een iconfigure:state-update opvragen
iconfigure:load-preconfig	{ preConfiguration }	Opgeslagen preconfiguratie laden

Dit protocol is voornamelijk bedoeld voor Manager-tooling, niet voor typische insluitingen op klantwebsites.

Velden in de verzendpayload (API)

De client stuurt deze naar de add-quote-API (relevant voor maatwerkintegraties):

Veld	Beschrijving
buttonId	Intern ID van de verzendknop

De inzendingsconfiguratie (en de bijbehorende PDF-template) wordt server-side bepaald op basis van het product of de showroom; output_id en templateId die de client meestuurt worden genegeerd.

Zie Inzendingen & uitvoer.

Verder lezen

• Webhooks — Server-side equivalent van verzendmeldingen
• Script-injectie
• iFrame insluiten