Embed the widget

1. Add the snippet

Add the snippet before </body>. You can find your project ID in the project settings under Embed Code, where the ready-to-copy snippet lives, with variants for Next.js, WordPress, and Webflow.

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

Then add your domain to the project settings under Allowed Origins; otherwise the widget rejects submissions with 403 origin_not_allowed.

Turn off diagnostics

By default, the widget captures the most recent console messages, JavaScript errors, and failed network requests as technical context. One attribute on the script tag turns this off completely:

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

Off means console, error, and network data are never captured in the first place. Screenshot, element marker, and text still work. The buffers are never installed with data-diagnostics="off", so nothing is collected and filtered later; it is simply never captured.

Widget language (data-lang)

The widget resolves its language in three tiers, synchronously at boot, with no network call:

• 1. Attribute. data-lang="de" or data-lang="en" on the script tag pins the language.
• 2. Browser language. Without a valid attribute, the widget follows the visitor's browser language, only the language part before a hyphen counts (en-US becomes en).
• 3. German. If that isn't de or en either, the widget stays with German.

An unknown or misspelled value (e.g. data-lang="fr") is silently skipped and falls through to the next tier. There is no error and no visible effect.

The feedbapp-cli and its MCP integration are unaffected and stay in English. That's a separate repository that doesn't read this attribute.

Customize the widget (Pro)

With Pro you match the widget to your product: color, logo, position, and your own text.

• Accent color: your hex value, with the button text contrast set automatically.
• Logo: PNG or WebP up to 100 KB, at most 512 x 512 px, shown in the widget header and optionally as the launcher icon.
• Launcher corner: one of four corners; your visitors can still drag the launcher wherever they like.
• Launcher style: icon only or icon plus text.
• Corner radius: Square, Rounded, or Full.
• Appearance: Light, Dark, or automatic, following your visitor's system setting.
• Font: your page's own font or the Feedbapp font.
• Custom text: title, placeholder, and thank-you message, each in German and English.

You find these settings in the dashboard under Project → Settings → Widget.

Your changes appear on your page within about a minute, and your embed code stays exactly the same.

This customization is part of Pro. Your settings stay saved, and your widget shows them whenever Pro is active.

"Powered by Feedbapp" shows on every plan. With Pro you can turn it off.

Content Security Policy

If your site uses a Content Security Policy (CSP), add https://feed-bapp.de to three directives, for example:

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

• script-src for widget.js
• connect-src for the widget settings and for sending feedback, screenshot included
• img-src for your logo (Pro); the widget uses data: for its built-in icons and the screenshot preview

Your style-src stays as it is. The widget ships its styles as its own stylesheet inside its Shadow DOM and works without 'unsafe-inline' too.

If your CSP uses a nonce with 'strict-dynamic', add your page's nonce attribute to the widget's script tag. Current browsers then load widget.js through the nonce; older ones use the host entry.