So funktioniert die Bewerbungsseite für die Wohnungssuche

Online speichern: Kurzlink statt langem Link

Der Link-Modus hat zwei Nachteile: Links mit vielen Texten werden lang, und Fotos müssen schon irgendwo im Netz liegen. Deshalb gibt es einen zweiten Modus. Im Baukasten speicherst du die Seite auf Wunsch online und bekommst eine kurze Adresse wie https://d-solve.de/apartment-search/k7m2p9q4r6t8. Inhalt, Aufbau und Parameter sind gleich, auch Aushang (/<id>/aushang/) und Mietunterlagen (/<id>/mietunterlagen/) laufen unter dem Kurzlink. Du entscheidest pro Seite, welchen Modus du nimmst.

So schaltest du um

1. Im Baukasten steht oben in der Seitenleiste der Umschalter „Nur im Link (privat, nichts gespeichert)“ / „Online speichern (kurzer Link)“. Der Link-Modus ist voreingestellt, deine Wahl merkt sich der Browser.
2. Im Online-Modus wählst du die Speicherfrist und klickst „Online speichern“. Danach siehst du den Kurzlink zum Kopieren und Öffnen, den QR-Code zum Kurzlink und, einmalig, den Bearbeitungsschlüssel.
3. Änderungen im Baukasten werden danach alle 30 Sekunden gespeichert; außerdem gibt es „Jetzt speichern“, „Frist ändern“, „Seite löschen“ und „Neuen Schlüssel erzeugen“.
4. Fotos lädst du im Bild-Editor oder in der Foto-Liste der Karte hoch. Das funktioniert, sobald die Seite einmal gespeichert ist.
5. Eine vorhandene Seite öffnest du später über „Vorhandene Seite laden“ mit Kurzlink (oder ID) und Schlüssel. Ohne Schlüssel kannst du sie ansehen und lokal als Vorlage für eine neue Seite verwenden.

Ist der Dienst gerade nicht erreichbar (zum Beispiel bei einer Kopie ohne Backend), zeigt der Baukasten „Online-Speicherung ist hier nicht verfügbar“. Der Link-Modus funktioniert dann wie immer.

Was gespeichert wird und wo

• Gespeichert werden genau die Parameter der Seite als Text (die Werte, die sonst im Link stünden) und die hochgeladenen Fotos. Dazu je Seite ein Pseudonym der Absender-Adresse (ein Hash, nicht die IP selbst), nur für die Tageslimits. Keine Besucherdaten, keine Zugriffsstatistik.
• Wo: bei Cloudflare, die Daten in einer Datenbank, die Fotos in einem Objektspeicher, betrieben für d-solve.de.
• Löschung: Nach Ablauf der Speicherfrist wird die Seite nicht mehr ausgeliefert und täglich samt Fotos gelöscht. „Seite löschen“ im Baukasten löscht sofort.
• Grenzen: Fotos je Seite, Textmenge, neue Seiten je Tag und Speicherfrist sind begrenzt. Die aktuellen Werte liefert GET /api/limits, erklärt in der API-Dokumentation.
• Wer den Link hat, sieht die Seite. Die Kurz-ID ist zufällig und nicht erratbar, aber der Inhalt, auch E-Mail und Telefonnummer, ist für jeden lesbar, dem du den Link gibst.

Der Bearbeitungsschlüssel

Der Bearbeitungsschlüssel (as_…) wird nur ein einziges Mal angezeigt. Auf dem Server liegt nur sein Hash; er kann nicht wiederhergestellt werden. Kopiere ihn in einen Passwortmanager oder eine Notiz. Der Baukasten kann ihn auf Wunsch in diesem Browser merken („In diesem Browser merken“). Wer den Schlüssel verliert, kann die Seite nicht mehr ändern oder löschen; sie läuft dann nach der Frist ab. Gib den Schlüssel nie weiter und schreibe ihn in keinen Link.

Für Entwickler und KI

Der Baukasten spricht eine offene HTTP-Schnittstelle. Wer Seiten per Skript oder KI-Assistent anlegen will, findet Endpunkte, Grenzen, Fehlercodes und curl-Beispiele in der API-Dokumentation (maschinenlesbar: openapi.json).

Loslegen

Drei Wege zum fertigen Link, alle mit demselben Ergebnis:

