Code d'intégration WordPress

Copiez ce bloc de code et collez-le dans un bloc HTML personnalisé sur votre page WordPress.

Dans WordPress, éditez la page où vous souhaitez intégrer le simulateur.

Ajoutez un bloc « HTML personnalisé » (Custom HTML).

Collez le code ci-dessous dans ce bloc.

Enregistrez et publiez la page.

Code HTML

<div class="simulateur-container">
  <iframe 
    id="simulateur-iframe"
    src="https://abrp-reno-flow.base44.app" 
    style="width: 100%; border: none; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: block; overflow: hidden;"
    frameborder="0" 
    scrolling="no" 
    title="Simulateur de Rénovation ABRP">
  </iframe>
</div>

<style>
  .simulateur-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    min-height: 800px;
  }

  @media (max-width: 768px) {
    .simulateur-container {
      padding: 0 !important;
      min-height: 600px;
    }
    #simulateur-iframe {
      border-radius: 0px !important;
      box-shadow: none !important;
    }
  }
</style>

<script>
window.addEventListener('message', function(event) {
  if (event.origin !== 'https://abrp-reno-flow.base44.app') return;
  var iframe = document.getElementById('simulateur-iframe');
  if (!iframe) return;

  if (event.data.type === 'resizeIframe' && event.data.height) {
    var buffer = (window.innerWidth <= 768) ? 60 : 160;
    var newHeight = event.data.height + buffer;
    iframe.style.height = newHeight + 'px';
  }

  if (event.data.type === 'scrollToTop') {
    var iframePosition = iframe.getBoundingClientRect().top + window.scrollY;
    var offset = window.innerWidth < 768 ? 60 : 80;
    window.scrollTo({ 
      top: iframePosition - offset, 
      behavior: 'smooth' 
    });
  }
});
</script>

💡

Conseils d'intégration

Le simulateur s'adapte automatiquement à la largeur de votre page.
Sur mobile, les bords arrondis et l'ombre sont retirés pour un rendu optimal.
Le scroll remonte automatiquement à chaque changement d'étape.
La hauteur de l'iframe s'ajuste dynamiquement selon le contenu.