Digidop collaborates with Weglot for the design of new translation switchers.

According to a study conducted in 2023: "Nearly 76% of users prefer to consume content on a website in their native language." Yet, in 2024, over 50% of websites are exclusively in English. This asymmetry could be addressed through the integration of innovative new solutions, such as Weglot (a multilingual website translation solution), with whom we have collaborated on a Language Switchers project to offer you:

1. Five "Language Switcher" components on Figma,
2. A demo and no-code integration of the components on a web project (Webflow CMS),
3. Educational resources on the subject.

Explore this in the article!

1. The Challenges of a Multilingual Website in 2024

In 2024, the conversion performance of many websites is still negatively affected by language barriers.

1.1 Key Figures

To understand the challenges of multilingual websites, let's look at some figures.

In 2023, despite having 1.456 billion speakers, English only reaches about 16% of the world's population. Yet, nearly 59% of websites are written in English. This distribution of languages online and globally is notably unequal. 

These figures can be explained by several factors:

• The level of internet access is unevenly distributed worldwide
• English remains the most widely used language internationally
• Most websites are not translated for various reasons – technical challenges, lack of skills, human resources, or budget constraints

This linguistic disparity presents challenges, but also opportunities for businesses. A CSA Research survey, based on 8,709 consumers across 29 countries, found that 76% of respondents prefer to purchase products with information in their native language.

Another study published by CSA Research reveals that 65% of individuals prefer content in their native language.

Given these numbers, having a multilingual website appears to be a strategic, profitable, and growth-driven need for businesses. It is in this spirit that Digidop collaborates with Weglot to design new language switchers to continue providing effective translation solutions for websites.

1.2 What is a "Language Switcher"?

A "language switcher" is a component that enables users of a multilingual website to change the display language of the site. Typically, it consists of a dropdown menu or buttons that list the various languages available on the website. From this module, the user can select their preferred language, and the site will dynamically update to display content in the chosen language.

1.3 The Importance of Language Switchers on a Website

If your site incorporates a multilingual feature, switchers are essential for User Experience (UX). They allow users to select their language preferences, which enables:

1. Reaching a much broader audience: By offering multiple languages, your site becomes accessible to users worldwide, thus increasing your overall reach.
2. Reducing bounce rates: Visitors are more likely to remain on a site that offers content in their native language, thereby lowering the bounce rate.
3. Improving conversion rates: Users feel more comfortable and confident with a site in their own language.

Therefore, language switchers are indispensable for providing a positive overall experience for your site's users.

2. Designing Weglot Language Switchers to Translate Your Figma Mockups

2.1 Design of Language Switchers

Weglot x Digidop Component

We are all familiar with the classic FR/EN toggle – very functional but not original, as it allows switching from English to French with just a click. This time, we aimed to innovate in the design of this element while maintaining the concept of "one-click" for an optimal user experience. Thus, the design challenges were numerous:

1. To depart from existing "classic" designs
2. To maintain a high level of accessibility to avoid affecting user experience
3. To anticipate the number of languages that could be integrated into the site
4. To foresee behaviors for each of these elements
5. To design elements that integrate well

2.2 How to Use These Language Switchers for Your Figma Mockup?

These components are already animated, meaning you can integrate them as is into your Figma mockups via simple copy/paste. This will allow you, upon opening your Figma prototype, to visualize the use of the language switcher and its harmony with the rest of the mockup. 

But then, how do you translate your Figma mockup? 

Currently, there is no native solution in Figma that allows you to translate your mockups with a simple click. However, it is possible, using variable functionality – on a small scale – to translate elements of your designs. 

Tutorial - 00:00 Translate Your Figma Mockup

If you have never used variables in Figma, you can also consult the following resources:

• Mastering variables in Figma
• How to create a Dark & Light mode in Figma

2.3 Free Weglot Figma Template Available

We provide numerous free resources to the Figma Community every month. You can find and duplicate these components from our profile @Digidop.

Available for free in the Figma Community ↗

And now, how do I translate my site?

3. The New Weglot Components to Translate a Webflow Site

3.1 Translation Solutions for Webflow Sites in 2024

In 2024, there are 3 solutions to create a multilingual site on Webflow:

1. Creating folders and duplicating the main site "manually"
2. Weglot no-code translation solution (third-party tool integration)
3. Localization (Native Solution)

To understand the differences between the 3 methods, here is a comprehensive article on the subject →

💡 Note: Despite the recent launch of Localization, for various reasons such as;

1. The pricing of certain features reserved for Enterprise plans in Localization,
2. The fact that the native feature in Webflow is still new,
3. And that Weglot has editing functionality via an external tool.

Some Webflow users continue to use the no-code "plug & play" integration of Weglot. This is why we took the opportunity during this collaboration to redesign "Webflow Friendly" components.

Since the Finsweet x Weglot collaboration in 2020 and the introduction of easily integrable components to Webflow, Weglot's translation tool has become widespread in the Webflow ecosystem. Although Webflow recently announced the launch of Localization, Weglot remains (for now?) a popular alternative to Webflow's native feature.

3.2 Why New Components?

The objective was to capitalize on the design of new translation components to bring some improvements to Weglot's current integration method on Webflow, including:

• A unique code for all components
• Fixing a bug during the duplication of the component on the same page (e.g., Navbar + Footer)
• CSS Animation vs. Webflow JS Animation (the entire design of the links is customizable through Webflow's link "Current" state)
• And of course, a choice of 5 new designs for the language switcher

All of this is aimed at making it easier for Weglot users to integrate translation solutions.

3.3 How to Use Them?

1 - Copy/Paste the script into the head or body tag of your Webflow project

<script>
type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"
</script>

<script>
 Weglot.initialize({
        api_key: 'YOUR_API_KEY',
    });
</script>

2 - Replace the API key placeholder with your actual code

3 - Add a CSS class to your component: .weglot-switcher-component

4 - Add lang attributes to your links

Find all attributes in this HTML documentation ↗

5 - Customize the Design Using Webflow's Magic (CSS)

(Current State available and recognized via the lang attribute)

6 - Publish your site!

And that’s it! 🎉

Note: The integration requires prior configuration of your Weglot account. Check out this video on how to create a Weglot account for Webflow ↗

3.4 Free Template to Clone on Made in Webflow

If you are using Webflow, to facilitate the integration of the new Weglot language switchers, you can directly clone the components from this template on Made in Webflow 👇

Other Resources on Multilingual Websites

• Playlist on translating your Webflow site with Weglot ↗
• Finsweet X Weglot Components ↗
• Webflow Localization: The Ultimate Guide to Translating and Localizing Your Webflow Site →

Sources for the article:

• Statista - The most spoken languages worldwide in 2023‍
• Statista - Languages most frequently used for web content as of January 2023, by share of websites
• Survey 1 CSA Research
• Survey 2 CSA Research