JTFDI Library
just the focus do it    •    
Creator Economy
       •       
Media
       •       
Marketing
       •       
Eating & Drinking
       •       
Commerce
       •       
Customer Relationships
       •       
Reading
       •       
Tech-stack
       •       
Productivity
       •       
Startup
       •       
Technology
       •       
Business
       •       
•    just the focus do it    •     just the focus do it    
Docs
Mag
Writing
Blog
Try it for Free

Leveraging a Small JavaScript for a Quick Multilingual Strategy in Webflow

2023-06-24
, most recent update.

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>

Read next in DOCU

Displaying Both the Publication and Update Dates on Webpages

Showing both the update and the publish date on your blog / web page seems to be difficult for Search Engines and therefore it seems like only displaying “last updated” is the safer way. If your blog shows more than one date, you are probably confusing Google.

Read next in DOCU

Localization: The "hreflang" Tag Accross Different Domains

John Mueller on how to use the hreflang tags across domains for the localization schemas: It doesn't matter if it's all on one domain or across multiple domains. It should just be one clear place per country and language.

Read next in DOCU

DecapCMS Markdown Guide: Handling URLs with Parentheses for Text Fragment Highlighting

Are broken links in your DecapCMS Markdown articles giving you a headache? never let parentheses break your links again: handle text fragment highlighting in Markdown. No more parentheses-induced troubles in your Github articles built with Netlify!

Read next in DOCU

Leveraging a Small JavaScript for a Quick Multilingual Strategy in Webflow

A button that appears when there is an alternate language defined for your content, making your cotent more relevant to your users experiences. Implementing a Dynamic Language Switcher Button with JavaScript

Read next in DOCU

Interactive URL Copy Feature in Webflow Using Clean JavaScript and Clipboard API

An interactive URL copy feature in Webflow. Using clean JavaScript and the powerful Clipboard API, making it easier for visitors to share your pages. Because who doesn’t appreciate a great user experience?

Read next in DOCU

An Extensive Dynamic Table of Contents Generator for Webflow CMS

Boost your Webflow Blog's readability and SEO with a dynamic Table of Contents (ToC) generator. It automatically creates a stylable, navigable ToC from your headings, and enhances user experience by highlighting the active section during scrolling.

Read next in DOCU

Styling Our Auto-Generated ToC in Webflow

Read next in DOCU

Creating or Changing Slugs in DecapCMS (formerly Netlify CMS)

Changing the URL Slug of your post in DecapCMS in config.yaml using the slug key and name key

Read next in DOCU

Smooth Scrolling to the Next Section with JavaScript and [foo](#next) markdown syntax

When I write [[`foo`](#next)`](#next)` markdown syntax in my content I want the reader to jump to the next section, the next anchor, on my webpage.

Read next in DOCU

Vimeo vs YouTube Embed for your Website

Consider this when you decide between YouTube or Vimeo for Website embeds

Read next in DOCU

Editorial Workflow in Decap CMs (formerly Netlify CMS)

Read next in DOCU

README for ChatGPT and How to Write the Best Prompts

When answering prompts, does it help ChatGPT to be more specific and precise if you give it a set of definitions upfront?

Read next in DOCU

Use Hash-symbol vs Triple-quotes Syntax for Commenting Python Code

Consider this when you choose the syntax for commenting code in Python

Read next in DOCU

Dynamically Generated ToC with Webflow CMS

Generating ToC’s based on h2 and h3 headings of a rich text CMS element with active states in a sticky Table of Contents

Read next in DOCU

Dynamic Social Media Share Buttons for Webflow CMS Blogposts

Add a Twitter button and a share on LinkedIn to your blogposts with sharing content generated from Webflow CMS

Read next in DOCU

Calculate Read Time from Webflow CMS

Calculated a read time from Webflow CMS and add to your blog template.

Read next in DOCU

Add Copy-able Code Blocks to Webflow CMS

Uses highlight.js and custom code to add code blocks where you can copy the code to rich text element of Webflow CMS

Hej. I am on Twitter, too.

Connect with me on Twitter and LinkedIn.