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 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 UUID uit Manager → Configuraties → product openen → configurator-URL kopiëren.

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 ​

Wanneer PostMessage is ingeschakeld op een verzendknop (Manager → Data Submissions), ontvangt de parentpagina een bericht na een geslaagde verzending. 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 voordat je berichtgegevens vertrouwt.

Dealer-insluitingen ​

Dealerproducten kunnen extra queryparameters gebruiken (dealer, dealer_product_id). Gebruik de insluit-URL die je hebt gekopieerd van het dealerproduct in Manager.

Verder lezen ​