Display Click to Chat Widget Based on User Language

/ docs / By

We can customize the visibility of certain content on your website depending on the user’s language settings. This is useful when you want to display different elements based on the language the user’s browser is set to.

Here’s how you can achieve this using CSS:

Example

When we want to show or hide a specific element, such as a chat widget, based on the user’s language, the lang attribute in the <html> tag can serve as a reliable indicator of the user’s language preferences. This attribute enables us to apply conditional CSS rules tailored to different languages effectively.

/* Hide the chat widget for specific languages */
html[lang="en-US"] .ht-ctc-chat,  /* English (US) */
html[lang="es-ES"] .ht-ctc-chat,  /* Spanish (Spain) */
html[lang="sv-SE"] .ht-ctc-chat,  /* Swedish (Sweden) */
html[lang="pl-PL"] .ht-ctc-chat { /* Polish (Poland) */
     display: none !important;   /*not important*/
}

In this example:

  • The chat widget (.ht-ctc-chat) will be hidden when the user’s browser language is set to English (US), Spanish (Spain), Swedish (Sweden), or Polish (Poland).
  • You can change the lang attribute values to target other languages as well.

If you want to show or hide other elements for different languages, just update the html[lang="..."] value with the appropriate language code and target the desired element.

For instance, to hide a click-to-chat widget only on French pages, you could use:

/* hide the English message only for users with a en-US language setting */
html[lang="en-US"] .ht-ctc-chat {
    display: block;
}
  • You can check the language from the browser itself. By inspecting (F12) the code from inspect browser tools.

By using this method, you can manage language-specific content efficiently.