The Feedbackzu widget is a self-contained <script> tag. Paste it into the
<head> (or just before </body>) of any page and a feedback button appears in
the corner. Clicking it opens a panel where visitors rate their experience and
leave a note — submissions flow straight into your workspace. It works in any
framework — React, Vue, plain HTML, Webflow, Framer, anything that lets you drop
in a script.
Embed snippet
Copy the ready-made snippet from your dashboard under Settings → Integrations, or build it yourself by dropping your Project ID into the tag:
<script src="https://cdn.jsdelivr.net/gh/intellizu/feedbackzu-widget@v0.3.0/widget.js"
data-project-id="YOUR_PROJECT_ID"
data-position="br"
data-accent="#6366f1"
async></script>
That’s the whole installation. The script renders its own button and panel — no
iframe — and posts submissions to https://api.feedbackzu.com/widget/submit.
Finding your Project ID
Your Project ID (also called the Workspace ID) is shown in the dashboard under Settings → Integrations, both as its own copyable field and pre-filled inside the embed snippet. It’s a stable UUID that never changes when you rename your workspace, so embeds you’ve already shipped keep working.
Configuration
Configure the widget with data-* attributes on the script tag:
| Attribute | Default | Description |
|---|---|---|
data-project-id | (required) | Your Workspace ID — identifies which workspace receives the feedback. |
data-position | br | Button corner: br, bl, tr, or tl. |
data-theme | light | light, dark, or auto (follows the visitor’s system). |
data-accent | #6C3AED | Accent color for the button and primary actions — a hex color or a basic CSS color keyword. Anything else is rejected and falls back to the default. |
data-base-url | https://feedbackzu.com | Base URL for the widget’s branding links and images. |
data-portal-slug | (your project ID) | Your portal’s slug. Only needed if it differs from your project ID — it’s what the widget uses to fetch your public changelog for the “what’s new” badge below. |
data-csp-nonce | (none) | A per-request CSP nonce, applied to the widget’s injected <style> tag. Lets you avoid style-src 'unsafe-inline' — see Content Security Policy below. |
Changing an attribute takes effect the next time the page loads.
What’s new badge
When your workspace has published changelog entries a visitor hasn’t seen yet, the widget shows a small badge on its button. Clicking through (via the bell icon in the panel) opens a short list of recent entries and marks them as seen — tracked locally in the visitor’s browser, no account required.
Single-page apps
The script self-initializes on page load and is idempotent: if it runs twice, the second invocation no-ops. You normally don’t need to re-mount it on client-side route changes.
If you’re using a framework that strips <script> tags from your <head>
during hydration (some SSR setups), inject the snippet from a useEffect or
onMount hook instead.
Content Security Policy
If your site uses a CSP, allow the widget to load its script and post feedback:
script-src 'self' https://cdn.jsdelivr.net;
style-src 'self' 'unsafe-inline';
connect-src 'self' https://api.feedbackzu.com;
img-src 'self' https://feedbackzu.com data:;
'unsafe-inline' for styles is required because the widget injects a
<style> tag to scope its CSS to the embed. If your CSP can’t allow
unsafe-inline, set data-csp-nonce to your page’s per-request nonce
instead — the widget applies it to that <style> tag, so you can scope
style-src to just that nonce (style-src 'nonce-<value>') rather than
opening up inline styles site-wide.