1. Baukasten: in der Vorschau auf einen Text oder ein Bild klicken und direkt ändern. Dazu QR-Code, Sprachen, Farbe und Reihenfolge.
2. KI-Assistent: Im Baukasten steht ein Prompt zum Kopieren für ChatGPT, Claude oder Gemini. Die KI fragt dich nach Stadt, Personen, Eckdaten und Foto-Links und gibt dir den fertigen Link.
3. Von Hand: die Parameter unten selbst an die Adresse hängen.

Alle Parameter

Jeder Parameter ist optional. Fehlt er oder ist er leer, steht dort ein eingebauter Beispieltext. Ein einzelner Bindestrich - blendet ein Feld aus. Jedes Beispiel unten ist ein funktionierender Link: öffnen und ansehen.

Texte gelten je Sprache: headline.de nur auf Deutsch, headline.en nur auf Englisch, headline ohne Suffix in allen Sprachen. Wer nur eine Sprache will, setzt langs=de und lässt die Suffixe weg.

Kacheln: Sobald irgendein p-Parameter gesetzt ist, verschwindet die eingebaute Beispielfamilie komplett. Sonst würde ein Hund den Lebenslauf einer fremden Person erben. Eine Kachel braucht nichts außer einem Emoji; deshalb funktionieren Kinder und Haustiere ohne Foto und Namen. Bis zu 24 Kacheln.

Schreibweise der Werte

• Liste (badges, must, nice, districts, docs): Einträge mit Semikolon trennen, 3 Zimmer; Balkon; Aufzug.
• Paare (facts, btns, p1facts…): Links | Rechts, mehrere mit Semikolon. Getrennt wird am ersten |, ein zweites darf im Wert stehen.
• Fotos (p1photo…): mehrere Bild-Links mit | trennen. Nicht mit Semikolon, denn eine data:image/webp;base64,…-Adresse enthält selbst eins.
• Freitext (intro): \n oder ein echter Zeilenumbruch bricht die Zeile, eine Zeile mit - am Anfang wird Aufzählungspunkt, *Text* wird kursiv.
• Alles andere erscheint genau so, wie es geschrieben ist. HTML wird nie ausgeführt.

Kodierung im Link

Werte müssen URL-kodiert sein: Leerzeichen %20 oder +, & %26, = %3D, ? %3F, # %23, + %2B, ; %3B, | %7C, Zeilenumbruch %0A, Umlaute und Emoji als UTF-8 (ö → %C3%B6). Auch ein Bild-Link ist ein Wert und wird komplett kodiert. In JavaScript erledigt das encodeURIComponent(); Baukasten und KI-Prompt übernehmen es für dich.

Woher ein Wert kommt

Vier Ebenen, die erste nicht-leere gewinnt:

?key.<sprache>   →   ?key   →   config.js   →   eingebauter Standard

Ein Beispiel von Hand

https://d-solve.de/projects/apartment-search/?langs=de&loc=K%C3%B6ln
  &headline=Familie%20sucht%20Wohnung
  &badges=3%E2%80%934%20Zimmer%3B%20bis%201.800%20%E2%82%AC%3B%20ein%20Hund
  &people=1&p1emoji=%F0%9F%90%95&p1name=Nala
  &p1facts=%F0%9F%A6%B4%7Cstubenrein%3B%20%F0%9F%8E%BE%7Cliebt%20Spazierg%C3%A4nge
  &email=wohnung%40example.com&phone=%2B49%20151%201234567

(Zeilenumbrüche nur zur Lesbarkeit; im echten Link steht alles in einer Zeile.)

Fotos verlinken

Ein Foto auf dem Handy hat keine Adresse; es muss erst irgendwo öffentlich liegen. Die eine Regel: Der Link zeigt direkt auf die Bilddatei, beginnt mit https:// und funktioniert ohne Anmeldung. Test: im privaten Fenster öffnen. Siehst du nur das nackte Bild, passt es.

