SeggWat LogoSeggWat
BlogDashboard

Internationalization (i18n)

Configure multi-language support for the SeggWat feedback widget

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:

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

Manual Language Selection

Explicitly set the language using the data-language attribute:

html
<!-- German -->
<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-language="de"></script>
html
<!-- Swedish -->
<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-language="sv"></script>
html
<!-- 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:

Element English German Swedish
Button Feedback Feedback Feedback
Modal Title Send Feedback Feedback senden Skicka feedback
Modal Subtitle We'd love to hear your thoughts! Wir freuen uns auf Ihr Feedback! Vi skulle gärna höra dina tankar!
Label Your Feedback Ihr Feedback Din feedback
Placeholder Tell us what you think... Sagen Sie uns, was Sie denken... Berätta vad du tycker...
Cancel Button Cancel Abbrechen Avbryt
Submit Button Send Feedback Feedback senden Skicka feedback
Sending... Sending... Wird gesendet... Skickar...
Success Thank you for your feedback! Vielen Dank für Ihr Feedback! Tack för din feedback!
Error Sorry, there was an error... Entschuldigung, beim Senden... Tyvärr uppstod ett fel...

How It Works

Language Detection Flow

graph TD
    A[Widget Loads] --> B{data-language set?}
    B -->|Yes| C[Use specified language]
    B -->|No| D[Detect browser language]
    D --> E{Language supported?}
    E -->|Yes| F[Use detected language]
    E -->|No| G[Fallback to English]
    C --> H{Language file exists?}
    H -->|Yes| I[Load translations]
    H -->|No| G
    F --> I
    G --> I
    I --> J[Render widget]

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:

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

Example: Language Switcher Integration

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

Examples

Multi-language Website

Serve different languages based on your site's current locale:

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