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:
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") ?>
<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-".
|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|
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.
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.
If your site supports a large number of languages, then dropdown could be the right solution for you.
Flags will display a list of language flag icons with titles displayed on rollover.
The flags will be displayedin a floating bar on the left or the right side of the page.
List a good solution for s smaller number of languages. It is a common solution for WordPress integrations.