postMessage

iConfigure uses postMessage in two separate protocols. Do not mix them when handling events on your page.

A. Submission responses (integrators)

When PostMessage is enabled on a submit button, the configurator/form app sends a message to window.parent after a successful API submit.

Enable in Manager → Data Submissions → button → PostMessage (“For iframe / embed integrations”).

Quotation finished

Sent when the button creates a quotation (PDF/email path):

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

Cart action finished

Sent on the no-contact path (webhook/postMessage only, no quotation row):

{
  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: [ /* enriched configuration items */ ]
}

Host page listener

Works for both iFrame and Script inject:

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

Some legacy paths may send JSON strings; always try parsing when typeof event.data === 'string'.

B. Manager embed protocol (iconfigure:*)

Used when the configurator runs inside Manager (preconfiguration editor, style preview). Messages use type starting with iconfigure:.

Configurator → parent

type	Payload	When
iconfigure:ready	{ productId }	Configuration loaded
iconfigure:state-update	{ items, totalPrice, productId, dealerProductId }	User changes options (debounced)
iconfigure:submit	{ items, totalPrice, productId, dealerProductId }	Save preconfiguration in Manager

Parent → configurator

type	Payload	When
iconfigure:load-preconfig	{ preConfiguration }	Load saved preconfiguration

Also emitted from the configurator shell: { type: 'ic-embed-ready' } when the embed is ready.

This protocol is primarily for Manager tooling, not typical customer website embeds.

Submit payload fields (API)

The client sends these to the add-quote API (relevant for custom integrations):

Field	Description
output_id	Submission output UUID
buttonId	Submit button internal ID
templateId	PDF template linked to the output

See Submissions & outputs.

Related

• Webhooks — Server-side equivalent of submit notifications
• Script inject
• iFrame embed