Connecter un site web Lovable à Propstack, onOffice et votre logiciel CRM

PLUS Avec Lovable, vous décrivez votre site web immobilier dans un chat et Lovable le crée. WP-ImmoMakler fournit les biens immobiliers de votre logiciel CRM, par exemple de Propstack, onOffice, FlowFact, JustImmo, ImmobilienScout24 (ImmoScout24) ou de tout logiciel avec export OpenImmo, via une API REST. Il réceptionne les demandes de contact de votre site Lovable et les transmet à vos personnes de contact et, selon la configuration, à votre logiciel CRM.

Pourquoi ce chemin passe par WordPress et non directement par l’API de votre logiciel CRM est expliqué sous Connecter un site web créé par IA à votre logiciel CRM.

Prérequis

WP-ImmoMakler PLUS ou supérieur, connecté à votre logiciel CRM
L’interface headless activée : dans le back end de votre site (wp-admin), sous WP-ImmoMakler → Intégrations → Headless, voir Configuration
Un compte chez Lovable

Connecter un site web existant

Si vous avez déjà créé votre site web avec Lovable, il ne manque généralement plus que la connexion à vos biens immobiliers. Votre site n’a pas besoin d’être reconstruit pour cela : le prompt suivant remplace les données d’exemple par les biens de WP-ImmoMakler, connecte le formulaire de contact et laisse inchangés le design et la structure. Copiez-le dans le chat de votre projet Lovable et remplacez https://votre-adresse-wordpress.fr par l’adresse de votre site WordPress.

Mon site web affiche déjà des biens, mais encore avec des données d'exemple. Connecte-le à l'API des biens de WP-ImmoMakler, qui est décrite ici :
https://votre-adresse-wordpress.fr/wp-json/immomakler-headless/v1/llms-full.txt
Lis d'abord cette description en entier.

Le design, la mise en page et les composants de mon site web restent inchangés. Remplace uniquement la source de données. S'il manque une liste de biens ou une page de détail, crée-la dans le style des pages existantes.

Liste des biens :
- Charge les biens via GET /search avec fields=summary au lieu d'utiliser les données d'exemple.
- Pagine avec page et total_pages de la réponse, au lieu de charger tous les biens d'un coup.
- Si mon site web comporte des filtres (type de bien, type de commercialisation, localité, prix, pièces, surface), construis-les à partir de GET /site (search.taxonomies, search.ranges, search.orders) et transmets-les à /search comme paramètres de recherche. Restaure l'état des filtres à partir de "applied" dans la réponse et conserve-le dans l'URL, afin qu'une liste filtrée reste partageable par lien.
- Affiche un état de chargement, un message d'erreur et une indication lorsqu'aucun bien ne correspond.

Page de détail :
- Utilise dans l'URL de la page de détail le numéro d'objet normalisé (object_number_normalized) et charge le bien avec lui via GET /properties/{object_number_normalized}. N'utilise jamais post_id comme identifiant, il change à chaque import.
- Fais le lien depuis la liste vers le chemin de links.frontend_url et aligne dessus la route de la page de détail.
- Si l'API répond par 404, affiche une page dédiée "Bien introuvable".

Formulaire de contact :
- Si mon site web comporte un formulaire de contact, connecte-le à POST /enquiries : avec les champs et les consentements de site.forms.enquiry, un jeton que le formulaire récupère via GET /spam/token lors de son affichage, et le numéro d'objet (object_number) du bien sous "properties".
- Affiche les erreurs de data.errors de la réponse sur les champs concernés.

Affichage des données :
- Remplace chaque champ des données d'exemple par le champ correspondant de l'API. Affiche les nombres, prix et surfaces avec "label" et "value" de l'API, ne formate pas "raw" toi-même.
- Affiche les champs de données dans l'ordre dans lequel l'API les fournit (fields.property, fields.areas, fields.prices, fields.epass, dans la liste archive et archive_prices) et omets les champs qu'un bien n'a pas. N'invente aucune valeur et ne conserve pas de données d'exemple en remplacement.
- Images issues de media.featured et media.images, chacune dans la taille adaptée de "sizes", avec le texte alternatif de "alt".
- Textes de description issus de descriptions, en HTML.
- Adresse issue de address. Si geo.exact vaut false, affiche sur la carte une zone au lieu d'un point.
- Personne de contact issue de contact.
- Titre de la page et méta-description issus de seo, les données structurées de json_ld comme <script type="application/ld+json">.

