Translations & Language Switching

Overview

Stringboot makes multi-language support effortless with automatic language detection, smooth language switching, and AI-powered translations from the dashboard. Support global users without complex i18n libraries.

Key Benefits

Auto-Detection

Automatically detects browser/user language

Instant Switching

Change language without page reload

AI Translations

Generate translations from dashboard

Offline Support

All languages cached in IndexedDB

Quick Start

1. Add Languages in Dashboard

Go to Stringboot Dashboard → Languages → Add Language:

Select application
Choose language (e.g., Spanish - es)
Enable AI Translation
Click Save

2. Use Browser Locale

main.js

import StringBoot from '@stringboot/web-sdk';

// Detect browser language
const browserLang = navigator.language.split('-')[0]; // 'en', 'es', 'fr', etc.

await StringBoot.initialize({
  apiToken: 'YOUR_API_TOKEN',
  baseUrl: 'https://api.stringboot.com',
  defaultLanguage: browserLang,
  analyticsHandler: yourAnalyticsHandler
});

3. Strings Auto-Load in User’s Language

import { useString } from '@stringboot/web-sdk/react';

function WelcomeMessage() {
  const welcomeText = useString('welcome_message');
  return <h1>{welcomeText}</h1>;
}
// Shows "Welcome!" in English
// Shows "¡Bienvenido!" in Spanish
// Shows "Willkommen!" in German

Language Detection

Detect Browser Language

const browserLang = navigator.language.split('-')[0];
// Returns: "en", "es", "fr", "de", etc.

await StringBoot.initialize({
  defaultLanguage: browserLang
});

Get Available Languages

const languages = await StringBoot.getActiveLanguages();
console.log(languages);
// [
//   { code: 'en', name: 'English' },
//   { code: 'es', name: 'Spanish' },
//   { code: 'fr', name: 'French' }
// ]

React version:

import { useActiveLanguages } from '@stringboot/web-sdk/react';

function LanguageList() {
  const { languages, loading } = useActiveLanguages();

  if (loading) return <div>Loading...</div>;

  return (
    <ul>
      {languages.map(lang => (
        <li key={lang.code}>{lang.name}</li>
      ))}
    </ul>
  );
}

Language Switching

LanguageSwitcher.jsx

import { useState } from 'react';
import { useLanguage, useActiveLanguages } from '@stringboot/web-sdk/react';

function LanguageSwitcher() {
  const [currentLang, setLanguage] = useLanguage();
  const { languages, loading } = useActiveLanguages();
  const [isSwitching, setIsSwitching] = useState(false);

  const switchLanguage = async (newLang) => {
    setIsSwitching(true);

    // Change language
    await setLanguage(newLang);

    // Save preference
    localStorage.setItem('preferred_language', newLang);

    setIsSwitching(false);
  };

  if (loading) return <div>Loading languages...</div>;

  return (
    <select
      value={currentLang}
      onChange={(e) => switchLanguage(e.target.value)}
      disabled={isSwitching}
    >
      {languages.map(lang => (
        <option key={lang.code} value={lang.code}>
          {lang.name}
        </option>
      ))}
    </select>
  );
}

async function switchLanguage(newLanguage) {
  // Show loading
  document.getElementById('loader').style.display = 'block';

  try {
    // Change language
    await StringBoot.changeLanguage(newLanguage);

    // Save preference
    localStorage.setItem('preferred_language', newLanguage);

    // Update current language display
    updateLanguageDisplay(newLanguage);

  } catch (error) {
    console.error('Language switch failed:', error);
    alert('Failed to switch language');
  } finally {
    document.getElementById('loader').style.display = 'none';
  }
}

LanguagePicker.jsx

import { useLanguage, useActiveLanguages } from '@stringboot/web-sdk/react';

function LanguagePicker() {
  const [currentLang, setLanguage] = useLanguage();
  const { languages } = useActiveLanguages();

  return (
    <div className="language-picker">
      <h3>Select Language</h3>
      <div className="language-grid">
        {languages.map(lang => (
          <button
            key={lang.code}
            onClick={() => setLanguage(lang.code)}
            className={currentLang === lang.code ? 'active' : ''}
          >
            {lang.name}
          </button>
        ))}
      </div>
    </div>
  );
}

<div id="language-picker"></div>

