# Language suggestion The **Language suggestion** block shows a banner that offers the visitor the version of the page in their language. The banner is written in that language and never redirects the visitor. This page describes its styling, the conditions for showing it and the choice of the language offered. ## Add the block Insert the **Language suggestion** block ([Add a block](https://lovelyrender.com/documentation/add-block/)) once, in the site header or at the top of your templates: the visitor sees it on arrival. Placed there, it applies to all the pages that show it. The block never redirects. A visitor whose browser is set to English may want to read your French page: the banner offers their language and they choose. Google advises against redirecting based on the visitor’s presumed language. **Note:** On a single-language site, the block shows nothing. Its settings display “This block appears as soon as the site has at least two content languages”. You can place it now: it will work the day you add a language ([Add a language](https://lovelyrender.com/documentation/add-language/)). ## Style the banner The block has nothing to set in its **Settings** tab: its **Language suggestion** panel only holds a help text. The banner is styled in the **Styles** tab. | Panel | Purpose | | --- | --- | | **Icons** | An icon at the start of the banner, before the sentence. An icon at the end of the link, after the language name. Both are optional and each can change with the state, as on a [Button](https://lovelyrender.com/documentation/button-block/). | | **Colors**, **Typography**, **Size & Spacing**, **Borders**, **Effects**, **Transitions** | The look of the banner, in the **Default**, **Hover** and **Focus** states. The **Focus** state turns on when the link receives keyboard focus. See [Color a block](https://lovelyrender.com/documentation/color-block/), [Format a text](https://lovelyrender.com/documentation/format-text/) and [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/). | | **Flex layout** | The sentence and the link, in a row. The saved style **Language suggestion** puts 8 px between them. | | Icon | Position | State change | | --- | --- | --- | | At the start | Before the sentence, at the head of the banner. | Hover or focus on the banner. | | At the end | In the link, after the language name. | Hover or focus on the link. | The block has no **Animations** tab: the banner is composed by the server on each visit. In the editor, the banner appears in the language of your interface, with a sample language name, so you can style it. On the site, the text and the language offered depend on each visitor. **Tip:** An arrow pointing right as the end icon tells the visitor that the link takes them somewhere. Set a slightly shifted arrow on the **Hover** state: the link reacts to hover like a button. ## When the banner appears The banner only appears if all these conditions are met. Otherwise, it takes no space in the page. | Condition | Reason | | --- | --- | | The page is a content item that has a translation, or the home page of a multilingual site. | A list, a search results page or an error page has no equivalent in another language. On the home page, the banner offers the home page of the other language. | | The translation is published and has no password. | A draft would lead to a preview address, a protected page to a password form. | | The visitor’s browser asks for another language before the page’s language. | This is what the visitor declares they read. | | The visitor is not a robot. | A search engine would read the banner as text of your page. | The banner has no close button. It disappears when the visitor follows the link: the page in their language no longer shows the banner. ## The language offered - The banner follows the languages the browser declares, in their order of preference. It does not start from the visitor’s country. - The first language in this list that exists for the page decides. If it is the page’s language, nothing appears. A browser set to German then English, on a French page translated into English only, is offered English. - A browser set to Swiss French finds your French: a plain language serves all its variants. - When the site has several variants of a language, British English and American English for example, the banner offers the one the browser names. Failing that, it offers the one of the visitor’s country, then the first in the order of your languages. - The banner never offers another variant of the page’s language. ## The banner text The sentence, the link and the language name are written in the language offered: | Suggested language | Sentence | Link | | --- | --- | --- | | English | View this page in your preferred language. | Switch to English | | French | Voir cette page dans votre langue préférée. | Passer en français | The language name is written in that language, in lowercase within the sentence: “Passer en français”. **Warning:** The product ships in French and English. For any other content language, the sentence and the link stay in English. Only the language name is in its own language: “Switch to Deutsch”. Translate them in the interface translations screen, in the **The product’s block editor** tab, by searching for `language-suggestion`. Keep the `%s` of the link: this is where the language name is inserted ([Translate your labels and messages](https://lovelyrender.com/documentation/translate-labels/)). ## On a phone The sentence and the link are in a row. To make the link wrap under the sentence on a narrow screen, choose the Mobile screen. Turn on **Wrap** in the **Flex layout** panel. ## Accessibility - The banner declares its language: a screen reader changes voice to read it. - The link declares the language of its destination. - The icons are decorative and hidden from screen readers. - The banner is announced as a note: it does not interrupt reading. ## See also - [Language switcher](https://lovelyrender.com/documentation/language-switcher-block/) - [Offer visitors their language](https://lovelyrender.com/documentation/offer-visitor-language/) - [Translate a page](https://lovelyrender.com/documentation/translate-page/)