Customization - SeggWat

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:

<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-color

string

default:"#2563eb"

Customize the button’s background color using any valid hex color code.Example:

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)

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

Button Position

data-button-position

string

default:"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:

data-button-position="icon-only"

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-language

string

default:"auto-detect"

Set the interface language for the feedback widget.Supported languages:

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

Example:

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-url

string

default:"auto-detect"

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

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

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

Version Tracking

data-version

string

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

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)

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-by

boolean

default:"true"

Show or hide the “Powered by SeggWat” label in the feedback modal footer.Example:

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.

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:

<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:

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

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:

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

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:

German
Swedish
Auto-Detect

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

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

<!-- Omit data-language to auto-detect from browser -->
<script defer
  src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
  data-project-key="YOUR_PROJECT_KEY">
</script>

White-Label Setup

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

<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

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:

<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

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

Change Position

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

Change Language

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

Update Multiple Properties

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

Theme Switcher Example

Synchronize the button with your app’s theme:

<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:

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:

Environment Variable
Webpack
Vite
Next.js

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

webpack.config.js

const webpack = require('webpack')
const packageJson = require('./package.json')

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.APP_VERSION': JSON.stringify(packageJson.version)
    })
  ]
}

Then in your HTML:

<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="YOUR_PROJECT_KEY"
        data-version="<%= process.env.APP_VERSION %>"></script>

vite.config.js

import { defineConfig } from 'vite'
import { readFileSync } from 'fs'

const packageJson = JSON.parse(readFileSync('./package.json', 'utf-8'))

export default defineConfig({
  define: {
    '__APP_VERSION__': JSON.stringify(packageJson.version)
  }
})

Then in your HTML:

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

app/layout.tsx

import Script from 'next/script'
import packageJson from '../package.json'

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
          data-project-key="YOUR_PROJECT_KEY"
          data-version={packageJson.version}
          strategy="lazyOnload"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

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:

<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):

- 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:

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:

<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:

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

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

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

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

Button not visible on my site

Check these issues:

Ensure the color contrasts with your background
Check if CSS conflicts are hiding the button
Verify z-index issues with other floating elements
Test on different screen sizes and devices

Solution:

// Force visibility and z-index
const button = document.getElementById('seggwat-feedback-button')
if (button) {
  button.style.zIndex = '99999'
  button.style.display = 'flex'
}

Color not updating

Common causes:

Browser caching the CSS
Invalid hex color format (missing #)
Timing issue (trying to update before widget loads)

Solution:

// Wait for widget to load
window.addEventListener('load', () => {
  setTimeout(() => {
    window.SeggwattFeedback?.updateAppearance({
      color: '#ef4444'
    })
  }, 1000)
})

Position overlaps with my content

Solutions:

Try the alternate position (right-side ↔ bottom-right)
Hide the button on specific pages
Adjust your layout to accommodate the button
Use custom CSS to fine-tune positioning:

#seggwat-feedback-button {
  bottom: 80px !important; /* Move up if overlapping footer */
}

Button too small/large on mobile

The button is automatically responsive, but you can adjust with CSS:

@media (max-width: 768px) {
  #seggwat-feedback-button {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
}

Complete Example

Here’s a fully customized setup with all options:

<!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

React Integration

See how to customize the widget in React applications

API Reference

Build custom integrations with the SeggWat API

Need more customization options? Let us know at [email protected]. We’re always adding new features based on user feedback!

General

Widgets

Features

​Quick Customization

​Available Options

​Button Color

​Button Position

​Language

Multi-language support

​API URL (Advanced)

​Version Tracking

​Branding Control

​Common Configurations

​Match Your Brand

​Popular Framework Colors

​Vertical Side Button

​Icon-Only (Compact & Minimal)

​International Audience

​White-Label Setup

​Dynamic Customization

​Change Color

​Change Position

​Change Language

​Update Multiple Properties

​Theme Switcher Example

​User Preference Example

​Advanced Techniques

​Automated Version Injection

​Git Commit Hash as Version

​Version-Based Feedback Routing

​Conditional Rendering

​A/B Testing Colors

​Hide on Specific Pages

​Mobile vs Desktop Positioning

​Color Picker

​Neutral Colors

​Vibrant Colors

​Dark Mode Friendly

​Best Practices

Match your brand

Consider accessibility

Test on mobile

Respect user preferences

Keep it consistent

Monitor engagement

​Troubleshooting

​Complete Example

​Next Steps

Widget Installation

Internationalization

React Integration

API Reference

Quick Customization

Available Options

Button Color

Button Position

Language

API URL (Advanced)

Version Tracking

Branding Control

Common Configurations

Match Your Brand

Popular Framework Colors

Vertical Side Button

Icon-Only (Compact & Minimal)

International Audience

White-Label Setup

Dynamic Customization

Change Color

Change Position

Change Language

Update Multiple Properties

Theme Switcher Example

User Preference Example

Advanced Techniques

Automated Version Injection

Git Commit Hash as Version

Version-Based Feedback Routing

Conditional Rendering

A/B Testing Colors

Hide on Specific Pages

Mobile vs Desktop Positioning

Color Picker

Neutral Colors

Vibrant Colors

Dark Mode Friendly

Best Practices

Troubleshooting

Complete Example

Next Steps