Feedback Button Widget — SeggWat Docs

Overview

The feedback button widget is a floating button that opens a hub — a modal showing tiles for each enabled module (Bug Report, Feature Request, Contact, Review). The user picks a tile and is taken to the matching form. One snippet replaces what used to be separate widgets for each kind of feedback.

Which tiles appear is controlled per-project from the SeggWat dashboard or overridden per-page with data-modules. See Hub Modules below.

Tip

Looking for simple thumbs up/down ratings? Check out the Helpful Rating Widget for a lightweight alternative.

Quick Start

Configure the project's widget defaults in SeggWat, then add this stable snippet to your website:

html

<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"></script>

Replace your-project-key with your project's unique key from the dashboard. The snippet fetches your saved project widget defaults at runtime, so active module and appearance changes in SeggWat apply without redeploying your site.

Install with an AI assistant

Using Cursor, Claude Code, GitHub Copilot, or another AI coding assistant? Paste this prompt and it will add the widget for you. Replace YOUR_PROJECT_KEY with your project key from the dashboard.

Prompt

Add the SeggWat feedback button to my site. It's a single script tag — no
package to install, no SDK to wire up.

<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="YOUR_PROJECT_KEY"></script>

Rules:
- The button is global and floats over every page, so add the tag once in the
  shared root layout / template (e.g. Next.js root layout, Astro base layout,
  the master <head> or before </body>), NOT per-page.
- This one tag is the entire install. Don't add any other SeggWat scripts,
  don't npm/yarn install anything, and don't build a React/Vue wrapper for it.
- Leave data-project-key as YOUR_PROJECT_KEY — I'll swap in my real key.
- All appearance and which modules show are configured in the SeggWat
  dashboard, so don't add extra data-* attributes unless I ask.

Recommended Setup

Open your project in SeggWat.
Configure active modules, appearance, and feature defaults.
Copy the embed snippet from the Installation page.
Add your website domain to the project's allowed origins.
Open your site and submit a test feedback item.

Defaults and Overrides

The feedback widget has three layers of configuration:

text

data-* attributes > project widget defaults > SeggWat built-in defaults

Project widget defaults are saved in SeggWat and apply to every feedback widget embed for the project. This includes active modules, appearance, and widget features.
data-* attributes are for page-specific appearance, QA, and tracking exceptions, such as a different button position on one page or a version string for release tracking.
Built-in defaults are used only when neither a project default nor a data attribute is set.

Tip

For most installations, keep the snippet minimal and change widget defaults in SeggWat. Add data attributes only when a specific page should behave differently.

Hub Modules

The hub is built from four modules. Each one is its own form and writes to its own endpoint, but they all share the same floating button and modal shell so users only see one entry point.

Module	Tile	What the user does	Submits to
`bug_report`	Report a bug	Describes a bug; optionally attaches a screenshot when screenshots are enabled	`POST /api/v1/feedback/submit` (type `Bug`)
`feature_request`	Suggest a feature	Describes a feature idea	`POST /api/v1/feedback/submit` (type `Feature`)
`contact`	Contact us	Sends name, email, and a message — no SeggWat account or API key needed on the user side	`POST /api/v1/contact/submit`
`review`	Leave a review	Picks 1–5 stars and an optional comment	`POST /api/v1/rating/submit` (star rating)

Contact submissions land in the Messages inbox in the dashboard, separate from regular feedback. Reviews flow into your project's star-rating stream. Bug/feature submissions appear in the feedback list with the matching type.

Note

If only one module is enabled, the hub skips the tile picker and opens that module's form directly. The "Back" button is also hidden in that case.

Configuring which modules appear

There are two ways to control the enabled set:

1. Project default (recommended). Open your project in SeggWat → Widget Configurator and toggle modules on or off. The widget fetches GET /api/v1/projects/{key}/widget-config on load and uses whatever you saved. This is the only place a change applies to every embed without redeploying.

2. Per-page override with data-modules. Pass a comma-separated allowlist on the script tag to override the saved set for that page. The server fetch is skipped.

html

<!-- Bug reports only, e.g. on a docs page -->
<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-modules="bug_report"></script>