• Google Drive: Freigabe auf „Jeder, der über den Link verfügt“. Der Baukasten schreibt einen Freigabe-Link selbst um; von Hand lautet er https://drive.google.com/thumbnail?id=DATEI_ID&sz=w1000. Der oft empfohlene uc?export=view-Link sieht im eigenen Tab gut aus und bleibt in einer fremden Seite leer, weil Google ihn mit cross-origin-resource-policy: same-site ausliefert.
• Wikimedia Commons: Rechtsklick aufs Bild, „Grafikadresse kopieren“ (upload.wikimedia.org/…).
• Bild-Hoster und eigene Website: Imgur (i.imgur.com/…), der eigene Webspace oder Netlify Drop.
• Geht nie: Google-Fotos- und iCloud-Freigaben (Album-Seiten, keine Dateien), alles hinter einer Anmeldung, http:// ohne s.
• Im Link selbst: als data:image/webp;base64,…. Nichts wird hochgeladen, aber jedes Bild macht den Link um tausende Zeichen länger, und der QR-Code passt dann nicht mehr.

QR-Code

Der Baukasten erzeugt den QR-Code im Browser; der Link verlässt deinen Rechner dafür nicht. customize/qr.js ist ein vollständiger Encoder ohne Abhängigkeiten (Byte-Modus, Version 1–40, Fehlerkorrektur L/M/Q/H), herunterladbar als PNG und SVG. Die Obergrenze liegt bei rund 2 950 Zeichen. Eine übliche einsprachige Seite liegt deutlich darunter, eine voll ausgefüllte zweisprachige darüber. Dann meldet der Baukasten das, statt einen unbrauchbaren Code zu zeigen.

Aushang

Derselbe Link ergibt auch einen Aushang zum Ausdrucken: Foto, Überschrift, zwei kurze Listen, QR-Code zur Bewerbungsseite und Abreißzettel mit Telefon und E-Mail. Dafür kommt aushang/ vor die Parameter: https://d-solve.de/projects/apartment-search/aushang/?…. Im Baukasten führt der Knopf „Aushang erstellen“ genau dorthin.

• PDF: „Drucken / als PDF speichern“ nutzt den Druckdialog des Browsers; das Blatt ist auf A4 gesetzt.
• Ändern: Texte auf dem Blatt anklicken. Änderungen landen als poster…-Parameter im Link des Aushangs; die Bewerbungsseite ignoriert sie.
• Word: „Word-Datei herunterladen“ füllt die Vorlage aushang/vorlage.docx im Browser aus, inklusive Foto und QR-Code. Die leere Vorlage enthält Platzhalter wie {posterhead}.
• QR-Code: Lange Links passen nicht in einen QR-Code (siehe oben). Dann einen Kurzlink in posterlink eintragen oder den QR-Code mit posterqr=- ausblenden.
• Foto in Word: Das Foto wird nur übernommen, wenn sein Server das erlaubt (Wikimedia ja, viele andere nicht). Sonst bleibt ein Platzhalter, den du in Word per „Bild ändern“ ersetzt.

Mietunterlagen und Selbstauskunft

Unter mietunterlagen/ wird derselbe Link zur Mieter-Selbstauskunft: Namen, Rollen, Kontakt und Stadt kommen aus der Seite. Dazu gibt es Ausweis, Gehaltsnachweise, SCHUFA-Auskunft und Vorvermieterbescheinigung als Anhänge, und alles wird zu einem PDF mit Deckblatt und Inhaltsverzeichnis. Word-Vorlagen (Mietunterlagen, Selbstauskunft, Vorvermieterbescheinigung, Übergabeprotokoll) gibt es vorausgefüllt oder leer.

Datenschutz: Geburtsdatum, Einkommen und Co. stehen nicht im Query-String, sondern hinter dem #. Dieser Teil einer Adresse wird nie an einen Server übertragen, auch nicht an d-solve.de. Hochgeladene Dateien liest nur der Browser; das PDF entsteht mit pdf-lib lokal. Die Form ist also: …/mietunterlagen/?<Parameter der Seite>#<Angaben unten>.

Rund um die Suche, vom Aushang bis zur Wohnungsgeberbestätigung, führt der Ratgeber.

Selbst hosten

Das Projekt ist ein Ordner statischer Dateien: kein Build-Schritt, kein Backend, keine externen Abhängigkeiten (JSZip und pdf-lib liegen bei), keine Webfonts, kein Tracking. Die Seiten stellen keine einzige externe Anfrage. Ordner auf einen beliebigen statischen Hoster kopieren (Cloudflare Pages, Netlify Drop, GitHub Pages, nginx, Apache), fertig. Der Baukasten leitet seine Basis-URL aus der eigenen Adresse ab und baut Links für die eigene Kopie.