<script>
async function renderLanguagePicker() {
  const languages = await StringBoot.getActiveLanguages();
  const currentLang = StringBoot.getCurrentLanguage();

  const picker = document.getElementById('language-picker');
  picker.innerHTML = `
    <select id="lang-select">
      ${languages.map(lang => `
        <option value="${lang.code}" ${lang.code === currentLang ? 'selected' : ''}>
          ${lang.name}
        </option>
      `).join('')}
    </select>
  `;

  document.getElementById('lang-select').addEventListener('change', (e) => {
    switchLanguage(e.target.value);
  });
}

renderLanguagePicker();
</script>

Persisting Language Preference

Save on Change

async function switchLanguage(newLang) {
  await StringBoot.changeLanguage(newLang);
  localStorage.setItem('preferred_language', newLang);
}

Load on App Start

import StringBoot from '@stringboot/web-sdk';

// Get saved language or detect browser language
const savedLang = localStorage.getItem('preferred_language');
const browserLang = navigator.language.split('-')[0];
const defaultLang = savedLang || browserLang || 'en';

await StringBoot.initialize({
  apiToken: 'YOUR_API_TOKEN',
  baseUrl: 'https://api.stringboot.com',
  defaultLanguage: defaultLang,
  analyticsHandler: yourAnalyticsHandler
});

React version:

App.jsx

import { useStringBoot } from '@stringboot/web-sdk/react';

function App() {
  const savedLang = localStorage.getItem('preferred_language');
  const browserLang = navigator.language.split('-')[0];
  const defaultLang = savedLang || browserLang || 'en';

  const { initialized } = useStringBoot({
    apiToken: import.meta.env.VITE_STRINGBOOT_API_TOKEN,
    baseUrl: 'https://api.stringboot.com',
    defaultLanguage: defaultLang,
    analyticsHandler: yourAnalyticsHandler
  });

  if (!initialized) return <div>Loading...</div>;
  return <YourApp />;
}

Advanced Patterns

Language-Specific Formatting

function formatPrice(amount, languageCode) {
  const locales = {
    'en': 'en-US',
    'es': 'es-ES',
    'fr': 'fr-FR',
    'de': 'de-DE'
  };

  const locale = locales[languageCode] || 'en-US';

  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: languageCode === 'en' ? 'USD' : 'EUR'
  }).format(amount);
}

// Usage
const price = formatPrice(29.99, currentLanguage);
// English (US): "$29.99"
// Spanish (ES): "29,99 €"
// French (FR): "29,99 €"

Date Formatting

