Intégrer le configurateur avec un iframe

Avec un iframe, le configurateur se charge dans votre propre page et s'adapte à la largeur disponible. Votre visiteur reste sur votre site.

Le code standard

Collez ceci à l'endroit où le configurateur doit apparaître et remplacez {votre-slug} par le lien de votre entreprise.

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

Limiter la largeur

Vous voulez limiter la largeur du configurateur ? Placez alors l'iframe dans un conteneur :

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

Intégrer un formulaire

Les formulaires conçus avec le créateur de formulaires s'intègrent de la même façon. Remplacez {votre-formulaire-slug} par le slug de « Link kopiëren » (copier le lien) dans le créateur de formulaires. Le script adapte automatiquement la hauteur de l'iframe au contenu, ce qui évite une barre de défilement.

<iframe
  id="mp-formulier"
  src="https://meetpiloot.nl/{votre-slug}/f/{votre-formulaire-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>

Les formulaires font partie de l'abonnement Pro.

Vérifier que tout fonctionne

Ouvrez la page dans une fenêtre de navigation privée. Le configurateur apparaît dans votre page, avec votre logo et vos couleurs. Si vous arrivez sur la page via une annonce ou un lien avec ?utm_source=test et envoyez une demande de test, l'origine apparaît sur ce lead dans votre tableau de bord.

Vous trouverez les étapes par plateforme dans les guides pour WordPress, Shopify, Wix, Webflow et Squarespace et une page HTML simple.