Skip to main content

​
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.
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: 
<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-key
string
required
Your unique project identifier from the SeggWat dashboard

​
Optional Attributes

​
data-button-color
string
default:"#2563eb"
Hex color code for the button (e.g., #10b981)
​
data-button-position
string
default:"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-language
string
default:"auto-detect"
Language code for the widget UI. See Internationalization for details.Supported languages: en, de, sv
​
data-api-url
string
default:"auto-detect"
Override the API endpoint (useful for self-hosted or staging environments)
​
data-version
string
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-by
boolean
default:"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-screenshots
boolean
default:"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.
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

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

​
Vertical Position

<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

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

​
Icon-Only (Compact)

<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

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

<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-show-powered-by="false"></script>
Hide the “Powered by SeggWat” footer for a seamless brand experience.

​
Enable Screenshots

<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-enable-screenshots="true"></script>
Screenshots help users visually show exactly what they’re referring to. See Screenshot Feature for annotation tools, keyboard shortcuts, and advanced configuration.

​
Full Configuration

<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: 
// 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'
  });
}
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: 
// 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
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: 
// 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);
  }
}

​
How It Works

  1. The script tag loads the feedback button widget asynchronously
  2. The widget auto-detects your site’s base URL for API requests
  3. CSS is loaded dynamically from the same domain
  4. The button appears fixed on your page based on the configured position
  5. Clicking opens a modal form for users to submit feedback
  6. 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: 
<!-- 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