Inserate auf deiner Website einbetten

Dieser Guide bringt dich von null zu einem funktionierenden Inserats-Grid auf deiner eigenen Website — WordPress, eine statische Seite oder ein beliebiges Frontend-Framework. Du nutzt einen Publishable Key, der sicher im Browser ausgeliefert werden kann, per Origin-Allowlist an deine Domain gebunden ist, und liest die Inserate deiner Organisation über https://wohno.de/api/v1.

Welches Problem das löst: Du pflegst deine Inserate in WOHNO, möchtest sie aber auf der Marketing-Seite deiner Agentur anzeigen — automatisch synchron, ohne einen Server zu betreiben.

Voraussetzungen#

• Ein WOHNO-Konto mit mindestens einem Inserat.
• Ein Publishable Key (pk_live_…). Publishable Keys sind nur lesend und erfordern eine Origin-Allowlist — genau das macht sie sicher genug, um sie in einem Browser-Bundle preiszugeben.
• Der Scope listings:read.
• Das Feature LISTINGS_PUBLIC_API_ENABLED ist allgemein verfügbar — kein zusätzliches Flag nötig.

Nutze niemals einen Secret Key (sk_…) in Browser-Code. Secret Keys tragen write- und delete-Scopes; ihn preiszugeben würde jedem erlauben, deine Daten zu verändern.

Schritt 1 — Publishable Key mit Origin-Allowlist erstellen#

1. Öffne Dashboard → Einstellungen → API.
2. Klicke auf API-Key erstellen und wähle Publishable Key (pk_…).
3. Vergib den Scope listings:read.
4. Füge die Origins deiner Seite zur Origin-Allowlist hinzu, zum Beispiel https://www.example.com. Ein Subdomain-Wildcard wie https://*.example.com matcht genau eine Subdomain-Ebene. HTTPS ist erforderlich (außer http://localhost für lokale Tests).
5. Speichern und Key kopieren. Publishable Keys sind browser-sicher, du kannst diesen also direkt in dein Frontend einfügen.

Die Allowlist wird serverseitig durchgesetzt: Browser senden den Origin-Header automatisch, und ein Call von einer Domain, die nicht auf der Liste steht, wird mit 403 ORIGIN_NOT_ALLOWED abgelehnt. Ein pk_-Call ganz ohne Origin-Header liefert 403 ORIGIN_REQUIRED.

Schritt 2 — Inserate aus dem Browser abrufen#

Schicke ein GET an /api/v1/listings mit dem Key im X-API-Key-Header. Der Endpoint ist cursor-paginiert und akzeptiert Filter:

curl "https://wohno.de/api/v1/listings?city=Berlin&rooms_min=2&limit=12" \
  -H "X-API-Key: pk_live_xxxxxxxxxxxxxxxxxxxxxxxx" \
  -H "Origin: https://www.example.com"

Eine erfolgreiche Antwort (200):

{
  "data": [
    {
      "id": "9f1c2a3b-1111-2222-3333-444455556666",
      "title": "Bright 2-room apartment",
      "city": "Berlin",
      "zip": "10115",
      "rooms": 2,
      "rent_cold": 980,
      "property_type": "apartment",
      "status": "published"
    }
  ],
  "pagination": {
    "next_cursor": "eyJpZCI6...",
    "has_more": true,
    "limit": 12
  }
}

Verfügbare Filter sind u. a. city, zip, rooms_min, rooms_max, rent_max, property_type, wbs_only, pets und eine Freitext-Suche q. limit reicht von 1 bis 50 (Standard 20). Die vollständige Feld-Whitelist findest du in der Listings-Referenz.

Schritt 3 — Das Grid rendern (Vanilla-JS-Embed)#

Setze dieses Snippet auf eine beliebige Seite — ein WordPress-Block Eigenes HTML funktioniert genauso wie eine statische .html-Datei:

<div id="wohno-listings"></div>
<script>
  const WOHNO_PK = "pk_live_xxxxxxxxxxxxxxxxxxxxxxxx";
 
  async function loadListings() {
    const res = await fetch(
      "https://wohno.de/api/v1/listings?city=Berlin&limit=12",
      { headers: { "X-API-Key": WOHNO_PK } },
    );
 
    if (!res.ok) {
      const body = await res.json();
      console.error("WOHNO API error:", body.error.code);
      return;
    }
 
    const { data } = await res.json();
    const root = document.getElementById("wohno-listings");
    root.innerHTML = data
      .map(
        (l) => `
        <a class="wohno-card" href="https://wohno.de/inserate/${l.id}">
          <h3>${l.title}</h3>
          <p>${l.city} · ${l.rooms} rooms · ${l.rent_cold} € cold</p>
        </a>`,
      )
      .join("");
  }
 
  loadListings();
</script>

Der Browser liefert den Origin-Header automatisch, du setzt ihn also nicht in fetch — er wird vom Browser hinzugefügt und gegen deine Allowlist validiert.

Schritt 4 — Paginieren#

Um mehr zu laden, reiche den next_cursor aus der vorherigen Antwort als ?cursor= weiter, solange pagination.has_more true ist:

curl "https://wohno.de/api/v1/listings?city=Berlin&limit=12&cursor=eyJpZCI6..." \
  -H "X-API-Key: pk_live_xxxxxxxxxxxxxxxxxxxxxxxx" \
  -H "Origin: https://www.example.com"

Fehlerbehandlung#

Verzweige über den stabilen error.code, niemals über den Message-Text:

Die vollständige Fehlertabelle findest du in der Konventions-Referenz.

Best Practices#

• Antworten cachen. Inserate ändern sich langsam; der Endpoint liefert einen ETag. Sende ihn als If-None-Match zurück, um ein günstiges 304 Not Modified zu erhalten.
• Ein Key pro Seite. Binde jeden Publishable Key an eine einzige Origin, damit du ihn rotieren kannst, ohne andere Embeds zu brechen.

Nächste Schritte#

• Inserate aus deinem CRM synchronisieren — Inserate von einem Server nach WOHNO pushen.
• Authentifizierungs-Guide — Key-Typen, Origin-Allowlists und Rotation.
• API-Referenz — die vollständige listings-Feld-Whitelist.