SeggWat - Collect Feedback & Build Customer Loyalty

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

Add the SeggWat feedback button to your website with a single script tag:

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.

Configuration Options

Customize the feedback button's appearance and behavior using data attributes:

Required Attributes

data-project-keystringrequired

Your unique project identifier from the SeggWat dashboard

Optional Attributes

data-button-colorstringdefault:"#2563eb"

Hex color code for the button (e.g., #10b981)

data-button-positionstringdefault:"bottom-right"

Button position and layout on the 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-languagestringdefault:"auto-detect"

Language code for the widget UI. See Internationalization for details.

Supported languages: en, de, sv

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"

Show or hide the "Powered by SeggWat" branding in the modal footer.

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"

Enable screenshot capture and annotation functionality.

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

Custom Color

html

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

Vertical Position

html

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

German Language

html

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

Icon-Only (Compact)

html

<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-button-position="icon-only"
        data-button-color="#10b981"></script>

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 to your app's current version to track which releases generate the most feedback. Especially useful for identifying bugs introduced in specific versions.

White-Label (Hide Branding)

html

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

Note

Hide the "Powered by SeggWat" footer for a seamless brand experience.

Enable Screenshots

html

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

Tip

Screenshots help users visually show exactly what they're referring to. See Screenshot Feature for annotation tools, keyboard shortcuts, and advanced configuration.

Full Configuration

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="bottom-right"
        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 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`)	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

Configuration Options

Required Attributes

Optional Attributes

Examples

Custom Color

Vertical Position

German Language

Icon-Only (Compact)

Version Tracking

White-Label (Hide Branding)

Enable Screenshots

Full Configuration

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