Bolt-Website mit Propstack, onOffice und Ihrer Maklersoftware verbinden

PLUS Mit Bolt beschreiben Sie Ihre Immobilien-Website im Chat, und Bolt erstellt den Code dafür. 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 Bolt-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 Bolt

Bestehende Website anbinden

Haben Sie Ihre Website mit Bolt 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 Bolt-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 Bolt, 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.

Bolt liest die Beschreibung der Schnittstelle, erzeugt die Seiten und zeigt 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 Bolt-Website ein. Soll das Formular auch in der Vorschau von Bolt 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 Bolt-Website keinen Key: Die Immobiliendaten sind öffentlich wie auf Ihrer WordPress-Website.

Verlangen Sie den Key, darf er nicht im Code stehen, der im Browser läuft. Ergänzen Sie den Prompt um:

Die API verlangt einen API-Key im Header X-ImmoMakler-Key. Lies ihn aus der Umgebungsvariable IMMOMAKLER_API_KEY und rufe die API nur von einer Server-Funktion aus auf, nie direkt aus dem Browser.

Legen Sie die Umgebungsvariable in Bolt an und, wenn Sie bei einem Hoster wie Netlify veröffentlichen, zusätzlich dort; Netlify übernimmt die Variablen aus Bolt nicht von selbst, siehe Deploy your Bolt app to Netlify.

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

Ob Suchmaschinen die Inhalte Ihrer Bolt-Website ohne JavaScript sehen, hängt davon ab, mit welchem Framework Bolt das Projekt angelegt hat und wie Sie es veröffentlichen. Bitten Sie Bolt, die Immobilienseiten serverseitig oder beim Veröffentlichen vorab zu erzeugen, und prüfen Sie mit der Seitenquelltext-Ansicht Ihres Browsers, ob Titel und Beschreibung einer Immobilie im HTML stehen. Hintergründe stehen unter Ihre KI-Website in Suchmaschinen.

Damit Links in E-Mails und die Weiterleitung von WordPress auf Ihre Bolt-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}/.