Configurator insluiten met een iframe

Met een iframe laadt de configurator in je eigen pagina en past hij zich aan de beschikbare breedte aan. Je bezoeker blijft op je website.

De standaard code

Plak dit op de plek waar de configurator moet komen en vervang {jouw-slug} door je bedrijfslink.

<iframe
  src="https://meetpiloot.nl/{jouw-slug}/configure?embed=true"
  width="100%"
  height="800"
  style="border: none; max-width: 100%;"
  title="Configurator">
</iframe>
<script src="https://meetpiloot.nl/embed/mp-tracking.js"></script>

Een iframe dat meeschaalt

Wil je de configurator in een kolom met een maximale breedte, zet het iframe dan in een blok:

<div style="width: 100%; max-width: 900px; margin: 0 auto;">
  <iframe
    src="https://meetpiloot.nl/{jouw-slug}/configure?embed=true"
    style="width: 100%; height: 800px; border: none;"
    title="Configurator">
  </iframe>
</div>
<script src="https://meetpiloot.nl/embed/mp-tracking.js"></script>

Een formulier insluiten

Formulieren uit de formulierbouwer sluit je op dezelfde manier in. Vervang {jouw-formulier-slug} door de slug uit "Link kopiëren" in de formulierbouwer. Het script past de hoogte van het iframe automatisch aan de inhoud aan, zodat er geen scrollbalk verschijnt.

<iframe
  id="mp-formulier"
  src="https://meetpiloot.nl/{jouw-slug}/f/{jouw-formulier-slug}?embed=true"
  style="width: 100%; border: 0;"
  scrolling="no">
</iframe>
<script>
  window.addEventListener('message', function (e) {
    if (e.data && e.data.type === 'meetpiloot:resize') {
      document.getElementById('mp-formulier').style.height = e.data.height + 'px';
    }
  });
</script>

Formulieren zitten in het Pro-plan.

Controleren of het werkt

Open de pagina in een privévenster. Je ziet de configurator in je pagina, met je eigen logo en kleuren. Klik je via een advertentie of een link met ?utm_source=test op de pagina en verstuur je een testaanvraag, dan staat de herkomst bij die lead in je dashboard.

Per platform staan de stappen in de handleidingen voor WordPress, Shopify, Wix, Webflow en Squarespace en een losse HTML-pagina.