Embed-Widget

Kommentare mit einem Script-Tag in jede Website einbetten — Attribute, Kommentar-Zähler, Gast-Kommentare und die Grenzen des Verfahrens.

Beliebige Websites — Blog, Dokumentation, statisches HTML, egal welcher Stack — können die Kommentare deiner Community einbetten. Das Widget lädt als iframe von deiner Community-Adresse: kein CORS, kein Tracking, keine Requests an Dritte.

Im Folgenden steht <deine-community> für die Adresse deiner Community, also z. B. deinname.pukalani.app.

Einbinden

<div id="pukalani-comments"></div>
<script async src="https://<deine-community>/embed.js"
  data-target-id="mein-blogpost-42"
  data-target-type="blog"></script>

Das war alles. Fehlt das <div>, legt der Loader selbst eines vor dem Script-Tag an.

Alternative: Web-Component

Bequemer in CMS und Frameworks, die Custom Elements sauberer handhaben als eingefügte <script>-Tags:

<script async src="https://<deine-community>/pukalani-comments.js"></script>
<pukalani-comments target-id="mein-blogpost-42" target-type="blog"
  theme="auto" locale="de" primary="sky"></pukalani-comments>

Attribute reagieren live: theme schaltet ohne Neuladen um, die übrigen Attribute laden das iframe neu. Gerendert wird dasselbe abgeschottete iframe im Shadow DOM — die Sicherheit ist identisch zum Script-Loader.

Attribute

Attribut	Pflicht	Default	Bedeutung
`data-target-id`	ja	—	Stabiler Schlüssel des Strangs (≤ 255 Zeichen)
`data-target-type`	nein	`page`	Namensraum, z. B. `blog`, `docs` (≤ 64 Zeichen)
`data-theme`	nein	`auto`	`light`, `dark` oder `auto` (folgt `prefers-color-scheme`)
`data-locale`	nein	`en`	`de` oder `en` — Sprache der Widget-Oberfläche
`data-primary`	nein	Einstellung der Community	Akzentfarbe aus der Whitelist (`red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`)
`data-container`	nein	`pukalani-comments`	ID des Ziel-Elements; mehrere Widgets pro Seite brauchen je einen eigenen Container

Wähle eine feste target-id, nicht die URL. Eine URL-basierte ID lässt den Strang verwaisen, sobald die Seite umzieht. Ein Slug oder die ID aus deinem CMS überlebt jeden Umbau.

Nur bei data-theme="auto" ist der Hintergrund des Widgets transparent — es übernimmt dann die Fläche deiner Seite.

Theme zur Laufzeit umschalten

Wenn deine Seite einen eigenen Hell-/Dunkel-Umschalter hat:

document.querySelector('#pukalani-comments iframe').contentWindow
  .postMessage({ type: 'pukalani:set-theme', theme: 'dark' }, 'https://<deine-community>')

Kommentar-Zähler

embed.js befüllt jedes Element mit data-pukalani-count — praktisch für „N Kommentare"-Links in einer Artikelliste:

<a href="/blog/post-42#kommentare">
  <span data-pukalani-count data-target-id="post-42" data-target-type="blog">…</span>
</a>
<script async src="https://<deine-community>/embed.js"></script>

data-target-type ist optional (Default page). Der Zähler funktioniert auch ohne Widget auf derselben Seite — das Script allein genügt.

Was du in deiner Community einstellen musst

Einbetten freischalten. Solange die Funktion aus ist, liefert /embed eine 404; alle anderen Seiten verbieten das Framing ohnehin (Klickschutz für Login und Dashboard).
Domains registrieren. Unter Dashboard → Embed-Sites trägst du ein, welche Domains einbetten dürfen; optional lässt sich je Domain begrenzen, welche target-type-Werte erlaubt sind. Änderungen greifen sofort. Nicht registrierte Einbetter sehen eine freundliche Meldung statt eines leeren Rahmens.
Gast-Kommentare (optional): Kommentieren ohne Konto — es wird nur ein frei gewählter Anzeigename abgefragt, keine E-Mail-Adresse. Voreinstellung ist aus.

Anmelden im Widget

Der Anmelde-Knopf im Widget öffnet ein Popup auf deiner Community-Adresse — dort läuft der normale Login inklusive Code-Anmeldung. Danach übernimmt das iframe die Sitzung über ein kurzlebiges Übergabe-Token und ein partitioniertes Cookie (CHIPS).

Folge daraus: Die Anmeldung gilt pro einbettender Domain (wie bei anderen Kommentar-Diensten auch). Browser, die partitionierte Cookies verwerfen, bleiben im Lesemodus und zeigen einen Hinweis mit Link auf die Community.

Datenschutz bei Gast-Kommentaren

Wenn du Gast-Kommentare erlaubst:

Von einem Gast wird nur der frei gewählte Anzeigename gespeichert — er steht auf der Kommentar-Zeile und sonst nirgends.
Es werden keine Kontaktdaten erhoben: keine E-Mail-Adresse, kein IP-Hash. Bis zum 2. August 2026 fragte das Formular zusätzlich nach einer E-Mail-Adresse und legte sie mit einem IP-Hash für die Moderation ab. Diese Erhebung ist ersatzlos entfallen, weil die Daten nie abrufbar waren; Altdaten werden nach 90 Tagen gelöscht. Ein Rückfragekanal zu Gästen besteht damit nicht — wer das braucht, verlangt ein Konto.
Gäste können weder bearbeiten noch abstimmen.
Es gilt ein enges Rate-Limit (5 Kommentare pro Minute und IP), und die Kommentare zählen gegen das Kontingent deiner Community.

Grenzen

SEO: Die Kommentare liegen im iframe unter deiner Community-Adresse. Crawler der einbettenden Seite sehen sie nicht — /embed ist zudem auf noindex gesetzt.
Lesen ohne Cookies: Mitlesen funktioniert ohne jeden Cookie- oder Storage-Zugriff, auch mit hartem Tracking-Schutz.
Keine Inline-Variante: Kommentare direkt im DOM der Gastgeber-Seite (ohne iframe) gibt es bewusst nicht — das bräuchte einen eigenen HTML-Sanitizer und eine offene CORS-Allowlist.

Für Entwickler

Was Pukalani technisch nach außen anbietet — das Embed-Widget, die HTTP-API und ihre Grenzen.

API-Grundlagen

Aufbau der HTTP-API — Authentifizierung über Session-Cookie, stabiles Fehler-Format, Rate-Limits und die cross-origin nutzbaren Endpunkte.