64 lines
3.3 KiB
Markdown
64 lines
3.3 KiB
Markdown
# 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. Das klappt nur, wenn es als normales `<script src>` geladen wird. Bei Modul-Import, Tag-Manager oder nachgeladenem Skript ist `data-api` Pflicht.
|
||
- `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, braucht aktuelle Browser), 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`.
|