Implementing a Dynamic Language Switcher Button with JavaScript

Introduction

Offering your content in multiple languages can significantly enhance user engagement and accessibility. To be audience centric you want to ensure your content speaks to users in a language they understand, offering your users a more personalized and engaging browsing experience.

Making the transition between languages seamless for your users is key. A dynamic language switcher button, implemented with JavaScript, is a straightforward and effective way to enhance your website's multilingual capabilities.

Improving User Experience

Implementing a dynamic language switcher button provides several benefits:

1. User-friendly Navigation: By providing a visible language switcher button, you're enabling users to navigate between language versions effortlessly.
2. Clutter-Free Interface: By ensuring the button appears only when needed, you maintain a clean and focused interface.
3. Enhanced Accessibility: Offering your content in multiple languages increases its accessibility, leading to broader audience engagement.
4. Increased Customer Centricity: Catering to user language preferences shows your commitment to serving their needs, which fosters trust.

The Magic of a Dynamic Language Switcher Button

The beauty of a dynamic language switcher button lies in its intelligent visibility. It appears when there's an alternate language version available for the content, and it remains hidden when there's no such alternate language defined. This avoids unnecessary clutter.

JavaScript: Making the Button Dynamic

JavaScript offers a straightforward and efficient way to implement this dynamic functionality. The following script creates a language switcher button that appears only when an alternate language version of the content is available.

This script scans all the 'link' elements in the HTML to find if an alternate language is defined. If an alternate language is found, it updates the text and URL of the language switcher button to correspond to the alternate language. If no alternate language is defined, it hides the button.

JavaScript Language Switcher Documentation

Introduction

This script provides a simple, client-side way to switch between different language versions of the same web page. The script works by dynamically changing the hyperlink and display text of a language switching link on the page, based on the alternate languages defined using link tags in the webpage's HTML.

How It Works

The script works in the following steps:

1. On page load, it fetches all the link tags from the document and identifies the language of the current page (as defined in the HTML lang attribute).
2. A dictionary languageNames is defined where the key represents the language code of the current page, and the value is the name of the alternate language to be displayed.
3. The script loops through all the link tags. When it finds a link tag with the rel attribute set to 'alternate' and its hreflang attribute different from the current page language and not 'x-default', it stores the URL of the alternate page in alternateUrl.
4. If an alternate language page URL is found (i.e., alternateUrl is not empty), the script updates the text content of the element with id 'language-text' to the name of the alternate language and updates the href attribute of the element with id 'language-link' to the URL of the alternate page.
5. If no alternate language page is found (i.e., alternateUrl remains an empty string), the language link on the webpage is hidden by setting its CSS display property to 'none'.

Usage

To use the script, you need to:

• Include link tags in the HTML for each language version of the page with appropriate hreflang and rel attributes.
• Have an element with id 'language-link' that serves as the language switching link.
• Have an element with id 'language-text' to display the name of the alternate language.
• Add the appropriate language pairs to the languageNames dictionary in the script.

Limitations

• This script only supports one alternate language switch per page. If more languages need to be supported, the languageNames dictionary and corresponding link tags should be expanded.
• The script doesn't handle scenarios where JavaScript is disabled in the user's browser. A server-side solution would be more robust in such cases.
• If there is no alternate language page defined, the script simply hides the language switch link. This might not be the desired behavior in all cases.

Please contact the script developer for any further queries or customizations--especially if you are interested in creating me a post about implementing it in Webflow.

Implement this JavaScript Snippet to add Dynamic Language Switching to Webflow

<script>
  // This function will be executed once the webpage has loaded
  window.onload = function () {
    // Fetch all the link tags from the document
    const links = document.getElementsByTagName('link');
    // Get the language of the current page as defined in the HTML lang attribute
    const currentPageLanguage = document.documentElement.lang;
    // Get the language switching link element from the document
    const languageLink = document.getElementById('language-link');
    // Get the element where the name of the alternate language will be displayed
    const languageText = document.getElementById('language-text');
// Define a dictionary with current language as key and alternate language name as value
const languageNames = {
  en: 'Deutsch',
  de: 'English'
};

// Initialize an empty string to store the URL of the alternate language page
let alternateUrl = '';

// Loop through all the link tags
for(let i = 0; i &lt; links.length; i++){
  // If the current link tag is an alternate language page
  if(links[i].rel === 'alternate' &amp;&amp; links[i].hreflang !== currentPageLanguage &amp;&amp; links[i].hreflang !== 'x-default') {
    // Store the URL of the alternate language page
    alternateUrl = links[i].href;
    break;
  }
}

// If an alternate language page is found
if(alternateUrl) {
  // Update the text content of the language display element
  languageText.textContent = languageNames[currentPageLanguage];
  // Update the href of the language switching link
  languageLink.href = alternateUrl;
} else {
  // If no alternate language page is found, hide the language switching link
  languageLink.style.display = 'none';
}

};
</script>