Web de inmuebles con ChatGPT, Claude, Gemini o Cursor: conectar una existente o programar una nueva

PLUS Las herramientas de programación de ChatGPT (Codex), Claude (Claude Code) y Gemini (Gemini CLI), así como el editor Cursor, escriben un sitio web como código fuente en un proyecto de su ordenador o en un repositorio Git. A diferencia de los constructores de sitios web con IA como Lovable o Base44, aquí usted decide con qué framework se crea el sitio web y dónde se ejecuta. WP-ImmoMakler aporta los inmuebles de su software CRM, por ejemplo de Propstack, onOffice, FlowFact, JustImmo o ImmobilienScout24 (ImmoScout24), a este sitio web a través de su API REST y recibe sus solicitudes de contacto.

Conectar un proyecto existente

Si ya ha creado su sitio web con Codex, Claude Code, Gemini CLI o Cursor, normalmente solo falta la conexión con sus inmuebles. Dé a la herramienta de programación de su proyecto el siguiente prompt. Sustituye los datos de ejemplo por los inmuebles de WP-ImmoMakler, conecta el formulario de contacto y deja sin cambios el framework, el diseño y la estructura. Sustituya https://su-direccion-wordpress.es por la dirección de su sitio web de WordPress.

Mi sitio web ya muestra inmuebles, pero todavía con datos de ejemplo. Conéctalo a la API de inmuebles de WP-ImmoMakler, que se describe aquí:
https://su-direccion-wordpress.es/wp-json/immomakler-headless/v1/llms-full.txt
Lee primero esta descripción por completo.

El diseño, el maquetado y los componentes de mi sitio web permanecen sin cambios. Sustituye únicamente la fuente de datos. Si falta un listado de inmuebles o una página de detalle, créala con el estilo de las páginas existentes.

Listado de inmuebles:
- Carga los inmuebles mediante GET /search con fields=summary en lugar de usar los datos de ejemplo.
- Pagina con page y total_pages de la respuesta, en lugar de cargar todos los inmuebles de una vez.
- Si mi sitio web tiene filtros (tipo de inmueble, tipo de comercialización, localidad, precio, habitaciones, superficie), créalos a partir de GET /site (search.taxonomies, search.ranges, search.orders) y pásalos a /search como parámetros de búsqueda. Restablece el estado de los filtros a partir de "applied" en la respuesta y mantenlo en la URL, para que un listado filtrado siga siendo enlazable.
- Muestra el estado de carga, un mensaje de error y un aviso cuando ningún inmueble coincida.

Página de detalle:
- Utiliza en la URL de la página de detalle el número de objeto normalizado (object_number_normalized) y carga con él el inmueble mediante GET /properties/{object_number_normalized}. No uses nunca post_id como identificador, cambia con cada importación.
- Enlaza desde el listado a la ruta de links.frontend_url y ajusta a ella la ruta de la página de detalle.
- Si la API responde con 404, muestra una página propia de "Inmueble no encontrado".

Formulario de contacto:
- Si mi sitio web tiene un formulario de contacto, conéctalo a POST /enquiries: con los campos y consentimientos de site.forms.enquiry, un token que el formulario obtiene mediante GET /spam/token al mostrarse, y el número de objeto (object_number) del inmueble en "properties".
- Muestra los errores de data.errors de la respuesta en los campos afectados.

Mostrar los datos:
- Sustituye cada campo de los datos de ejemplo por el campo correspondiente de la API. Muestra números, precios y superficies con "label" y "value" de la API, no formatees "raw" tú mismo.
- Muestra los campos de datos en el orden en que los entrega la API (fields.property, fields.areas, fields.prices, fields.epass, en el listado archive y archive_prices) y omite los campos que un inmueble no tiene. No inventes valores ni conserves datos de ejemplo como sustituto.
- Imágenes de media.featured y media.images, cada una en el tamaño adecuado de "sizes", con el texto alternativo de "alt".
- Textos descriptivos de descriptions como HTML.
- Dirección de address. Si geo.exact es false, muestra en el mapa una zona en lugar de un punto.
- Persona de contacto de contact.
- Título de página y metadescripción de seo, los datos estructurados de json_ld como <script type="application/ld+json">.

Después, elimina los datos de ejemplo del proyecto.

Si su proyecto genera sus páginas al compilar, configure después el webhook para que se vuelva a compilar tras cada transferencia de su software CRM. Adapte además “Ruta de un inmueble” y “Ruta del listado de inmuebles” en los ajustes headless a las direcciones de su sitio web.

Libre elección del framework

La API REST de WP-ImmoMakler no exige ningún framework concreto. Haga que su sitio web se cree con el framework que usted o su agencia conozcan, por ejemplo:

• Astro, en el que se basa también nuestro Astro Starter
• Next.js (React)
• Nuxt (Vue)
• SvelteKit (Svelte)
• Eleventy o Hugo como generadores puros de páginas estáticas
• sin ningún framework, con HTML, CSS y JavaScript

