# News-Pinnwand auf der Kundenwebsite einbauen

Anleitung für das WEBklar-Team. Die Pinnwand zeigt die Beiträge, die der Kunde im Portal (Tab „Funktionen“) schreibt. Den `siteKey` findest Du im Portal-Admin beim Projekt (16 Zeichen, a–z und 2–7).

## 1. Die Stelle auf der Seite

```html
<div data-webklar-news="SITEKEY" data-api="https://project.webklar.com">
  <!-- statischer Leerzustand, siehe unten -->
</div>
```

- `data-webklar-news`: der siteKey des Projekts (Pflicht).
- `data-api`: Herkunft des Portals. Ohne Angabe nimmt das Skript die Herkunft aus der Adresse des Skripts.
- `data-signature` (optional): Unterschrift unter jedem Zettel, z. B. `data-signature="Opa Martin"`. Ohne Attribut gibt es keine Unterschrift.

## 2. Das Skript (einmal pro Seite, vor `</body>`)

```html
<script src="https://project.webklar.com/embed/news.js" defer></script>
```

Keine Abhängigkeiten, keine Cookies, kein Browser-Speicher. Kundentexte werden nur als Text eingesetzt, nie als HTML. Das Skript wird 5 Minuten gecacht und darf von jeder Domain geladen werden.

## 3. Statischer Leerzustand

Alles, was im `div` steht, gehört der Kundenwebsite. Das Skript ersetzt es nur, wenn die API mindestens einen Beitrag liefert. Bei 0 Beiträgen, Fehler, ausgeschaltetem JavaScript oder unbekanntem Schlüssel bleibt es stehen. Beispiel:

```html
<div data-webklar-news="SITEKEY" data-api="https://project.webklar.com">
  <h3>Hier hängt bald was Neues.</h3>
  <p>Neuigkeiten findest Du bald an dieser Pinnwand.</p>
</div>
```

Gestalte den Leerzustand im Stil der Kundenseite. Das Skript fasst ihn nicht an.

## 4. Aussehen anpassen (CSS-Variablen)

Setze sie auf dem `div` oder in der Seiten-CSS, z. B. `[data-webklar-news]{ --wkn-frame:#2f5d50; }`.

| Variable | Standard |
| --- | --- |
| `--wkn-board` (Korkfläche) | `#C08A52` |
| `--wkn-frame` (Holzrahmen) | `#A8733F` |
| `--wkn-font-display` (Überschriften) | `"Fredoka", system-ui, sans-serif` |
| `--wkn-font-body` (Text) | `"Nunito", system-ui, sans-serif` |
| `--wkn-paper-sun` | `#FFF6D6` |
| `--wkn-paper-sky` | `#DDEEFB` |
| `--wkn-paper-coral` | `#FFE1DA` |
| `--wkn-paper-white` | `#fff` |

Die Schriften lädt das Skript nicht selbst. Sind sie auf der Kundenseite nicht eingebunden, greift die Systemschrift. Setze dann die Variablen auf die Schriften der Kundenseite.

Das Layout richtet sich nach der Breite des `div` (Container Query), nicht nach dem Bildschirm: ab 701 px Breite ein Korkbrett mit drei Spalten, darunter eine Wischreihe mit Punkten. Sechs Beiträge pro Seite, „Ältere Neuigkeiten ansehen“ lädt die nächsten nach. Alle Klassen beginnen mit `wkn-`, die Styles stehen einmalig in `<style id="wkn-style">`.

## 5. Datenschutzerklärung des Kunden

Das Skript lädt Beiträge und Bilder von `project.webklar.com`. Dabei sieht der Server die IP-Adresse des Besuchers. Die Datenschutzerklärung des Kunden braucht deshalb den Absatz aus `docs/funktionen/website-datenschutz-absatz.md`. Bau die Pinnwand erst ein, wenn der Absatz dort steht.

## 6. Testen

`/embed/news-demo.html` auf dem Portal ist eine nicht verlinkte Testseite. Automatische Prüfung: `node test/ui/embed.ui.mjs`.