Conectar una web de Lovable con Propstack, onOffice y su software CRM

PLUS Con Lovable usted describe su web de inmuebles en un chat y Lovable la crea. WP-ImmoMakler aporta los inmuebles de su software CRM, por ejemplo de Propstack, onOffice, FlowFact, JustImmo, ImmobilienScout24 (ImmoScout24) o de cualquier software con exportación OpenImmo, a través de una API REST. Las solicitudes de contacto de su web de Lovable las recibe y se las reenvía a sus personas de contacto y, según la configuración, a su software CRM.

Por qué este camino pasa por WordPress y no directamente por la API de su software CRM se explica en Conectar una web con IA con su software CRM.

Requisitos

WP-ImmoMakler PLUS o superior, conectado con su software CRM
La interfaz headless activada: en el back end de su sitio web (wp-admin), en WP-ImmoMakler → Integraciones → Headless, véase Configuración
Una cuenta en Lovable

Conectar un sitio web existente

Si ya ha creado su sitio web con Lovable, normalmente solo falta la conexión con sus inmuebles. Para ello no hace falta volver a crear el sitio: el siguiente prompt sustituye los datos de ejemplo por los inmuebles de WP-ImmoMakler, conecta el formulario de contacto y deja sin cambios el diseño y la estructura. Cópielo en el chat de su proyecto de Lovable y sustituya https://su-direccion-de-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-de-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.

Crear un sitio web nuevo

Empiece con Lovable solo ahora, copie en él el siguiente prompt y sustituya https://su-direccion-de-wordpress.es por la dirección de su sitio web de WordPress. El diseño, la estructura de páginas y los textos descríbalos con sus propias palabras antes o después.

Crea una web para mi agencia inmobiliaria con 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.
- Carga el listado de inmuebles mediante GET /search con fields=summary, con los filtros de site.search, y pagina con page y total_pages. Mantén los filtros en la URL.
- Crea la página de detalle con el número de objeto normalizado (object_number_normalized) y carga el inmueble mediante GET /properties/{object_number_normalized}. Enlaza desde el listado a la ruta de links.frontend_url. No uses nunca post_id como identificador.
- Muestra los campos de datos con "label" y "value" en el orden en que los entrega la API y omite los campos que falten. Imágenes de media en el tamaño adecuado de "sizes" con el texto alternativo de "alt", textos descriptivos de descriptions como HTML, la persona de contacto de contact.
- Si geo.exact es false, muestra en el mapa un área en lugar de un punto.
- Título de la 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 al mostrarse un token mediante GET /spam/token y envía a POST /enquiries.

Lovable lee la descripción de la interfaz, crea las páginas y le muestra en la vista previa el sitio web con sus inmuebles reales.

Orígenes permitidos para el formulario de contacto

El formulario de contacto solo envía desde direcciones que WP-ImmoMakler conoce. En los ajustes headless, en “Dirección de su frontend”, introduzca la dirección publicada de su web de Lovable. Si el formulario también debe funcionar en la vista previa de Lovable, introduzca además su dirección en “Orígenes permitidos (Origins)”. El campo no acepta comodines como *; cada dirección se introduce por separado.

Utilizar la clave de API

Mientras no exija la clave de API para las solicitudes de lectura, su web de Lovable no necesita ninguna clave: los datos de los inmuebles son públicos, igual que en su sitio web de WordPress.

Si exige la clave, debe ir en los Secrets de su proyecto de Lovable (More → Settings → Secrets), por ejemplo con el nombre IMMOMAKLER_API_KEY. Añada al prompt:

La API exige una clave de API en la cabecera X-ImmoMakler-Key. Está en el secreto IMMOMAKLER_API_KEY. Por eso llama a la API mediante una edge function, nunca directamente desde el navegador.

Lovable solo pone los secretos a disposición de las edge functions, no del navegador; véase Secrets en la documentación de Lovable.

La clave de API la encontrará en el back end de su sitio web (wp-admin), en WP-ImmoMakler → Integraciones → Headless, en la sección “Credenciales de acceso”. No la escriba nunca en el prompt ni en el código del sitio web.

Publicar y buscadores

Cómo entrega Lovable sus páginas a los buscadores depende de la antigüedad del proyecto. Según las preguntas frecuentes de Lovable, los proyectos creados a partir de mayo de 2026 generan sus páginas en el servidor. Los proyectos más antiguos las generan en el navegador; Lovable entrega a los buscadores y a los rastreadores de IA copias creadas por adelantado de las páginas publicadas y ofrece a los proyectos adecuados un cambio al renderizado en el servidor. El estado de su proyecto lo comprueba en la sección SEO & AI search de su proyecto.

Publique el sitio web con su propio dominio e introduzca esta dirección en los ajustes headless, en “Dirección de su frontend”.

Para que los enlaces en los correos electrónicos y la redirección desde WordPress apunten a su web de Lovable, adapte en los ajustes headless “Ruta de un inmueble” y “Ruta del listado de inmuebles” a sus direcciones, por ejemplo /{archive_slug}/{object_number_normalized}/.