<!-- Contact + reviews only, e.g. on a marketing landing page -->
<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-modules="contact,review"></script>

Valid values: bug_report, feature_request, contact, review. Unknown values are ignored. If the resulting set is empty, the widget logs a warning and does not render.

Warning

data-modules is an allowlist, not an additive list — listing contact alone disables the other three on that page even if they're enabled in your project defaults.

Configuration Options

Configure shared active modules, appearance, and feature defaults in SeggWat. The attributes below are available for per-page appearance overrides and integration metadata.

Required Attributes

data-project-keystringrequired

Your unique project identifier from the SeggWat dashboard

Optional Attributes

data-modulesstringdefault:"(project default)"

Override the saved active modules on this page. Comma-separated allowlist of bug_report, feature_request, contact, review.

Setting this attribute skips the server config fetch. See Hub Modules for behavior and examples.

data-button-colorstringdefault:"#2563eb"

Override the saved project button color on this page.

data-button-positionstringdefault:"bottom-right"

Override the saved project button position on this page. Options:

bottom-right - Horizontal button with icon and text in bottom-right corner
right-side - Vertical text-only button on right edge of screen
icon-only - Compact round icon-only button in bottom-right corner

data-button-textstringdefault:"(translated)"

Override the saved project button label on this page. The value applies across all languages.

Hidden in icon-only mode but still announced by screen readers as the button's accessible name.

Example:

html

data-button-text="Send feedback"

Leave the attribute off (or set it to an empty string) to use the localized default.

data-languagestringdefault:"auto-detect"

Override the saved project language on this page. See Internationalization for details.

Supported languages: en, de, sv, fr

data-api-urlstringdefault:"auto-detect"

Override the API endpoint (useful for self-hosted or staging environments)

data-versionstring

Track feedback against specific application versions (e.g., 1.2.3, v2.0.0-beta)

This helps correlate user feedback with specific releases, making it easier to:

Identify version-specific bugs
Track feature adoption across releases
Prioritize fixes based on affected versions

The version is displayed in your dashboard's feedback list and detail views.

data-show-powered-bybooleandefault:"true"

Override whether the "Powered by SeggWat" branding appears in the modal footer on this page.

Set to false, 0, or no to hide the branding label. Useful for:

White-label implementations
Custom branding requirements
Maintaining a cohesive brand experience

Note: When enabled (default), the branding links to SeggWat's End User Privacy Notice, providing transparency to your users about how their feedback is processed.

data-enable-screenshotsbooleandefault:"false"

Override screenshot capture and annotation on this page.

When enabled, users can:

Capture a screenshot of the current viewport
Annotate with arrows, rectangles, pen, text, and blackout tools
Attach the annotated screenshot to their feedback

See Screenshot Feature for detailed configuration options.

Info

Privacy Compliance: Before collecting feedback, ensure you've updated your privacy policy to inform users about data collection. See our Privacy & Compliance Guide for detailed guidance on GDPR and CCPA requirements.

Examples

Minimal Install

html

<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"></script>

Per-Page Position Override

html

<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-button-position="right-side"></script>

Per-Page Language Override

html

<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-language="de"></script>

Release Version Tracking

html

<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-version="1.2.3"></script>

Tip

Set data-version from your release pipeline or app shell to track which releases generate the most feedback.

Page-Specific Full Override

html

<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-button-color="#ef4444"
        data-button-position="right-side"
        data-button-text="Send feedback"
        data-language="sv"
        data-version="1.2.3"
        data-enable-screenshots="true"></script>

Dynamic Updates

You can update the button's appearance after initialization using JavaScript:

javascript

// Wait for the widget to load
if (window.SeggwatFeedback) {
  // Change color
  SeggwatFeedback.updateAppearance({
    color: '#ef4444'
  });

  // Change position
  SeggwatFeedback.updateAppearance({
    position: 'icon-only' // or 'bottom-right', 'right-side'
  });

  // Change button text (pass an empty string to revert to the localized default)
  SeggwatFeedback.updateAppearance({
    buttonText: 'Send feedback'
  });

  // Change multiple properties at once
  SeggwatFeedback.updateAppearance({
    color: '#10b981',
    headerColor: '#0f766e',
    position: 'right-side'
  });
}

