Embedding the configurator with an iframe

With an iframe, the configurator loads inside your own page and adapts to the available width. Your visitor stays on your website.

The standard code

Paste this where the configurator should appear and replace {your-slug} with your company link.

<iframe
  src="https://meetpiloot.nl/{your-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>

An iframe that scales

If you want the configurator in a column with a maximum width, wrap the iframe in a block:

<div style="width: 100%; max-width: 900px; margin: 0 auto;">
  <iframe
    src="https://meetpiloot.nl/{your-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>

Embedding a form

You embed forms from the form builder the same way. Replace {your-form-slug} with the slug from "Copy link" in the form builder. The script adjusts the iframe's height to its content automatically, so no scroll bar appears.

<iframe
  id="mp-form"
  src="https://meetpiloot.nl/{your-slug}/f/{your-form-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-form').style.height = e.data.height + 'px';
    }
  });
</script>

Forms are included in the Pro plan.

Check that it works

Open the page in a private window. You should see the configurator inside your page, with your own logo and colours. If you reach the page through an ad or a link with ?utm_source=test and send a test enquiry, the source shows on that lead in your dashboard.

For step-by-step instructions per platform, see the guides for WordPress, Shopify, Wix, Webflow and Squarespace and a plain HTML page.