Contao OpenImmo : transfert de biens immobiliers

Si vous exploitez votre site web avec Contao, vous pouvez tout de même utiliser WP-ImmoMakler comme plugin immobilier à part entière — grâce à une intégration via iFrame. WP-ImmoMakler fonctionne alors sur une installation WordPress distincte, et la vue immobilière est intégrée sous forme d’iFrame dans votre page Contao.

Prérequis

Vous avez besoin d’une installation WordPress sur laquelle WP-ImmoMakler fonctionne et dans laquelle vos biens immobiliers sont importés. Cette installation peut se trouver sur le même serveur que votre site Contao ou sur un hébergement distinct.

Pour ce cas de figure, WP-ImmoMakler dispose de son propre mode iFrame. Vous n’écrivez donc pas vous-même une balise <iframe> : vous activez le mode dans les paramètres et reprenez le code que WP-ImmoMakler y affiche, prêt à l’emploi.

Étape 1 : activer le mode iFrame

Ouvrir les paramètres

Dans le back-office de votre installation WordPress (wp-admin), rendez-vous dans WP-ImmoMakler → Paramètres → Affichage.
Activer le mode iFrame

Cochez Mode iFrame. Les vues liste et détail de vos biens immobiliers sont alors affichées comme contenu d’iFrame jusqu’au bord, sans l’en-tête, le menu ni le pied de page de l’installation WordPress. Dans ce mode, les galeries d’images s’ouvrent automatiquement en plein écran afin de ne pas être limitées par la hauteur de l’iFrame.
Saisir l’URL de base appelant l’iFrame

Dans le champ URL de base appelant l’iFrame, indiquez l’URL de base complète de votre site Contao, c’est-à-dire l’adresse du site dans lequel l’iFrame est intégré, par exemple https://www.example.com sans sous-page. Pour des raisons de sécurité (CORS), l’adaptation automatique de la taille de l’iFrame ne fonctionne qu’une fois cette information enregistrée.
Enregistrer

Enregistrez les paramètres.

Paramètres WP-ImmoMakler : mode iFrame et URL de base appelant l'iFrame

Étape 2 : copier le code d’intégration

Juste en dessous de l’option Mode iFrame, WP-ImmoMakler affiche le code d’intégration prêt à l’emploi, contenant déjà les URL de votre propre installation. Un clic dans le champ sélectionne l’ensemble du code, que vous pouvez alors copier.

Le code se présente ainsi :

<style>#wp-immomakler-iframe{width:100%;height:100vh;border:none;}</style>
<iframe id="wp-immomakler-iframe" src="https://votre-domaine-wordpress.fr/immobilien/" allowfullscreen></iframe>
<script type="module">import { initialize } from "https://votre-domaine-wordpress.fr/?wp-immomakler-iframe-resizer";initialize({}, "#wp-immomakler-iframe");</script>

Il se compose de trois parties : une petite feuille de style qui donne à l’iFrame toute sa largeur, l’iFrame lui-même et un module JavaScript qui adapte en continu la hauteur de l’iFrame à son contenu. Aucune seconde barre de défilement n’apparaît donc, et la hauteur s’ajuste automatiquement lors du passage de la liste à la vue détaillée. Vous n’avez donc ni hauteur fixe à indiquer, ni script de redimensionnement à ajouter vous-même.

Étape 3 : intégration dans Contao

Dans Contao, vous intégrez le code via un élément de contenu HTML :

Ouvrir la page

Dans l’administration de Contao, rendez-vous sur la page souhaitée.
Ajouter l’élément de contenu

Ajoutez un nouvel élément de contenu de type HTML.
Insérer le code

Collez le code copié depuis les paramètres de WP-ImmoMakler.
Enregistrer et publier

Enregistrez l’élément de contenu et publiez la page.

Si la hauteur n’est pas adaptée automatiquement

Si l’iFrame reste à sa hauteur initiale ou qu’une seconde barre de défilement apparaît, la cause est presque toujours l’une des trois suivantes :

L’URL de base appelant l’iFrame est vide, contient une faute de frappe ou une sous-page. Seule l’URL de base, https:// compris, doit y figurer.
L’URL de base saisie ne correspond pas à l’adresse réellement appelée, par exemple https://example.com au lieu de https://www.example.com.
Contao ou une extension supprime le <script type="module"> de l’élément de contenu. Vérifiez dans ce cas le rendu dans le code source de la page publiée.

Options d’hébergement

Vous pouvez configurer l’iFrame vous-même ou en confier la configuration à votre agence. Nous proposons également un service d’installation qui prend en charge l’intégration visuelle dans la mise en page de votre site Contao.

Pour toute question, adressez-vous à notre équipe d’assistance.