Language Selectors

All TML SDKs come with a number of different language selectors that you can choose from.

To add a language to a page, simply provide an HTML tag with data-tml-language-selector attribute, as in the following example:

<div data-tml-language-selector="default"></div>  

The language selector will be automatically generated and injected into the page at the render time.

In production mode, only the published languages from the current release version will be shown. In translation mode, all languages available in the application will be displayed.

In most SDKs you can use a helper method to inject the language selector tag.

Ruby on Rails

<%= tml_language_selector_tag(:default) %>  


<?php tml_language_selector_tag("default") ?>  

Node.js Express



<tml:language_selector type="default" />  


Language selectors can be customized using the following options. Not all options are available for every selector.

All options must be prefixed with "data-tml-".

Attribute Description
language-selector Specifies the type of the language selector
language-selector-element Defines the element type to use for the injected language selector
toggle Indicates wether the "Enable Inline Translations" should be available
toggle-label Custom text for the toggle label
refresh Indicates if the page should be refreshed when a language is selected. For server side SDK refresh is always on. If the page is not refreshed a callback function can be used to provide the functionality of the language change
language The language to be used to display the language names. Available options are: english, native
powered-by Indicates wether the Powered By should be displayed in the selector
side Some floating language selectors, like the sideflags, can be attached to any side. Available options are: left, right


<div data-tml-language-selector="default"></div>  


If you are using Bootstrap, you can use our language selector that was specifically made for it. Simply add the following tag anywhere on your page, and the language selector will appear in it.

<div data-tml-language-selector="bootstrap"></div>  

If you would like to put our language selector in the list element, like in the navigation bar of your site, you can use the following code to indicate that the container element is already defined and the language selector will not add any additonal containers.

<li data-tml-language-selector="bootstrap" data-tml-language-selector-element="none"></li>  

Popup is our most flexible, library independent and smart language selector. You can place it anywhere and it will always adjust its own display based on the available space on the UI, language direction, etc.

<div data-tml-language-selector="popup"></div>  

If your site supports a large number of languages, then dropdown could be the right solution for you.

<div data-tml-language-selector="dropdown"></div>  


Flags will display a list of language flag icons with titles displayed on rollover.

<div data-tml-language-selector="flags"></div>  


The flags will be displayedin a floating bar on the left or the right side of the page.

<div data-tml-language-selector="sideflags"></div>  


List a good solution for s smaller number of languages. It is a common solution for WordPress integrations.

<div data-tml-language-selector="list"></div>