SeggWat - Collect Feedback

Make the SeggWat feedback button feel like a natural part of your application with extensive customization options. Match your brand colors, choose the perfect position, and localize for your audience.

Quick Customization

All customization is done through HTML data attributes on the script tag:

html

<script defer
  src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
  data-project-key="YOUR_PROJECT_KEY"
  data-button-color="#10b981"
  data-button-position="right-side"
  data-language="en">
</script>

Available Options

Button Color

data-button-colorstringdefault:"#2563eb"

Customize the button's background color using any valid hex color code.

Example:

html

data-button-color="#10b981"

The widget automatically:

Generates a darker shade for hover states
Creates matching focus ring colors
Ensures text remains readable (white text on colored background)

Tip

Use your brand's primary color for a cohesive look. The button works best with medium to dark colors.

Button Position

data-button-positionstringdefault:"bottom-right"

Control where the feedback button appears on your page and its layout style.

Options:

bottom-right - Horizontal button with icon and text in the bottom-right corner (default)
right-side - Vertical text-only button on the right edge, centered vertically
icon-only - Compact round icon-only button in the bottom-right corner

Example:

html

data-button-position="icon-only"

Note

The icon-only position is perfect for minimalist designs or when you want the button to be subtle and non-intrusive. The right-side position works well when you have other floating elements in the bottom-right corner.

Language

data-languagestringdefault:"auto-detect"

Set the interface language for the feedback widget.

Supported languages:

en - English (default)
de - German
sv - Swedish

Example:

html

data-language="de"

If not specified, the widget auto-detects the user's browser language and falls back to English if unsupported.

Multi-language support

Learn more about internationalization and available translations

API URL (Advanced)

data-api-urlstringdefault:"auto-detect"

Override the API endpoint for self-hosted or staging environments.

Example:

html

data-api-url="https://staging.seggwat.com"

Warning

Only use this if you're running a self-hosted instance of SeggWat or testing against a staging environment.

Version Tracking

data-versionstring

Track feedback against specific application versions to correlate issues with releases.

Example:

html

data-version="1.2.3"

Use cases:

Identify bugs introduced in specific versions
Track feature adoption and user response across releases
Prioritize fixes for versions with the most feedback
Correlate feedback trends with deployment history

Format: Any string (semver recommended: 1.2.3, v2.0.0-beta, 2024.11.1)

Tip

Automate version injection during your build process to ensure accuracy. The version appears in your dashboard alongside each feedback entry.

Branding Control

data-show-powered-bybooleandefault:"true"

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

Example:

html

data-show-powered-by="false"

When to hide:

White-label implementations for your clients
Maintaining a strict brand consistency
Custom enterprise deployments
When UI real estate is critical

Set to false, 0, or no to hide the branding.

Note

The branding helps support the development of SeggWat, but we understand some use cases require complete brand control.

Common Configurations

Match Your Brand

Choose colors that align with your brand identity:

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

Popular Framework Colors

Match your favorite framework or library:

Framework	Color	Code
React	React Blue	`#61dafb`
Vue	Vue Green	`#42b883`
Angular	Angular Red	`#dd0031`
Svelte	Svelte Orange	`#ff3e00`
Next.js	Next Black	`#000000`
Tailwind CSS	Tailwind Teal	`#06b6d4`

Example with React colors:

html

<script defer
  src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
  data-project-key="YOUR_PROJECT_KEY"
  data-button-color="#61dafb">
</script>

Vertical Side Button

Perfect for minimalist designs or full-width layouts:

html

<script defer
  src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
  data-project-key="YOUR_PROJECT_KEY"
  data-button-color="#2563eb"
  data-button-position="right-side">
</script>

Tip

The vertical button takes up less horizontal space and is less intrusive on mobile devices.

Icon-Only (Compact & Minimal)

The most subtle option - a round button with just the chat icon:

html

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

Tip

The icon-only button is ideal for clean, minimalist interfaces or when you want maximum screen real estate. Despite being compact, it's still highly visible and clickable.

International Audience

Set a specific language for your primary audience:

html

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

White-Label Setup

Remove SeggWat branding for white-label deployments or strict brand requirements:

html

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

Perfect for:

Agency projects where you're providing feedback solutions to clients
Enterprise deployments with strict branding policies
Products where every element must match your brand identity
SaaS platforms offering feedback as a feature