function formatDate(date, languageCode) {
  return new Intl.DateTimeFormat(languageCode, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(date);
}

const formattedDate = formatDate(new Date(), 'es');
// Spanish: "15 de enero de 2024"

React Patterns

Language Context Provider

LanguageContext.jsx

import { createContext, useContext } from 'react';
import { useLanguage } from '@stringboot/web-sdk/react';

const LanguageContext = createContext();

export function LanguageProvider({ children }) {
  const [language, setLanguage] = useLanguage();

  const changeLanguage = async (newLang) => {
    await setLanguage(newLang);
    localStorage.setItem('preferred_language', newLang);
  };

  return (
    <LanguageContext.Provider value={{ language, changeLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
}

export const useAppLanguage = () => useContext(LanguageContext);

Language Switcher Component

import { useAppLanguage } from './LanguageContext';
import { useActiveLanguages } from '@stringboot/web-sdk/react';

function LanguageMenu() {
  const { language, changeLanguage } = useAppLanguage();
  const { languages } = useActiveLanguages();

  return (
    <div className="language-menu">
      {languages.map(lang => (
        <button
          key={lang.code}
          onClick={() => changeLanguage(lang.code)}
          className={language === lang.code ? 'active' : ''}
        >
          {lang.name}
        </button>
      ))}
    </div>
  );
}

Next.js Patterns

App Router with Language Support

app/layout.tsx

'use client';

import { useStringBoot, useLanguage } from '@stringboot/web-sdk/react';

export default function RootLayout({ children }) {
  const savedLang = typeof window !== 'undefined' 
    ? localStorage.getItem('preferred_language') 
    : null;

  const { initialized } = useStringBoot({
    apiToken: process.env.NEXT_PUBLIC_STRINGBOOT_API_TOKEN!,
    defaultLanguage: savedLang || 'en',
    analyticsHandler: yourAnalyticsHandler
  });

  if (!initialized) return <div>Loading...</div>;

  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

Best Practices

Always Persist Language Preference

// Save on change
localStorage.setItem('preferred_language', newLang);

// Load on start
const savedLang = localStorage.getItem('preferred_language');

Users expect their language choice to persist.

Provide Language Detection Fallback

const savedLang = localStorage.getItem('preferred_language');
const browserLang = navigator.language.split('-')[0];
const defaultLang = savedLang || browserLang || 'en';

Always have a fallback language.

Show Language in Settings

function Settings() {
  const [language] = useLanguage();

  return (
    <div>
      <p>Current Language: {language}</p>
      <LanguagePicker />
    </div>
  );
}

Make it easy for users to change language.

Common Use Cases

Global E-commerce Site

ProductPage.jsx

import { useString, useLanguage } from '@stringboot/web-sdk/react';

function ProductPage({ product }) {
  const [currentLang] = useLanguage();
  const addToCart = useString('button_add_to_cart');
  const price = formatPrice(product.price, currentLang);

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{price}</p>
      <button>{addToCart}</button>
    </div>
  );
}

Multi-Language Landing Page

import { useStrings } from '@stringboot/web-sdk/react';

function Hero() {
  const strings = useStrings([
    'hero_title',
    'hero_subtitle',
    'cta_button'
  ]);

  return (
    <section className="hero">
      <h1>{strings.hero_title}</h1>
      <p>{strings.hero_subtitle}</p>
      <button>{strings.cta_button}</button>
    </section>
  );
}

Next Steps

Dynamic Strings

Learn about string retrieval

A/B Testing

Optimize messaging with experiments

React Hooks

Complete hooks reference

API Reference

Language Methods

Method	Description	Returns
`getCurrentLanguage()`	Get current language code	`string`
`changeLanguage(lang)`	Change active language	`Promise<void>`
`getActiveLanguages()`	Get available languages	`Promise<ActiveLanguage[]>`

React Hooks

Hook	Description	Returns
`useLanguage()`	Get/set current language	`[string, (lang: string) => Promise<void>]`
`useActiveLanguages()`	Get available languages	`{ languages, loading, error }`

Troubleshooting

Language doesn't switch

Check:

Did you call changeLanguage() or setLanguage()?
Are strings available for that language?

Solution:

await StringBoot.changeLanguage(newLang);
// Or in React:
await setLanguage(newLang);

Translations not showing

Check:

Language added in dashboard?
Strings translated for that language?
Network sync successful?

Solution:

await StringBoot.sync();

Support

Dashboard: Languages

How to add languages

React Hooks

Complete hooks reference

Best Practices

Production patterns

Troubleshooting

Common issues

Overview

Android SDK

iOS SDK

Web SDK

Dashboard

Advanced

​Overview

​Key Benefits

Auto-Detection

Instant Switching

AI Translations

Offline Support

​Quick Start

​1. Add Languages in Dashboard

​2. Use Browser Locale

​3. Strings Auto-Load in User’s Language

​Language Detection

​Detect Browser Language

​Get Available Languages

​Language Switching

​Complete Language Switch (React)

​Complete Language Switch (Vanilla JS)

​Language Picker UI

​React Language Picker

​Vanilla JS Language Picker

​Persisting Language Preference

​Save on Change

​Load on App Start

​Advanced Patterns

​Language-Specific Formatting

​Date Formatting

​React Patterns

​Language Context Provider

​Language Switcher Component

​Next.js Patterns

​App Router with Language Support

​Best Practices

​Common Use Cases

​Global E-commerce Site

​Multi-Language Landing Page

​Next Steps

Dynamic Strings

A/B Testing

React Hooks

​API Reference

​Language Methods

​React Hooks

​Troubleshooting

​Support

Dashboard: Languages

React Hooks

Best Practices

Troubleshooting

Overview

Key Benefits

Quick Start

1. Add Languages in Dashboard

2. Use Browser Locale

3. Strings Auto-Load in User’s Language

Language Detection

Detect Browser Language

Get Available Languages

Language Switching

Complete Language Switch (React)

Complete Language Switch (Vanilla JS)

Language Picker UI

React Language Picker

Vanilla JS Language Picker

Persisting Language Preference

Save on Change

Load on App Start

Advanced Patterns

Language-Specific Formatting

Date Formatting

React Patterns

Language Context Provider

Language Switcher Component

Next.js Patterns

App Router with Language Support

Best Practices

Common Use Cases

Global E-commerce Site

Multi-Language Landing Page

Next Steps

API Reference

Language Methods

React Hooks

Troubleshooting

Support