SeggWat - Collect Feedback

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:

javascript

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

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

Warning

Only pass user IDs, not personally identifiable information (PII) like emails or names. This maintains GDPR compliance by keeping user details in your system while allowing feedback correlation.

Validation:

Max 255 characters
Alphanumeric characters, hyphens, and underscores only
Examples: user_12345, cust-abc-123, USR_98765

Usage Example:

javascript

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

// 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.

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