Feedback Button Widget — SeggWat Docs

Overview

The feedback button widget is a floating button that opens a modal form for collecting detailed feedback from users. It's perfect for gathering bug reports, feature requests, and general comments.

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.

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.

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-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.SeggwattFeedback) {
  // Change color
  SeggwattFeedback.updateAppearance({
    color: '#ef4444'
  });

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

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

  // Change language
  SeggwattFeedback.updateAppearance({
    language: 'de'
  });

  // Change multiple properties
  SeggwattFeedback.updateAppearance({
    color: '#10b981',
    position: 'right-side',
    language: 'sv'
  });
}

Note

The updateAppearance method is asynchronous when changing language, as it needs to fetch translation files. All UI text updates instantly without page reload.

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.SeggwattFeedback) {
  SeggwattFeedback.setUser('user_12345');

  // Or include an email so your team can reply directly
  SeggwattFeedback.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.SeggwattFeedback) {
    SeggwattFeedback.setUser(userId, email);
  }
}

// When user logs out
function onUserLogout() {
  if (window.SeggwattFeedback) {
    SeggwattFeedback.setUser(null);
  }
}

Subscriber Rewards

If you use Polar or Stripe for subscriptions, you can reward subscribers who submit valuable feedback with discount codes. To enable this, pass the subscriber's subscription ID to the widget:

javascript

// After your user logs in, pass their subscription ID
if (window.SeggwattFeedback) {
  SeggwatFeedback.setSubscriptionId('sub_1abc...');  // Stripe
  // or
  SeggwatFeedback.setSubscriptionId('a1b2c3d4-...');  // Polar (UUID)
}

When a subscription ID is set, the feedback modal shows a "Get a discount on future bills" consent checkbox. The subscription ID is only sent with the feedback if the user checks this box.

To clear the subscription ID (e.g., on logout):

javascript

if (window.SeggwattFeedback) {
  SeggwatFeedback.setSubscriptionId(null);
}

You can also set it via a data attribute on the script tag:

html

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

Validation:

Max 255 characters
Alphanumeric characters, hyphens, and underscores only

Tip

Once a subscriber opts in, your team can create and auto-apply discounts from the feedback detail page in the dashboard. See the Polar or Stripe integration guides for setup instructions.

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.

The social share widget lets users share your product on X (Twitter) and submit the tweet URL as feedback. You can then verify the tweet in your dashboard and optionally grant a reward discount.

html

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

Configuration

Attribute	Description	Default
`data-project-key`	Your SeggWat project key (required)	-
`data-tweet-text`	Pre-filled tweet text (optional — users can write their own)	Empty
`data-tweet-url`	URL to include in the tweet	Current page URL
`data-tweet-hashtags`	Comma-separated hashtags	-
`data-button-color`	Button accent color	`#1DA1F2`
`data-container`	CSS selector for inline placement	At script location
`data-subscription-id`	Subscription ID for reward eligibility	-
`data-language`	Language code (`en`, `de`, `sv`, `fr`)	Auto-detect

Reward Flow

To enable rewards for social shares, the customer's app must provide the user's subscription ID. Without it, the share is recorded as feedback but no discount can be granted.

html

<script src="https://seggwat.com/static/widgets/v1/seggwat-share.js"
        data-project-key="your-project-key"
        data-tweet-url="https://yourapp.com"
        data-subscription-id="sub_abc123"></script>

Or set it programmatically:

javascript

SeggwatShare.setSubscriptionId('sub_abc123');

When a subscription ID is configured, a consent checkbox appears: "I'd like to be considered for a reward". The user must check this box for their subscription ID to be submitted. The product owner then reviews the tweet in the dashboard and decides whether to grant a discount.

JavaScript API

javascript

SeggwatShare.setUser('user-123');           // Set user ID for tracking
SeggwatShare.setSubscriptionId('sub_123');  // Enable reward eligibility
SeggwatShare.reset();                       // Reset to initial state

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

Recommended Setup

Defaults and Overrides

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

Subscriber Rewards

How It Works

Multiple Widgets

Social Share Widget

Configuration

Reward Flow

JavaScript API

Next Steps

Privacy & Compliance

Helpful Rating Widget

Internationalization

Version Tracking

Customization

Example projects