Lovable-Website mit Propstack, onOffice und Ihrer Maklersoftware verbinden

PLUS Mit Lovable beschreiben Sie Ihre Immobilien-Website im Chat, und Lovable erstellt sie. WP-ImmoMakler liefert dafür die Immobilien aus Ihrer Maklersoftware, etwa aus Propstack, onOffice, FlowFact, JustImmo, ImmobilienScout24 (ImmoScout24) oder jeder Software mit OpenImmo-Export, über eine REST API. Kontaktanfragen aus Ihrer Lovable-Website nimmt es entgegen und leitet sie an Ihre Kontaktpersonen und, je nach Einrichtung, an Ihre Maklersoftware weiter.

Warum dieser Weg über WordPress führt und nicht direkt zur API Ihrer Maklersoftware, steht unter KI-Website mit Ihrer Maklersoftware verbinden.

Voraussetzungen

WP-ImmoMakler PLUS oder höher, verbunden mit Ihrer Maklersoftware
Die eingeschaltete Headless-Schnittstelle: im Backend Ihrer Website (wp-admin) unter WP-ImmoMakler → Integrationen → Headless, siehe Einrichtung
Ein Konto bei Lovable

Bestehende Website anbinden

Haben Sie Ihre Website mit Lovable bereits erstellt, fehlt meist nur noch die Verbindung zu Ihren Immobilien. Ihre Website muss dafür nicht neu gebaut werden: Der folgende Prompt ersetzt die Beispieldaten durch die Immobilien aus WP-ImmoMakler, schließt das Kontaktformular an und lässt Gestaltung und Aufbau unverändert. Kopieren Sie ihn in den Chat Ihres Lovable-Projekts und ersetzen Sie https://ihre-wordpress-adresse.de durch die Adresse Ihrer WordPress-Website.

Meine Website zeigt bereits Immobilien, aber noch mit Beispieldaten. Verbinde sie mit der Immobilien-API von WP-ImmoMakler, die hier beschrieben ist:
https://ihre-wordpress-adresse.de/wp-json/immomakler-headless/v1/llms-full.txt
Lies diese Beschreibung zuerst vollständig.

Gestaltung, Layout und Komponenten meiner Website bleiben unverändert. Ersetze nur die Datenquelle. Fehlt eine Immobilienliste oder Detailseite, lege sie im Stil der vorhandenen Seiten an.

Immobilienliste:
- Lade die Immobilien über GET /search mit fields=summary statt aus den Beispieldaten.
- Blättere über page und total_pages aus der Antwort, statt alle Immobilien auf einmal zu laden.
- Hat meine Website Filter (Objektart, Vermarktungsart, Ort, Preis, Zimmer, Fläche), baue sie aus GET /site (search.taxonomies, search.ranges, search.orders) und übergib sie als Suchparameter an /search. Stelle den Zustand der Filter aus "applied" in der Antwort her und halte ihn in der URL, damit eine gefilterte Liste verlinkbar bleibt.
- Zeige Ladezustand, Fehlermeldung und einen Hinweis, wenn keine Immobilie passt.

Detailseite:
- Verwende in der URL der Detailseite die normalisierte Objektnummer (object_number_normalized) und lade die Immobilie damit über GET /properties/{object_number_normalized}. Verwende nie post_id als Kennung, sie ändert sich bei jedem Import.
- Verlinke aus der Liste auf den Pfad aus links.frontend_url und richte die Route der Detailseite danach aus.
- Antwortet die API mit 404, zeige eine eigene "Immobilie nicht gefunden"-Seite.

Kontaktformular:
- Hat meine Website ein Kontaktformular, schließe es an POST /enquiries an: mit den Feldern und Zustimmungen aus site.forms.enquiry, einem Token, das das Formular beim Anzeigen über GET /spam/token holt, und der Objektnummer (object_number) der Immobilie unter "properties".
- Zeige die Fehler aus data.errors der Antwort an den betroffenen Feldern.

Daten darstellen:
- Ersetze jedes Feld der Beispieldaten durch das passende Feld der API. Zeige Zahlen, Preise und Flächen mit "label" und "value" aus der API, formatiere "raw" nicht selbst.
- Zeige die Datenfelder in der Reihenfolge, in der die API sie liefert (fields.property, fields.areas, fields.prices, fields.epass, in der Liste archive und archive_prices), und lasse Felder weg, die eine Immobilie nicht hat. Erfinde keine Werte und behalte keine Beispieldaten als Ersatz.
- Bilder aus media.featured und media.images, jeweils in der passenden Größe aus "sizes", mit dem Alternativtext aus "alt".
- Beschreibungstexte aus descriptions als HTML.
- Adresse aus address. Ist geo.exact false, zeige auf der Karte einen Umkreis statt eines Punkts.
- Ansprechpartner aus contact.
- Seitentitel und Meta-Beschreibung aus seo, die strukturierten Daten aus json_ld als <script type="application/ld+json">.

