Did you know..? You can create a fully custom language selector in Transifex Live!

Tips and Tricks
,
1

Did you know that as soon as you publish translations with Transifex Live, a language picker automatically appears at the bottom-left corner of your website? This default widget lets visitors quickly switch between available languages, and it even detects browser preferences to show the right one automatically.

But what if you want more control, like placing the picker in your navigation bar, footer, or giving it a design that matches your brand? That’s where the custom language selector comes in.

Why create a custom language selector?

  • Brand alignment: Style it to look native to your site.

  • Flexibility: Place it anywhere, header, sidebar, or a dropdown in your nav.

  • Better UX: Give users a seamless way to switch languages without breaking your layout.

How it works

Transifex Live lets you define where the language picker should appear using the picker property in the window.liveSettings object.

Instead of using one of the default corner positions (bottom-left, bottom-right, top-left, top-right), you can point the picker to any element on your site using a CSS selector.

With a custom language selector, you can decide exactly how and where visitors switch between languages.

Example 1: Custom picker with a <ul> element

Here’s an example of building your own language selector as a list of clickable items:

<div id="language-widget">
  <span id="language-current"></span>
  <ul id="language-selector"></ul>
</div>

<script>
  //This is called each time the languages list is retrieved
  //from Transifex Live. This may happen more than once.
  Transifex.live.onFetchLanguages(function(languages) {
  //set the language selector to the source language (default)
  $('#language-current').html(
      Transifex.live.getSourceLanguage().name
  );

  //empty our language list
  $('#language-selector').empty();

  //add translation languages to the list
  for (var i = 0; i < languages.length; ++i) {
      $('#language-selector').append(
          '<li data-code="' + languages[i].code +
          '" data-name="' + languages[i].name +
          '">' + languages[i].name + '</li>'
      );
  }

  //handle user selecting a language
  $('#language-selector').find('li').click(function(e) {
      e && e.preventDefault();
      var code = $(this).closest('[data-code]').data('code');
      var name = $(this).closest('[data-code]').data('name');

      //tell transifex live to translate the page
      Transifex.live.translateTo(code, true);
  });

  //update widget when translation occurs
  Transifex.live.onTranslatePage(function(language_code) {
      $('#language-current').html(
          Transifex.live.getLanguageName(language_code)
      );
  });
  });
</script>

This creates a widget where the current language is shown, and users can click any item in the list to switch languages.

Example 2: Custom picker with a <select> element

If you prefer a dropdown style, here’s how you can do it with a element:

<select id="language-select"></select>

<script>
  //Called each time the languages list is retrieved
  Transifex.live.onFetchLanguages(function(languages) {
  //empty our language <select> list 
  $('#language-select').empty();

  //add translation languages to the list
  for (var i = 0; i < languages.length; ++i) {
      $('#language-select').append(
          '<option value="' + languages[i].code +
          '">' + languages[i].name + '</option>'
      );
  }

  //set the selector to the source language (default)
  $('#language-select').val(
    Transifex.live.getSourceLanguage().code
  );

  //handle user selecting a language
  $('#language-select').change(function() {
      Transifex.live.translateTo($(this).val());
  });

  //update the <select> when page is translated
  Transifex.live.onTranslatePage(function(language_code) {
      $('#language-select').val(language_code);
  });
  });
</script>

This setup populates the dropdown dynamically and automatically updates when the user switches to a new language.

Wrap-up

The default picker is a quick solution, but the custom language selector is the real game-changer: it keeps your multilingual site professional, consistent, and user-friendly.

So next time you publish translations, don’t settle for the default—make your own picker and give users a smooth, on-brand way to choose their preferred language.