angle-downangle-leftangle-rightangle-upfacebookinstagramlinkedinTagtwitteryoutube-play
Skip to main content

Language switcher for a multilingual Drupal 8 site

Profile picture for user Minnur Yunusov
Minnur Yunusov Senior Drupal Developer Follow
October 28, 2019

Recently one of our clients asked us to come up with a better language detection and redirection solution for their multilingual Drupal 8 site. Most out of the box solutions do not provide a great user experience and IP based detection does not always work as expected. Browser-based redirection is also not an ideal option since at some point a visitor might want to manually choose which language they would like to see.

Having this issue in hand I started looking into possible solutions, I looked at a number of multilingual Drupal and non-Drupal sites and could not find anything that would work for our client. I thought what if we ask a visitor what to do by showing them a box with browser detected language. This is just like Chrome's translation prompt that asks you if you would like to translate the site. The prompt that is very simple and not as annoying as some auto-redirect solutions.

So this is what I came up with. A simple to use Drupal 8 module with few configurations needed. I decided to call it Language Suggestion.

The module supports auto redirects based on visitor selection and custom prompt messages per language. Here is the full list of configurable options:

  • Container CSS element. This is where you would need to specify the main page container. You may need this when you have some additional message boxes at the top of the page, e.g. Cookie usage etc.. By default this is set to "body" HTML tag.
  • Always redirect. This option adds auto-redirect to the website based on previously suggested language selection.
  • Redirect to [langcode].domain.com, domain.com/[langcode] or custom domains.
  • Language switch CSS element. This option overrides the auto language redirect. For instance when used after auto redirect still wants to switch to another language they will be able to do so. Make sure to specify language switch element class name or ID.
  • Language suggestion delay. This option allows the language suggestion box to appear with delay. The value is in seconds.
  • Dismiss delay. This option indicates how long language suggestion box should be hidden and when to reappear.
  • The browser language mapping is the mapping where you specify when to show language suggestions.
  • Browser-based/HTTP header-based (Experimental) language detection.

Language mapping page:

Language Suggestion Drupal 8 mapping page

Language settings page:

Language Suggestion Drupal 8 settings page

This is how language suggestion box appears on the site:

Language Suggestion Drupal 8 suggestion box

Configuration page is located at (Administration > Configuration > Regional and language > Language Suggestion/admin/config/regional/language-suggestion

To test the module please make sure you have only one language in your browser settings. The language should be different from your current website language. And make sure that language is enabled in your Drupal 8 site.

I tried to keep visitor's interaction annoyance level with the language suggestion prompt to its minimum. I hope this solution could be useful for you and your clients or give you some good ideas.

Download Language Suggestion

or composer require drupal/language_suggestion

How Can We Help With
Your Next Project?