Skip to main content

Overview

The SeggWat feedback widget supports multiple languages to provide a localized experience for your users. Language detection happens automatically based on the user’s browser settings, or you can specify a language explicitly.

Supported Languages

🇬🇧 English

Code: en (default)

🇩🇪 German

Code: de

🇸🇪 Swedish

Code: sv

Usage

Automatic Detection

By default, the widget automatically detects the user’s browser language:
<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"></script>
If the user’s browser is set to German (de-DE), the widget will display in German. If the browser language is not supported, English is used as a fallback.

Manual Language Selection

Explicitly set the language using the data-language attribute:
<!-- German -->
<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-language="de"></script>
<!-- Swedish -->
<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-language="sv"></script>
<!-- English (explicit) -->
<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-language="en"></script>

Translated Strings

All UI elements are translated, including:
ElementEnglishGermanSwedish
ButtonFeedbackFeedbackFeedback
Modal TitleSend FeedbackFeedback sendenSkicka feedback
Modal SubtitleWe’d love to hear your thoughts!Wir freuen uns auf Ihr Feedback!Vi skulle gärna höra dina tankar!
LabelYour FeedbackIhr FeedbackDin feedback
PlaceholderTell us what you think…Sagen Sie uns, was Sie denken…Berätta vad du tycker…
Cancel ButtonCancelAbbrechenAvbryt
Submit ButtonSend FeedbackFeedback sendenSkicka feedback
Sending…Sending…Wird gesendet…Skickar…
SuccessThank you for your feedback!Vielen Dank für Ihr Feedback!Tack för din feedback!
ErrorSorry, there was an error…Entschuldigung, beim Senden…Tyvärr uppstod ett fel…

How It Works

Language Detection Flow

Translation Loading

  1. Detection: The widget determines the language from data-language or navigator.language
  2. Validation: Checks if the language is in the supported list (en, de, sv)
  3. Fetching: Loads the translation file from /static/i18n/{lang}.json
  4. Fallback: If loading fails, uses hardcoded English translations
  5. Rendering: Displays the widget with translated text

Dynamic Language Updates

You can change the widget language after initialization without reloading the page:
// Switch to German
window.SeggwattFeedback.updateAppearance({ language: 'de' });

// Switch to Swedish
window.SeggwattFeedback.updateAppearance({ language: 'sv' });

// Switch back to English
window.SeggwattFeedback.updateAppearance({ language: 'en' });
This is useful for sites with a language picker. When users change their language preference, you can update the feedback widget to match without reloading the page.

Example: Language Switcher Integration

<select id="language-picker" onchange="updateFeedbackLanguage(this.value)">
  <option value="en">English</option>
  <option value="de">Deutsch</option>
  <option value="sv">Svenska</option>
</select>

<script>
  function updateFeedbackLanguage(lang) {
    // Update your site's language
    changeWebsiteLanguage(lang);

    // Update the feedback widget
    if (window.SeggwattFeedback) {
      window.SeggwattFeedback.updateAppearance({ language: lang });
    }
  }
</script>
The language change is asynchronous as it fetches new translation files. All UI text updates automatically, including the button text, modal title, labels, and messages.

Examples

Multi-language Website

Serve different languages based on your site’s current locale:
<!-- German page -->
<html lang="de">
  <head>
    <script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
            data-project-key="your-project-key"
            data-language="de"></script>
  </head>
</html>
<!-- Swedish page -->
<html lang="sv">
  <head>
    <script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
            data-project-key="your-project-key"
            data-language="sv"></script>
  </head>
</html>