Widget einbinden

1. Snippet einfügen

Füge das Snippet vor </body> ein. Deine Projekt-ID findest du in den Projekt-Einstellungen unter Embed-Code — dort liegt das Snippet fertig zum Kopieren, mit Varianten für Next.js, WordPress und Webflow.

<script
  src="https://feed-bapp.de/widget.js"
  data-project-id="<Projekt-UUID>"
  async
></script>

Trage anschließend deine Domain in den Projekt-Einstellungen unter Erlaubte Origins ein — sonst lehnt das Widget Submissions mit 403 origin_not_allowed ab.

Diagnosedaten abschalten

Standardmäßig erfasst das Widget die letzten Konsolenmeldungen, JavaScript-Fehler und fehlgeschlagenen Netzwerk-Anfragen als technischen Kontext. Mit einem Attribut am Script-Tag schaltest du das komplett ab:

<script
  src="https://feed-bapp.de/widget.js"
  data-project-id="<Projekt-UUID>"
  data-diagnostics="off"
  async
></script>

Aus = Konsolen-, Fehler- und Netzwerkdaten werden gar nicht erst erfasst. Screenshot, Element-Marker und Text bleiben. Die Puffer werden mit data-diagnostics="off" nie installiert — es wird also nichts gesammelt und später gefiltert, sondern nie erfasst.

Sprache des Widgets (data-lang)

Das Widget wählt seine Sprache in drei Stufen — synchron beim Start, ohne Netzaufruf:

• 1. Attribut. data-lang="de" oder data-lang="en" am Script-Tag legt die Sprache fest vor.
• 2. Browsersprache. Ohne gültiges Attribut folgt das Widget der Browsersprache der Besucherin — nur der Sprachteil vor einem Bindestrich zählt (aus en-US wird en).
• 3. Deutsch. Ist auch das nicht de oder en, bleibt das Widget bei Deutsch.

Ein unbekannter oder falsch geschriebener Wert (z. B. data-lang="fr") wird stillschweigend übersprungen und fällt auf die nächste Stufe — es gibt keinen Fehler und keine sichtbare Auswirkung.

Das feedbapp-cli und seine MCP-Anbindung bleiben davon unberührt und englisch — das ist ein separates Repository, das dieses Attribut nicht liest.

Widget anpassen (Pro)

Mit Pro passt du das Widget an dein Produkt an: Farbe, Logo, Position und eigene Texte.

• Akzentfarbe: dein Hex-Wert, der Kontrast der Button-Schrift stellt sich automatisch ein.
• Logo: PNG oder WebP bis 100 KB, höchstens 512 x 512 px, im Widget-Kopf und optional als Launcher-Icon.
• Launcher-Ecke: eine von vier Ecken; deine Besucherinnen und Besucher verschieben den Launcher trotzdem weiterhin frei.
• Launcher-Form: nur das Icon oder Icon plus Text.
• Eckenradius: Eckig, Abgerundet oder Rund.
• Darstellung: Hell, Dunkel oder automatisch nach den Systemeinstellungen deiner Besucherinnen und Besucher.
• Schrift: die Schrift deiner Seite oder die Feedbapp-Schrift.
• Eigene Texte: Titel, Platzhalter und Danke-Text, je auf Deutsch und Englisch.

Du findest diese Einstellungen im Dashboard unter Projekt → Einstellungen → Widget.

Deine Änderungen erscheinen auf deiner Seite innerhalb von etwa einer Minute, dein Einbettungscode bleibt dabei unverändert.

Diese Anpassung ist Teil von Pro. Deine Einstellungen bleiben gespeichert, und dein Widget zeigt sie, sobald Pro aktiv ist.

„Powered by Feedbapp“ ist in jedem Tarif sichtbar. Mit Pro blendest du es aus.

Content Security Policy

Nutzt deine Seite eine Content Security Policy (CSP), ergänzt du drei Direktiven um https://feed-bapp.de, zum Beispiel so:

script-src  'self' https://feed-bapp.de;
connect-src 'self' https://feed-bapp.de;
img-src     'self' https://feed-bapp.de data:;

• script-src für widget.js
• connect-src für die Widget-Einstellungen und das Senden von Feedback samt Screenshot
• img-src für dein Logo (Pro); data: nutzt das Widget für seine eingebauten Icons und die Screenshot-Vorschau

Deine style-src bleibt, wie sie ist. Das Widget bringt seine Styles als eigenes Stylesheet in seinem Shadow DOM mit und läuft auch ohne 'unsafe-inline'.

Arbeitet deine CSP mit einer Nonce und 'strict-dynamic', gib dem Script-Tag des Widgets das nonce-Attribut deiner Seite mit. Aktuelle Browser laden widget.js dann über die Nonce, ältere nutzen den Host-Eintrag.