Konfigurator mit einem iframe einbinden

Mit einem iframe lädt der Konfigurator in deiner eigenen Seite und passt sich der verfügbaren Breite an. Dein Besucher bleibt auf deiner Website.

Der Standardcode

Füge das dort ein, wo der Konfigurator erscheinen soll, und ersetze {dein-slug} durch deinen Firmenlink.

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

Ein iframe, das mitskaliert

Soll der Konfigurator in einer Spalte mit maximaler Breite stehen, setze das iframe in einen Block:

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

Ein Formular einbinden

Formulare aus dem Formular-Builder bindest du genauso ein. Ersetze {dein-formular-slug} durch den Slug aus "Link kopieren" im Formular-Builder. Das Skript passt die Höhe des iframes automatisch an den Inhalt an, sodass keine Scrollleiste erscheint.

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

Formulare sind im Tarif Pro enthalten.

Prüfen, ob es funktioniert

Öffne die Seite in einem privaten Fenster. Du siehst den Konfigurator in deiner Seite, mit deinem Logo und deinen Farben. Rufst du die Seite über eine Anzeige oder einen Link mit ?utm_source=test auf und schickst eine Testanfrage ab, steht die Herkunft bei diesem Lead in deinem Dashboard.

Die Schritte pro Plattform findest du in den Anleitungen für WordPress, Shopify, Wix, Webflow und Squarespace und eine einzelne HTML-Seite.