Tip

You can combine this with custom colors and positioning to create a fully branded experience that matches your application perfectly.

Example - Complete White-Label Setup:

html

<script defer
  src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
  data-project-key="YOUR_PROJECT_KEY"
  data-button-color="#your-brand-color"
  data-button-position="icon-only"
  data-show-powered-by="false">
</script>

Dynamic Customization

Update the button's appearance after the page loads using JavaScript:

Change Color

javascript

// Wait for widget to load
if (window.SeggwattFeedback) {
  window.SeggwattFeedback.updateAppearance({
    color: '#ef4444'
  })
}

Change Position

javascript

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

Change Language

javascript

window.SeggwattFeedback?.updateAppearance({
  language: 'de'
})

Update Multiple Properties

javascript

window.SeggwattFeedback?.updateAppearance({
  color: '#10b981',
  position: 'right-side',
  language: 'sv'
})

Theme Switcher Example

Synchronize the button with your app's theme:

html

<script>
  // Listen for theme changes
  document.addEventListener('themeChanged', (event) => {
    const isDark = event.detail.theme === 'dark'

    window.SeggwattFeedback?.updateAppearance({
      color: isDark ? '#ffffff' : '#000000'
    })
  })
</script>

User Preference Example

Let users customize the button position:

javascript

function setFeedbackPosition(position) {
  // Save to localStorage
  localStorage.setItem('feedbackPosition', position)

  // Update button
  window.SeggwattFeedback?.updateAppearance({
    position: position
  })
}

// On page load, restore user preference
const savedPosition = localStorage.getItem('feedbackPosition')
if (savedPosition && window.SeggwattFeedback) {
  window.SeggwattFeedback.updateAppearance({
    position: savedPosition
  })
}

Advanced Techniques

Automated Version Injection

Inject your app version automatically during the build process:

html

<script>
      // Read version from environment at build time
      const appVersion = '__APP_VERSION__' // Replaced by build tool

      const script = document.createElement('script')
      script.src = 'https://seggwat.com/static/widgets/v1/seggwat-feedback.js'
      script.defer = true
      script.setAttribute('data-project-key', 'YOUR_PROJECT_KEY')
      script.setAttribute('data-version', appVersion)
      document.head.appendChild(script)
    </script>

Configure your bundler to replace __APP_VERSION__ with the actual version from package.json.

Note

Automating version injection ensures every deployment captures the correct version without manual updates. This is crucial for correlating feedback with releases.

Git Commit Hash as Version

For continuous deployment, use git commit hashes:

html

<script>
  // Set during CI/CD pipeline
  const gitCommit = 'GIT_COMMIT_SHA' // Replaced by CI/CD
  const buildDate = 'BUILD_DATE'      // Replaced by CI/CD

  const script = document.createElement('script')
  script.src = 'https://seggwat.com/static/widgets/v1/seggwat-feedback.js'
  script.defer = true
  script.setAttribute('data-project-key', 'YOUR_PROJECT_KEY')
  script.setAttribute('data-version', `${gitCommit.slice(0, 7)}-${buildDate}`)
  document.head.appendChild(script)
</script>

CI/CD Example (GitHub Actions):

yaml

- name: Build with version
  run: |
    sed -i "s/GIT_COMMIT_SHA/${{ github.sha }}/g" index.html
    sed -i "s/BUILD_DATE/$(date +%Y%m%d)/g" index.html
    npm run build

Version-Based Feedback Routing

Show different feedback buttons for different versions:

javascript

const currentVersion = '2.0.0'
const isLegacyVersion = currentVersion.startsWith('1.')

const script = document.createElement('script')
script.src = 'https://seggwat.com/static/widgets/v1/seggwat-feedback.js'
script.defer = true
script.setAttribute('data-project-key', isLegacyVersion
  ? 'LEGACY_PROJECT_KEY'
  : 'CURRENT_PROJECT_KEY')
script.setAttribute('data-version', currentVersion)
document.head.appendChild(script)

Conditional Rendering

Show the button only on specific pages:

html

<script>
  // Only show on /app routes
  if (window.location.pathname.startsWith('/app')) {
    const script = document.createElement('script')
    script.src = 'https://seggwat.com/static/widgets/v1/seggwat-feedback.js'
    script.defer = true
    script.setAttribute('data-project-key', 'YOUR_PROJECT_KEY')
    document.head.appendChild(script)
  }