Note

updateAppearance only changes appearance — color, headerColor, position, and buttonText. Language is not updatable here; it's loaded once at init from data-language. To switch language at runtime, call destroy() and re-inject the script with a new data-language (see Per-Page Language Override).

User Tracking

Associate feedback with specific users by setting a user identifier and, optionally, an email address:

javascript

// Set user ID when user logs in
if (window.SeggwatFeedback) {
  SeggwatFeedback.setUser('user_12345');

  // Or include an email so your team can reply directly
  SeggwatFeedback.setUser('user_12345', 'jane@example.com');
}

This allows you to:

Correlate multiple feedback submissions from the same user
Reach out to specific users about their feedback
Track feedback patterns by user

When the optional email argument is supplied, it is shown in the SeggWat dashboard "From" panel as a mailto: link so your team can reply to the user directly. The email is also pre-filled into the form so the user does not need to re-type it. Make sure your privacy policy covers this — see the privacy & compliance guide.

Warning

Do not place email or other PII into the user_id argument — keep the user ID opaque and pass email as the second argument. The user_id field is validated as alphanumeric with hyphens/underscores only.

Validation:

user_id: Max 255 characters, alphanumeric with hyphens and underscores only. Examples: user_12345, cust-abc-123, USR_98765
email: Standard email format. Pass undefined (omit the argument) to leave any previously set email untouched, or null to clear it.

Usage Example:

javascript

// When user logs in
function onUserLogin(userId, email) {
  if (window.SeggwatFeedback) {
    SeggwatFeedback.setUser(userId, email);
  }
}

// When user logs out
function onUserLogout() {
  if (window.SeggwatFeedback) {
    SeggwatFeedback.logout();
  }
}

Warning

Use logout() — not setUser(null) — when a user signs out. setUser(null) only clears the user id; a previously-set email and chat token stay in place (in memory and in localStorage), so the next submission is still attributed to the old user. logout() resets the id, email, and chat token and removes every widget-owned localStorage entry, guaranteeing the next submission is anonymous. It's the right call on sign-out and account-switch, especially on shared devices.

JavaScript API

Once the script has loaded it exposes a global window.SeggwatFeedback object. The methods below are grouped by what they do. The task-oriented sections above (Dynamic Updates, User Tracking) cover the common flows in more detail — this is the at-a-glance reference.

Note

The script loads asynchronously, so window.SeggwatFeedback may not exist the instant your own code runs. Guard every call with if (window.SeggwatFeedback) { … }, or call from an interaction that happens after the page has loaded. The examples below omit the guard for brevity.

Method	Purpose
`setUser(userId, email?, chatToken?)`	Attach the visitor's identity to submissions
`logout()`	Fully reset identity (memory and `localStorage`)
`updateAppearance(options)`	Live-update color, position, header color, or button text
`open(view?)`	Open the widget (optionally straight to a module)
`close()`	Close the widget
`captureScreenshot()`	Open the bug form and start capture + annotation
`openWithScreenshot(blob)`	Open the bug form with a pre-captured image attached
`hasScreenshot()`	Whether a screenshot is attached to the current bug form
`clearScreenshot()`	Remove the attached screenshot
`screenshotsEnabled`	Read-only: whether screenshots are enabled
`destroy()`	Remove the widget from the page
`container`	The floating button's DOM element
`version`	Read-only widget version string

Identity

`setUser(userId, email?, chatToken?)`

Associates subsequent submissions with a user. See User Tracking for validation rules and the email behavior. The optional third argument, chatToken, is the HMAC/JWT minted by your backend that unlocks the identified-only Live Chat tile — omit it for projects that don't use chat.

`logout()`

Fully resets the visitor's identity on this device. Use this — not setUser(null) — on sign-out and account-switch. See the warning under User Tracking for the full rationale.

Appearance

`updateAppearance(options)`

Live-updates the button's appearance without re-injecting the script. Accepts any subset of:

