Building a custom language switcher

The built-in switcher covers most sites, and custom CSS takes care of most styling. If you want something completely your own, such as links in your footer or a menu in your navigation, you can build it yourself. All you need to know is how SwiftLingo structures its URLs.

How the URLs work

Each translation lives on a subdomain made of the language code and your website URL as configured in SwiftLingo. The path, query string and anchor stay the same:

Language	URL
Original	https://example.com/pricing?plan=pro
French	https://fr.example.com/pricing?plan=pro
Brazilian Portuguese	https://pt-br.example.com/pricing?plan=pro

Language codes are lower case. DNS Configuration in Settings › Website lists the exact hostnames for your site.

Example

A dropdown that takes the visitor to the same page in another language. Set SITE_HOST to your website URL as configured in SwiftLingo, and list your own languages:

<select id="language-select" aria-label="Language" translate="no">
  <option value="">English</option>
  <option value="fr">Français</option>
  <option value="de">Deutsch</option>
</select>

<script>
  const SITE_HOST = 'example.com';
  const select = document.getElementById('language-select');

  // On fr.example.com the current language is "fr"; on example.com it's the original.
  const host = location.hostname;
  select.value = host === SITE_HOST ? '' : host.slice(0, -(SITE_HOST.length + 1));

  select.addEventListener('change', () => {
    const target = select.value ? `${select.value}.${SITE_HOST}` : SITE_HOST;
    location.href = `${location.protocol}//${target}${location.pathname}${location.search}${location.hash}`;
  });
</script>

Because SwiftLingo serves your own HTML, this snippet works the same on your original site and on every translation.

Tips

• Only list live languages. A language in Preview still works at its URL, but you probably don’t want visitors to find it yet. See Managing languages.
• Keep the language names untranslated. The example has translate="no" on the <select>, so “English” doesn’t become “Anglais” on the French site. See Excluding content from translation.
• Don’t load the built-in switcher as well, unless you want both.