Supprime ensuite les données d'exemple du projet.

Créer un nouveau site web

Ne commencez qu’à présent avec Lovable, copiez-y le prompt suivant et remplacez https://votre-adresse-wordpress.fr par l’adresse de votre site WordPress. Décrivez avant ou après, avec vos propres mots, le design, la structure des pages et les textes.

Crée un site web pour mon agence immobilière avec une liste de biens, une page de détail par bien et un formulaire de contact. Les biens proviennent de l'API de biens de WP-ImmoMakler, décrite ici :
https://votre-adresse-wordpress.fr/wp-json/immomakler-headless/v1/llms-full.txt
Lis d'abord cette description en entier.

- Reprends le nom, le logo, les couleurs et les menus depuis GET /site.
- Charge la liste des biens via GET /search avec fields=summary, avec les filtres de site.search, et pagine avec page et total_pages. Conserve les filtres dans l'URL.
- Crée la page de détail sous le numéro d'objet normalisé (object_number_normalized) et charge le bien via GET /properties/{object_number_normalized}. Depuis la liste, crée le lien vers le chemin de links.frontend_url. N'utilise jamais post_id comme identifiant.
- Affiche les champs de données avec "label" et "value" dans l'ordre où l'API les fournit et omets les champs manquants. Images de media dans la taille adaptée de "sizes" avec le texte alternatif de "alt", textes de description de descriptions en HTML, la personne de contact depuis contact.
- Si geo.exact vaut false, affiche sur la carte une zone au lieu d'un point.
- Titre de la page et méta-description depuis seo, données structurées depuis json_ld sous forme de <script type="application/ld+json">.
- Le formulaire de contact comporte les champs de site.forms.enquiry, récupère à l'affichage un token via GET /spam/token et envoie vers POST /enquiries.

Lovable lit la description de l’interface, crée les pages et vous montre dans l’aperçu le site web avec vos vrais biens immobiliers.

Origines autorisées pour le formulaire de contact

Le formulaire de contact n’envoie que depuis des adresses connues de WP-ImmoMakler. Dans les paramètres headless, sous “Adresse de votre frontend”, saisissez l’adresse publiée de votre site Lovable. Si le formulaire doit aussi fonctionner dans l’aperçu de Lovable, saisissez en plus son adresse sous “Origines autorisées (Origins)”. Le champ n’accepte pas de caractères génériques tels que * ; chaque adresse est saisie individuellement.

Utiliser la clé d’API

Tant que vous n’exigez pas la clé d’API pour les requêtes de lecture, votre site Lovable n’a pas besoin de clé : les données des biens sont publiques, comme sur votre site WordPress.

Si vous exigez la clé, elle doit être placée dans les Secrets de votre projet Lovable (More → Settings → Secrets), par exemple sous le nom IMMOMAKLER_API_KEY. Complétez le prompt par :

L'API exige une clé d'API dans l'en-tête X-ImmoMakler-Key. Elle se trouve dans le secret IMMOMAKLER_API_KEY. Appelle donc l'API via une edge function, jamais directement depuis le navigateur.

Lovable ne met les secrets qu’à la disposition des edge functions, pas du navigateur ; voir Secrets dans la documentation de Lovable.

Vous trouverez la clé d’API dans le back end de votre site (wp-admin), sous WP-ImmoMakler → Intégrations → Headless, dans la section “Identifiants d’accès”. Ne l’écrivez jamais dans le prompt ni dans le code du site web.

Publication et moteurs de recherche

La façon dont Lovable livre vos pages aux moteurs de recherche dépend de l’ancienneté du projet. Selon la FAQ de Lovable, les projets créés à partir de mai 2026 génèrent leurs pages sur le serveur. Les projets plus anciens les génèrent dans le navigateur ; Lovable livre aux moteurs de recherche et aux robots d’IA des copies préparées à l’avance des pages publiées et propose aux projets adaptés un passage au rendu côté serveur. Vous vérifiez l’état de votre projet dans la section SEO & AI search de votre projet.

Publiez le site web sous votre propre domaine et saisissez cette adresse dans les paramètres headless sous “Adresse de votre frontend”.

Pour que les liens dans les e-mails et la redirection depuis WordPress pointent vers votre site Lovable, adaptez dans les paramètres headless “Chemin d’un bien” et “Chemin de la liste des biens” à ses adresses, par exemple /{archive_slug}/{object_number_normalized}/.