</script>

A/B Testing Colors

Test which color gets more engagement:

javascript

// 50/50 split between two colors
const colors = ['#3b82f6', '#10b981']
const randomColor = colors[Math.random() < 0.5 ? 0 : 1]

const script = document.createElement('script')
script.src = 'https://seggwat.com/static/widgets/v1/seggwat-feedback.js'
script.defer = true
script.setAttribute('data-project-key', 'YOUR_PROJECT_KEY')
script.setAttribute('data-button-color', randomColor)
document.head.appendChild(script)

// Track which color was shown
analytics.track('feedback_button_shown', { color: randomColor })

Hide on Specific Pages

javascript

// Hide feedback button on checkout pages
if (window.location.pathname.includes('/checkout')) {
  const style = document.createElement('style')
  style.textContent = '#seggwat-feedback-button { display: none !important; }'
  document.head.appendChild(style)
}

Mobile vs Desktop Positioning

javascript

const isMobile = window.innerWidth < 768

window.SeggwattFeedback?.updateAppearance({
  position: isMobile ? 'icon-only' : 'right-side'
})

// Update on resize
window.addEventListener('resize', () => {
  const isMobile = window.innerWidth < 768
  window.SeggwattFeedback?.updateAppearance({
    position: isMobile ? 'icon-only' : 'right-side'
  })
})

Color Picker

Not sure which color to use? Try these curated palettes:

Neutral Colors

Slate: #64748b - Professional and subtle
Gray: #6b7280 - Clean and modern
Zinc: #71717a - Contemporary and sleek
Stone: #78716c - Warm and grounded

Vibrant Colors

Red: #ef4444 - Urgent and attention-grabbing
Orange: #f97316 - Energetic and friendly
Yellow: #eab308 - Bright and optimistic
Green: #10b981 - Positive and calming
Blue: #3b82f6 - Trustworthy and professional
Indigo: #6366f1 - Modern and sophisticated
Purple: #a855f7 - Creative and unique
Pink: #ec4899 - Playful and approachable

Dark Mode Friendly

Light Gray: #f3f4f6 - Works well on dark backgrounds
Light Blue: #93c5fd - Soft and visible
Light Green: #86efac - Fresh and modern

Tip

For best results, ensure sufficient contrast between the button color and your background. Use browser DevTools to test accessibility.

Best Practices

Match your brand

Use your brand's primary or accent color to make the button feel integrated with your design.

Consider accessibility

Ensure the button is visible and accessible. Avoid colors that blend into your background.

Test on mobile

Check how the button looks and feels on mobile devices. The position may need adjustment.

Respect user preferences

If your app has a theme switcher, update the button color to match the active theme.

Keep it consistent

Once you choose a position and color, stick with it. Consistency improves user experience.

Monitor engagement

Track how many users click the button. If engagement is low, try a different color or position.

Troubleshooting

Complete Example

Here's a fully customized setup with all options:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>

  <!-- SeggWat Feedback Button -->
  <script defer
    src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
    data-project-key="YOUR_PROJECT_KEY"
    data-button-color="#10b981"
    data-button-position="right-side"
    data-language="en">
  </script>

  <!-- Dynamic customization -->
  <script>
    window.addEventListener('load', () => {
      // Update based on user theme preference
      const isDarkMode = document.documentElement.classList.contains('dark')

      window.SeggwattFeedback?.updateAppearance({
        color: isDarkMode ? '#86efac' : '#10b981'
      })

      // Listen for theme changes
      const observer = new MutationObserver(() => {
        const isDark = document.documentElement.classList.contains('dark')
        window.SeggwattFeedback?.updateAppearance({
          color: isDark ? '#86efac' : '#10b981'
        })
      })

      observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ['class']
      })
    })
  </script>
</head>
<body>
  <!-- Your content -->
</body>
</html>

Next Steps

Widget Installation

Learn how to install the feedback widget on your site

Internationalization

Configure multi-language support for global audiences

Example projects

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

API Reference

Build custom integrations with the SeggWat API

Note

Need more customization options? Let us know at info@seggwat.com. We're always adding new features based on user feedback!