iConfigure

Nederlands

English

Nederlands

English

Naar donker thema

iFrame insluiten ​

De iFrame-methode is de eenvoudigste manier om een iConfigure-configurator op je website in te sluiten. De configurator draait in een geïsoleerde browsingcontext op https://configurator.iconfigure.io.

Wanneer iFrame gebruiken ​

VoordeelBeperking
Eenvoudig te implementerenBeperkte interactie met de hostpagina
Stijl-/script-isolatieExterne analytics (GTM) op de hostpagina kunnen niet in de iframe kijken
Werkt op elk CMSpostMessage naar parent alleen na een geslaagde verzending (volledige gegevens wanneer ingeschakeld op de verzendknop)

Geef voor integratie met Google Analytics / GTM de voorkeur aan Script-injectie.

Basisinsluiting ​

html
<iframe
  src="https://configurator.iconfigure.io/?product=YOUR_PRODUCT_ID"
  style="width: 100%; height: 80vh; border: none;"
  title="Product configurator"
></iframe>

Vervang YOUR_PRODUCT_ID door de product-UUID: klik in Manager → Configuraties bij het product op Open live en kopieer de waarde van product uit de configurator-URL die opent. Gebruikt je account een eigen configuratordomein, gebruik dan dat domein in plaats van configurator.iconfigure.io.

Volledige-viewport-indeling ​

html
<iframe
  src="https://configurator.iconfigure.io/?product=YOUR_PRODUCT_ID"
  style="
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    height: calc(100dvh - 50px);
    border: none;
  "
  title="Product configurator"
></iframe>

Gebruik 100dvh in plaats van 100vh op mobiel zodat de browserbalk de onderkant van de configurator niet afsnijdt.

Vooraf configureren via URL ​

Geef feature-ID's en waarden door als queryparameters. Zie URL-parameters.

html
<iframe
  src="https://configurator.iconfigure.io/?product=YOUR_PRODUCT_ID&width=100&material=oak"
></iframe>

Luisteren naar inzendingsevents ​

Na een geslaagde verzending ontvangt de parentpagina een bericht met state: 'finished'. Wanneer PostMessage is ingeschakeld op de verzendknop (Manager → Data → Inzendingen), bevat het bericht de volledige verzendgegevens (bij een offerte: quotation_id en pdf_url). Zie postMessage.

html
<script>
  const CONFIGURATOR_ORIGIN = 'https://configurator.iconfigure.io'

  window.addEventListener('message', (event) => {
    if (event.origin !== CONFIGURATOR_ORIGIN) return

    const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data
    if (data?.state === 'finished') {
      // Offerte- of winkelwagenverzending voltooid — redirect, winkelwagen bijwerken, enz.
      console.log('Submit finished:', data)
    }
  })
</script>

Origin-controle

Controleer altijd of event.origin overeenkomt met https://configurator.iconfigure.io (of je eigen configuratordomein) voordat je berichtgegevens vertrouwt.

Dealer-insluitingen ​

Dealerproducten gebruiken de queryparameter dealer (het dealerproduct-ID) in plaats van product. Gebruik de URL die opent via Configurator openen bij het dealerproduct in Manager → Configuraties.

Verder lezen ​