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 Submissions → knop → PostMessage (“Voor iframe-/embed-integraties”).

Offerte voltooid

Verstuurd wanneer de knop een offerte aanmaakt (PDF-/e-mailpad):

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

Winkelwagenactie voltooid

Verstuurd op het contactloze pad (alleen webhook/postMessage, geen offerterij):

{
  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

Werkt voor zowel iFrame als Script-injectie:

<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

Sommige oudere paden sturen mogelijk JSON-strings; probeer altijd te parsen wanneer typeof event.data === 'string'.

B. Manager-embedprotocol (iconfigure:*)

Gebruikt wanneer de configurator binnen Manager draait (preconfiguratie-editor, stijlpreview). Berichten gebruiken een type dat begint met iconfigure:.

Configurator → parent

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

Parent → configurator

type	Payload	Wanneer
iconfigure:load-preconfig	{ preConfiguration }	Opgeslagen preconfiguratie laden

Wordt ook uitgezonden vanuit de configuratorshell: { type: 'ic-embed-ready' } wanneer de embed gereed is.

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
output_id	UUID van de inzendingsuitvoer
buttonId	Intern ID van de verzendknop
templateId	PDF-template gekoppeld aan de uitvoer

Zie Inzendingen & uitvoer.

Verder lezen

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