Webklar-Kundenbereich/docs/funktionen/news-einbau.md

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

<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>)

<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:

<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.