Implementing a Language Selector
Before launching your translated websites on the Smartling Global Delivery Network (GDN), you need to implement a method that allows your users to access your translated sites.
To ensure your users are directed to the correct localized site, and are able to switch back to a different language, you will need to use your own preferred solution on top of the GDN.
There are multiple solutions that can be implemented either alone or in conjunction with one another to allow your users to select a language. The success of each one depends on how you are targeting your users.
- Language Selector: Allows your users to choose a language option for your website.
- Geographic Map Selector: Allows your users to pick a country and language from a world map.
- Country Selector: Allows your users to select a country from a drop-down menu.
By default, the Global Delivery Network will automatically rewrite any links from your source domain to its localized version to make sure your users are getting a consistent experience. For this reason, language selectors you create must use Smartling classes to handle their links in a manner that lets users reach their intended languages.
Translating Language Selectors
For selectors where you want to also translate language names, we recommend using our "sl_norewrite" and "notranslate" classes in your HTML elements that contain your selector:
<div class="sl_norewrite language_selector">
<li class="notranslate"><a href="https://www.yourwebsite.com">English</a></li>
In the above example, using "sl_norewrite" will prevent the automatic rewrite behavior so your links are not modified from the source, but the strings for "German", "French", and "Spanish" are ingested for translation. Note that "notranslate" can be used to prevent English from being ingested as it would stay the same.
Preventing Translation of Selectors
For selectors where you do not want to translate language names or you are using a third-party tool that automatically generates a selector with translated language names, we recommend using our Opaque class in your HTML elements that contain your selector:
<div class="sl_opaque language_selector">
In the above example, using "sl_opaque" will prevent the automatic rewrite behavior and will serve the text strings exactly as they appear on the source site.
Your browser uses headers whenever a request is made or accepted. These headers can be leveraged by your networking team to deliver a translated site based on header values with appropriate server-side code. Smartling recommends considering the following headers for this behavior:
- Accept-Language: A browser automatically sends this header as part of the request for a webpage based on the user's own language preferences.
- X-Language-Locale: The Global Delivery Network automatically sends this header with its corresponding locale as the value.
- Cookie: You can also use unique cookie values for each language to determine user language.
Forced IP or "Ghost Selector"
You have the ability to direct users to your end site depending on the IP address of your user. Similar to using a Language Header, you will need to work with your network team to configure server-side code that directs users to your localized site. However, they will also need to use IP geolocation technologies such as Maxmind to help determine where the user is actually located.