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

🇫🇷 French

Code: fr

🇩🇰 Danish

Code: da

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
<!-- French -->
<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-language="fr"></script>
html
<!-- Danish -->
<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"
        data-language="da"></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 French Danish
Button Feedback Feedback Feedback Avis Feedback
Modal Title Send Feedback Feedback senden Skicka feedback Envoyer un avis Send feedback
Modal Subtitle We'd love to hear your thoughts! Wir freuen uns auf Ihr Feedback! Vi skulle gärna höra dina tankar! Nous serions ravis de connaître votre avis ! Vi vil meget gerne høre dine tanker!
Label Your Feedback Ihr Feedback Din feedback Votre avis Din feedback
Placeholder Tell us what you think... Sagen Sie uns, was Sie denken... Berätta vad du tycker... Dites-nous ce que vous en pensez... Fortæl os, hvad du synes...
Cancel Button Cancel Abbrechen Avbryt Annuler Annuller
Submit Button Send Feedback Feedback senden Skicka feedback Envoyer l'avis Send feedback
Sending... Sending... Wird gesendet... Skickar... Envoi en cours... Sender...
Success Thank you for your feedback! Vielen Dank für Ihr Feedback! Tack för din feedback! Merci pour votre avis ! Tak for din feedback!
Error Sorry, there was an error... Entschuldigung, beim Senden... Tyvärr uppstod ett fel... Désolé, une erreur s'est produite... Beklager, der opstod en fejl...

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, fr, da)
  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

The language is loaded once, when the widget initializes. updateAppearance() does not change it. To switch language at runtime, call destroy() and inject the script again with a new data-language:

javascript
function setFeedbackLanguage(lang) {
  window.SeggwatFeedback?.destroy();

  const s = document.createElement('script');
  s.src = 'https://seggwat.com/static/widgets/v1/seggwat-feedback.js';
  s.dataset.projectKey = 'your-project-key';
  s.dataset.language = lang;
  document.body.appendChild(s);
}

Example: Language Switcher Integration

html
<select id="language-picker" onchange="onLanguageChange(this.value)">
  <option value="en">English</option>
  <option value="de">Deutsch</option>
  <option value="sv">Svenska</option>
  <option value="fr">Français</option>
  <option value="da">Dansk</option>
</select>

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

    // Re-create the feedback widget in the new language
    setFeedbackLanguage(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