Entferne die Beispieldaten anschließend aus dem Projekt.

Neue Website erstellen

Beginnen Sie erst jetzt mit Lovable, kopieren Sie den folgenden Prompt hinein und ersetzen Sie https://ihre-wordpress-adresse.de durch die Adresse Ihrer WordPress-Website. Gestaltung, Seitenaufbau und Texte beschreiben Sie davor oder danach in eigenen Worten.

Erstelle eine Website für mein Immobilienbüro mit einer Immobilienliste, einer Detailseite je Immobilie und einem Kontaktformular. Die Immobilien kommen aus der Immobilien-API von WP-ImmoMakler, die hier beschrieben ist:
https://ihre-wordpress-adresse.de/wp-json/immomakler-headless/v1/llms-full.txt
Lies diese Beschreibung zuerst vollständig.

- Übernimm Name, Logo, Farben und Menüs aus GET /site.
- Lade die Immobilienliste über GET /search mit fields=summary, mit den Filtern aus site.search, und blättere über page und total_pages. Halte die Filter in der URL.
- Lege die Detailseite unter der normalisierten Objektnummer (object_number_normalized) an und lade die Immobilie über GET /properties/{object_number_normalized}. Verlinke aus der Liste auf den Pfad aus links.frontend_url. Verwende nie post_id als Kennung.
- Zeige die Datenfelder mit "label" und "value" in der Reihenfolge, in der die API sie liefert, und lasse fehlende Felder weg. Bilder aus media in der passenden Größe aus "sizes" mit dem Alternativtext aus "alt", Beschreibungstexte aus descriptions als HTML, den Ansprechpartner aus contact.
- Ist geo.exact false, zeige auf der Karte einen Umkreis statt eines Punkts.
- Seitentitel und Meta-Beschreibung aus seo, strukturierte Daten aus json_ld als <script type="application/ld+json">.
- Das Kontaktformular hat die Felder aus site.forms.enquiry, holt beim Anzeigen ein Token über GET /spam/token und sendet an POST /enquiries.

Lovable liest die Beschreibung der Schnittstelle, legt die Seiten an und zeigt Ihnen die Website mit Ihren echten Immobilien in der Vorschau.

Erlaubte Ursprünge für das Kontaktformular

Das Kontaktformular sendet nur von Adressen, die WP-ImmoMakler kennt. Tragen Sie in den Headless-Einstellungen unter “Adresse Ihres Frontends” die veröffentlichte Adresse Ihrer Lovable-Website ein. Soll das Formular auch in der Vorschau von Lovable funktionieren, tragen Sie deren Adresse zusätzlich unter “Erlaubte Ursprünge (Origins)” ein. Platzhalter wie * nimmt das Feld nicht an, jede Adresse wird einzeln eingetragen.

API-Key verwenden

Solange Sie den API-Key für lesende Anfragen nicht verlangen, braucht Ihre Lovable-Website keinen Key: Die Immobiliendaten sind öffentlich wie auf Ihrer WordPress-Website.

Verlangen Sie den Key, gehört er in die Secrets Ihres Lovable-Projekts (More → Settings → Secrets), zum Beispiel unter dem Namen IMMOMAKLER_API_KEY. Ergänzen Sie den Prompt um:

Die API verlangt einen API-Key im Header X-ImmoMakler-Key. Er liegt im Secret IMMOMAKLER_API_KEY. Rufe die API deshalb über eine Edge Function auf, nie direkt aus dem Browser.

Lovable stellt Secrets nur den Edge Functions bereit, nicht dem Browser; siehe Secrets in der Dokumentation von Lovable.

Den API-Key finden Sie im Backend Ihrer Website (wp-admin) unter WP-ImmoMakler → Integrationen → Headless im Abschnitt “Zugangsdaten”. Schreiben Sie ihn nie in den Prompt oder in den Code der Website.

Veröffentlichen und Suchmaschinen

Wie Lovable Ihre Seiten an Suchmaschinen ausliefert, hängt vom Alter des Projekts ab. Laut der Lovable-FAQ erzeugen Projekte, die ab Mai 2026 angelegt wurden, ihre Seiten auf dem Server. Ältere Projekte erzeugen sie im Browser; Lovable liefert Suchmaschinen und KI-Crawlern von den veröffentlichten Seiten vorab erstellte Kopien und bietet für geeignete Projekte einen Umstieg auf das serverseitige Rendering an. Den Stand Ihres Projekts prüfen Sie im Bereich SEO & AI search Ihres Projekts.

Veröffentlichen Sie die Website unter Ihrer eigenen Domain und tragen Sie diese Adresse in den Headless-Einstellungen unter “Adresse Ihres Frontends” ein.

Damit Links in E-Mails und die Weiterleitung von WordPress auf Ihre Lovable-Website zeigen, passen Sie in den Headless-Einstellungen “Pfad einer Immobilie” und “Pfad der Immobilienliste” an deren Adressen an, zum Beispiel /{archive_slug}/{object_number_normalized}/.