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

PLUS Con Bolt usted describe su web de inmuebles en un chat y Bolt crea el código correspondiente. 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 Bolt 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 Bolt

Conectar un sitio web existente

Si ya ha creado su sitio web con Bolt, 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 Bolt 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 Bolt 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.

Bolt lee la descripción de la interfaz, genera las páginas y 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 Bolt. Si el formulario también debe funcionar en la vista previa de Bolt, 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 Bolt no necesita ninguna clave: los datos de los inmuebles son públicos, igual que en su sitio web de WordPress.

Si exige la clave, esta no puede estar en el código que se ejecuta en el navegador. Añada al prompt:

La API exige una clave de API en la cabecera X-ImmoMakler-Key. Léela de la variable de entorno IMMOMAKLER_API_KEY y llama a la API solo desde una función de servidor, nunca directamente desde el navegador.

Cree la variable de entorno en Bolt y, si publica en un hosting como Netlify, también allí; Netlify no toma por sí mismo las variables de Bolt, véase Deploy your Bolt app to Netlify.

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

Que los buscadores vean los contenidos de su web de Bolt sin JavaScript depende del framework con el que Bolt haya creado el proyecto y de cómo lo publique. Pida a Bolt que genere las páginas de los inmuebles en el servidor o por adelantado al publicar, y compruebe con la vista del código fuente de la página en su navegador si el título y la descripción de un inmueble figuran en el HTML. Encontrará los antecedentes en Su sitio web con IA en los buscadores.

Para que los enlaces en los correos electrónicos y la redirección desde WordPress apunten a su web de Bolt, 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}/.