Site web immobilier avec ChatGPT, Claude, Gemini ou Cursor : connecter un site existant ou en programmer un nouveau

PLUS Les outils de programmation de ChatGPT (Codex), Claude (Claude Code) et Gemini (Gemini CLI), ainsi que l’éditeur Cursor, écrivent un site web sous forme de code source dans un projet sur votre ordinateur ou dans un dépôt Git. Contrairement aux créateurs de sites web avec IA comme Lovable ou Base44, vous décidez vous-même avec quel framework le site web est construit et où il fonctionne. WP-ImmoMakler fournit les biens immobiliers de votre logiciel CRM, par exemple de Propstack, onOffice, FlowFact, JustImmo ou ImmobilienScout24 (ImmoScout24), à ce site web via son API REST et réceptionne ses demandes de contact.

Connecter un projet existant

Si vous avez déjà créé votre site web avec Codex, Claude Code, Gemini CLI ou Cursor, il ne manque généralement plus que la connexion à vos biens immobiliers. Donnez à l’outil de programmation de votre projet le prompt suivant. Il remplace les données d’exemple par les biens de WP-ImmoMakler, connecte le formulaire de contact et laisse inchangés le framework, le design et la structure. 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.

Si votre projet génère ses pages lors de la compilation, configurez ensuite le webhook afin qu’il soit recompilé après chaque transfert de votre logiciel CRM. Adaptez en outre “Chemin d’un bien” et “Chemin de la liste des biens” dans les paramètres headless aux adresses de votre site.

Libre choix du framework

L’API REST de WP-ImmoMakler n’impose aucun framework particulier. Faites construire votre site web avec le framework que vous ou votre agence connaissez, par exemple :

Astro, sur lequel repose aussi notre Astro Starter
Next.js (React)
Nuxt (Vue)
SvelteKit (Svelte)
Eleventy ou Hugo comme purs générateurs de pages statiques
sans aucun framework, avec HTML, CSS et JavaScript

Pour les moteurs de recherche, le framework importe peu ; ce qui compte, c’est l’endroit où les pages des biens sont créées. Si elles sont générées lors de la construction ou sur le serveur, chaque page contient déjà dans le HTML livré le titre, la méta-description et les données structurées, et les moteurs de recherche comme les services de recherche par IA la lisent sans JavaScript. Si une page ne charge le bien que dans le navigateur, certains robots d’exploration, dont ceux de certains services de recherche par IA, ne voient qu’une page vide. Sans framework, générez les pages avec un petit script qui les écrit lors de la construction à partir de l’interface.

Si votre site web génère les pages lors de la construction, il doit être reconstruit après chaque transfert de votre logiciel CRM pour que les biens nouveaux et modifiés apparaissent. Le webhook de WP-ImmoMakler indique quels biens ont changé et peut déclencher la construction ; le fonctionnement chez Cloudflare est décrit sous Exploiter le front end chez Cloudflare. Un site web qui génère ses pages sur le serveur à chaque requête lit de toute façon les données actuelles à chaque appel.

Astro Starter sur demande

Si vous aimez travailler avec Astro, vous n’avez pas à partir de zéro : l’Astro Starter de WP-ImmoMakler est un site web Astro prêt à l’emploi qui exploite déjà pleinement l’API REST et que vous continuez à adapter avec votre outil de programmation. C’est une offre, pas une condition : avec tout autre framework, vous utilisez la même interface. La démo de l’Astro Starter montre à quoi il ressemble.

Page d'accueil de l'Astro Starter avec un titre et les biens les plus récents

L’Astro Starter comprend :

une liste de biens avec les filtres de votre formulaire de recherche, le tri et une vue carte,
une page de détail par bien avec galerie d’images, champs de données, descriptions, personne de contact et formulaire de contact,
une liste de favoris et la création d’alertes de recherche,
les langues de votre site web, dans la démo l’allemand, l’anglais, le français et l’espagnol,
votre identité visuelle issue des réglages headless : nom, logo, couleurs, modèle de design, polices et arrondi des coins dans la section “Astro Starter”.

Liste de biens de l'Astro Starter avec filtres pour le lieu, le type de commercialisation, le type d'utilisation, le type de bien et le tri

Page de détail d'un bien dans l'Astro Starter avec titre, adresse et galerie d'images

Vous recevez l’Astro Starter sur demande via notre formulaire de contact.

Créer un nouveau site web

Activer l’interface

Dans le back end de votre site (wp-admin), sous WP-ImmoMakler → Intégrations → Headless, activez l’interface, voir Configuration.
Créer le projet

Dans votre outil de programmation, ouvrez un projet vide ou l’Astro Starter.

Donner le prompt

Remplacez https://votre-adresse-wordpress.fr par l’adresse de votre site WordPress et Astro par le framework de votre choix, ou laissez le choix à l’outil de programmation :

Crée avec Astro un site web pour mon agence immobilière : 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.
- Génère les pages de détail lors de la construction ou sur le serveur, pas seulement dans le navigateur : une page par bien à partir de GET /properties/manifest et GET /properties/{object_number_normalized}, sous le chemin de links.frontend_url. N'utilise jamais post_id comme identifiant.
- La liste de biens charge GET /search avec fields=summary et les filtres de site.search, afin que les filtres fonctionnent sans nouvelle construction.
- Affiche les champs de données avec "label" et "value" dans l'ordre où l'API les fournit, les images de media avec srcset à partir de "sizes" et le texte alternatif de "alt", les textes de description de descriptions en HTML.
- Si geo.exact vaut false, affiche sur la carte un rayon plutôt qu'un point.
- Titre de page et méta-description depuis seo, données structurées depuis json_ld sous la forme <script type="application/ld+json">.
- Le formulaire de contact a les champs de site.forms.enquiry, récupère un token via GET /spam/token à l'affichage et envoie vers POST /enquiries.

Publier

Publiez le site web chez l’hébergeur de votre choix, par exemple Cloudflare, Netlify, Vercel ou votre propre hébergement web, et saisissez son adresse dans les réglages headless sous “Adresse de votre frontend”. Si le site web génère ses pages lors de la construction, configurez le webhook pour la construction.
Faire concorder les adresses

Adaptez “Chemin d’un bien” et “Chemin de la liste des biens” dans les réglages headless aux adresses de votre site web, par exemple /{archive_slug}/{object_number_normalized}/.