Guide d'intégration

Intégrer CertiCalc sur WordPress

Avec Elementor & JupiterX — 3 étapes simples

URL de votre calculateur
https://calculateur.habitaplus.be

⚠️ Assurez-vous que votre app est bien publiée dans Base44 avant de l'intégrer.

Intégration via Elementor
1

Ouvrir l'éditeur Elementor

Dans WordPress, allez sur la page où vous voulez afficher le calculateur. Cliquez sur « Modifier avec Elementor ».

2

Ajouter un widget "HTML personnalisé"

Dans la barre de gauche d'Elementor, cherchez le widget « HTML » (ou Custom HTML) et glissez-le dans votre section.

Avec JupiterX, vous pouvez aussi utiliser le widget « Code » ou « HTML » depuis la bibliothèque JupiterX.

3

Coller le code ci-dessous

Dans le champ HTML du widget, collez ce code :

Code à coller dans le widget HTML Elementor

<div style="width:100%; max-width:900px; margin:0 auto;">
  <iframe
    src="https://calculateur.habitaplus.be"
    width="100%"
    height="800"
    style="border:none; border-radius:16px; box-shadow:0 4px 32px rgba(0,0,0,0.08);"
    allow="geolocation"
    loading="lazy"
    title="Calculateur CertiCalc"
  ></iframe>
</div>

💡 Conseil : Réglez la hauteur (800px) selon votre mise en page. Sur mobile, 900-1000px est recommandé.

🌍 Géolocalisation : L'attribut allow="geolocation" est nécessaire pour que la carte Google Maps fonctionne.

Code iframe générique

Fonctionne aussi dans n'importe quel éditeur HTML ou shortcode WordPress.

<iframe
  src="https://calculateur.habitaplus.be"
  width="100%"
  height="800"
  style="border:none; border-radius:16px; box-shadow:0 4px 32px rgba(0,0,0,0.08);"
  allow="geolocation"
  loading="lazy"
  title="Calculateur CertiCalc"
></iframe>

❓ Problèmes courants

  • La carte ne s'affiche pas : Assurez-vous que votre site WordPress est en HTTPS. Les iframes avec géolocalisation nécessitent HTTPS.
  • L'iframe est bloquée : Vérifiez que votre hébergeur/CDN n'ajoute pas d'en-tête X-Frame-Options: DENY sur votre app Base44.
  • Taille incorrecte : Ajoutez scrolling="no" si vous ne voulez pas de scrollbar dans l'iframe, ou augmentez la hauteur.