Der Online-Modus ist die einzige Funktion mit Backend: ein Cloudflare Worker mit Datenbank und Bildspeicher. Er liegt im Repository unter workers/apartment-search-api; Einrichtung, Grenzen (config.json) und Tests stehen in dessen README.md. Ohne Worker bleibt der Online-Modus im Baukasten verborgen; wer ihn auch bei vorhandenem Worker abschalten will, setzt in config.js window.APARTMENT_CLOUD = {}.

apartment-search/
├── index.html          Grundgerüst: Meta-Tags, #root, zwei Skripte
├── app.js              liest den Link, baut die Seite (reines DOM)
├── styles.css          alle Styles
├── config.js           optionale feste Werte für eine Kopie
├── demo.js, demo/      das Beispiel (für alle Werkzeuge) und seine kurze Adresse
├── docs/               diese Seite
├── favicon.svg, og-image.png
├── llms.txt            vollständige Anleitung für KI-Agenten: Parameter, API, MCP
├── customize/          der Baukasten: index.html, editor.js, cloud.js, qr.js
├── api/                API-Dokumentation für den Online-Modus (Seite für Menschen und KI)
├── aushang/            der Aushang: index.html, aushang.js, vorlage.docx, jszip.min.js
├── mietunterlagen/     Selbstauskunft und Unterlagen: forms.js, pdf.js, docx.js, pdf-lib.min.js
└── ratgeber/           Überblick über die ganze Wohnungssuche

Zum lokalen Testen im Ordner python3 -m http.server 8000 starten und http://localhost:8000/customize/ öffnen.

Feste Werte in config.js

Die Schlüssel heißen genau wie die Parameter, samt Sprachsuffix. Für eine einzelne feste Seite ohne lange Adresse:

window.SITE_CONFIG = {
  langs: "de",
  email: "[email protected]",
  phone: "+49 151 1234567",
  accent: "#2f7a4d",
  loc: "Köln",
  headline: "Wir suchen ein Zuhause in Köln",
  people: "2",
  p1name: "Aylin", p1role: "Ärztin",
  p2name: "Nala", p2emoji: "🐕",
};

Viele Seiten mit kurzen Adressen

Alles bleibt statisch; nur config.js wird je Adresse von einem eigenen Backend erzeugt, zum Beispiel mit Express:

app.use("/w/:slug", express.static("apartment-search"));
app.get("/w/:slug/config.js", async (req, res) => {
  const page = await db.pages.findBySlug(req.params.slug);
  if (!page) return res.status(404).end();
  res.type("text/javascript").send("window.SITE_CONFIG = " + JSON.stringify(page.params) + ";");
});

Sicherheit

Jeder Wert aus dem Link wird vor der Ausgabe escaped; *kursiv* und Zeilenumbrüche werden erst danach zu Markup. Links in href und src lassen nur https, http, mailto, tel, data:image und relative Pfade durch. Wer app.js ändert, behält diese Reihenfolge bei.

Rechtliches

Die Fußzeile nennt d-solve.de und verlinkt standardmäßig dessen Impressum und Datenschutzerklärung. Beide Ziele sind über imprint und privacy frei setzbar und mit - abschaltbar. Für eine rein private Wohnungssuche ohne geschäftlichen Zweck besteht keine Impressumspflicht nach § 5 DDG.

Eine eigene Datenschutzerklärung braucht die ausgelieferte Seite im Link-Modus nicht zwingend: Sie lädt nichts nach, setzt keine Cookies und überträgt nichts. Was an personenbezogenen Daten im Link steht, hat der Absender selbst hineingeschrieben und selbst verschickt. Fotos von anderen Seiten lädt der Browser der Empfänger direkt von dort. Bei einer online gespeicherten Seite liegen die Daten dagegen auf einem Server; dafür gilt die Datenschutzerklärung des jeweiligen Betreibers.

Fotos im Beispiel, alle von Wikimedia Commons: Denkmal der Bremer Stadtmusikanten (Gerhard Marcks), fotografiert von Dietmar Rabich (CC BY-SA 4.0); Esel von Lilly M (CC BY-SA 3.0); Hund von Reba Spike (CC BY 2.0); Katzen von George Chernilevsky (gemeinfrei) und Alvesgaspar (CC BY-SA 3.0); Hahn von Frank Schulenburg (CC BY-SA 4.0).