Para los buscadores no importa el framework, sino dónde se crean las páginas de los inmuebles. Si se generan al compilar o en el servidor, cada página contiene ya en el HTML entregado el título, la meta descripción y los datos estructurados, y los buscadores y los servicios de búsqueda con IA la leen sin JavaScript. Si una página carga el inmueble solo en el navegador, algunos rastreadores, entre ellos los de ciertos servicios de búsqueda con IA, ven una página vacía. Sin framework, genere las páginas con un pequeño script que las escribe al compilar a partir de la interfaz.

Si su sitio web genera las páginas al compilar, debe volver a compilarse después de cada transferencia de su software CRM para que aparezcan los inmuebles nuevos y modificados. El webhook de WP-ImmoMakler avisa de qué inmuebles han cambiado y puede lanzar la compilación; cómo funciona esto en Cloudflare se explica en Ejecutar el front end en Cloudflare. Un sitio web que genera sus páginas en el servidor en cada solicitud lee de todos modos los datos actuales en cada petición.

Astro Starter bajo petición

Si le gusta trabajar con Astro, no tiene que empezar desde cero: el Astro Starter de WP-ImmoMakler es un sitio web Astro ya terminado que aprovecha por completo la API REST y que usted sigue adaptando con su herramienta de programación. Es una oferta, no un requisito: con cualquier otro framework usa la misma interfaz. La demo del Astro Starter muestra su aspecto.

El Astro Starter incluye:

• un listado de inmuebles con los filtros de su formulario de búsqueda, ordenación y vista de mapa,
• una página de detalle por inmueble con galería de imágenes, campos de datos, descripciones, persona de contacto y formulario de contacto,
• una lista de favoritos y la creación de alertas de búsqueda,
• los idiomas de su sitio web; en la demo, alemán, inglés, francés y español,
• su marca desde los ajustes headless: nombre, logotipo, colores, plantilla de diseño, tipografías y redondeo de esquinas de la sección “Astro Starter”.

Puede solicitar el Astro Starter a través de nuestro formulario de contacto.

Crear un sitio web nuevo

1. Activar la interfaz

   En el back end de su sitio web (wp-admin), en WP-ImmoMakler → Integraciones → Headless, active la interfaz, véase Configuración.

2. Crear el proyecto

   En su herramienta de programación, abra un proyecto vacío o el Astro Starter.

3. Dar el prompt

   Sustituya https://su-direccion-de-wordpress.es por la dirección de su sitio web de WordPress y Astro por el framework que prefiera, o deje la elección a la herramienta de programación:

   Crea con Astro un sitio web para mi agencia inmobiliaria: un listado de inmuebles, una página de detalle por inmueble y un formulario de contacto. Los inmuebles proceden de la API de inmuebles de WP-ImmoMakler, que se describe aquí:
   https://su-direccion-de-wordpress.es/wp-json/immomakler-headless/v1/llms-full.txt
   Lee primero esta descripción por completo.
   
   - Toma el nombre, el logotipo, los colores y los menús de GET /site.
   - Genera las páginas de detalle al compilar o en el servidor, no solo en el navegador: una página por inmueble a partir de GET /properties/manifest y GET /properties/{object_number_normalized}, en la ruta de links.frontend_url. No uses nunca post_id como identificador.
   - El listado de inmuebles carga GET /search con fields=summary y los filtros de site.search, para que los filtros funcionen sin una nueva compilación.
   - Muestra los campos de datos con "label" y "value" en el orden en que los entrega la API, las imágenes de media con srcset a partir de "sizes" y el texto alternativo de "alt", y los textos descriptivos de descriptions como HTML.
   - Si geo.exact es false, muestra en el mapa un radio en lugar de un punto.
   - Título de página y meta descripción de seo, datos estructurados de json_ld como <script type="application/ld+json">.
   - El formulario de contacto tiene los campos de site.forms.enquiry, obtiene un token mediante GET /spam/token al mostrarse y envía a POST /enquiries.

4. Publicar

   Publique el sitio web con el proveedor que prefiera, por ejemplo Cloudflare, Netlify, Vercel o su propio alojamiento web, e introduzca su dirección en los ajustes headless en “Dirección de su frontend”. Si el sitio web genera sus páginas al compilar, configure el webhook para la compilación.

5. Ajustar las direcciones

   Adapte “Ruta de un inmueble” y “Ruta del listado de inmuebles” en los ajustes headless a las direcciones de su sitio web, por ejemplo /{archive_slug}/{object_number_normalized}/.

Clave de API solo en el servidor

Si exige la clave de API para las solicitudes de lectura, haga que se lea como variable de entorno al compilar o en el servidor y no la escriba nunca en código que se ejecute en el navegador. El listado de inmuebles que busca en el navegador necesita entonces una función de servidor que reenvíe la solicitud con la clave. El formulario de contacto no necesita clave mientras se envíe desde la dirección de su front end o desde un origen permitido.

También puede interesarle

• Conectar una web con IA con su software CRM
• Ejecutar el front end en Cloudflare
• Webhook, enlaces y redirección
• Referencia de la API REST