Option	Type	Description
`color`	hex string	Primary button color (invalid hex is ignored)
`headerColor`	hex string	Modal header color
`position`	string	`"bottom-right"`, `"right-side"`, or `"icon-only"`
`buttonText`	string	Button label; empty string reverts to the localized default

See Dynamic Updates for examples.

Note

Language is not an updateAppearance option — it's loaded once at init from data-language. To switch language at runtime, call destroy() and re-inject the script with a new data-language.

`open(view?)`

Opens the widget. Pass an optional view to jump straight to one module — one of the project's enabled modules: "bug_report", "feature_request", "review", "contact", or "chat". Omitting view (or passing an unknown/disabled one) opens the hub menu.

javascript

SeggwatFeedback.open();              // hub menu
SeggwatFeedback.open('bug_report');  // straight to the bug form

`close()`

Closes the widget.

Screenshots

These methods require data-enable-screenshots="true" (see the Screenshot Feature). When screenshots are disabled they log a console warning and no-op.

`captureScreenshot()`

Opens the bug-report form and starts the capture + annotation flow. async.

`openWithScreenshot(blob)`

Opens the bug-report form with a pre-captured image already attached. Useful for external capture tools (e.g. a browser extension) that hand a finished Blob to the widget. Accepts image/jpeg, image/png, or image/webp.

`hasScreenshot()`

Returns true when the bug form is open and a screenshot is attached.

`clearScreenshot()`

Removes any attached screenshot from the current bug form. No-op when the bug form isn't the active view.

`screenshotsEnabled`

Read-only boolean — whether screenshots are enabled for this embed.

Lifecycle

`destroy()`

Removes the widget from the page entirely (button, modal, chat). Safe to call multiple times. Use this before re-injecting the script with new structural config (language, screenshots, powered-by); for appearance-only changes use updateAppearance instead.

`container`

The floating button's DOM element, handy if you want to move or restyle it from outside.

How It Works

The script tag loads the feedback button widget asynchronously
The widget auto-detects your site's base URL for API requests
CSS is loaded dynamically from the same domain
The button appears fixed on your page based on the configured position
Clicking opens a modal form for users to submit feedback
Feedback is sent directly to your SeggWat project

Multiple Widgets

You can combine the feedback button with the helpful rating widget on the same page. They share a common core library for efficient loading:

html

<!-- Feedback button (floating) -->
<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"></script>

<!-- Helpful rating (inline at script location) -->
<script src="https://seggwat.com/static/widgets/v1/seggwat-helpful.js"
        data-project-key="your-project-key"
        data-show-comment-link="true"></script>

When data-show-comment-link="true" is set on the helpful widget, clicking "Add a comment" opens the feedback modal.

Next Steps

Privacy & Compliance

Update your privacy policy and ensure GDPR compliance

Helpful Rating Widget

Add simple thumbs up/down ratings for quick feedback

Internationalization

Configure multi-language support for your widgets

Version Tracking

Track feedback across application versions

Customization

Customize colors, positioning, and behavior

Example projects

Complete examples for React, Vue, Next.js, Astro, and static HTML

Overview

Quick Start

Install with an AI assistant

Recommended Setup

Defaults and Overrides

Hub Modules

Configuring which modules appear

Configuration Options

Required Attributes

Optional Attributes

Examples

Minimal Install

Per-Page Position Override

Per-Page Language Override

Release Version Tracking

Page-Specific Full Override

Dynamic Updates

User Tracking

JavaScript API

Identity

setUser(userId, email?, chatToken?)

logout()

Appearance

updateAppearance(options)

Modal control

open(view?)

close()

Screenshots

captureScreenshot()

openWithScreenshot(blob)

hasScreenshot()

clearScreenshot()

screenshotsEnabled

Lifecycle

destroy()

container

How It Works

Multiple Widgets

Next Steps

Privacy & Compliance

Helpful Rating Widget

Internationalization

Version Tracking

Customization

Example projects

`setUser(userId, email?, chatToken?)`

`logout()`

`updateAppearance(options)`

`open(view?)`

`close()`

`captureScreenshot()`

`openWithScreenshot(blob)`

`hasScreenshot()`

`clearScreenshot()`

`screenshotsEnabled`

`destroy()`

`container`