Collaboration with Weglot - Design of 5 website translation switchers

Digidop collaborates with Weglot to design new translation switchers

Key points to remember

According to a study carried out in 2023: "Nearly 76% of users prefer to consume on a site in their native language". And yet, in 2024, over 50% of websites will be exclusively in English. This asymmetry could be corrected by the integration of innovative new solutions, such as Weglot (a multilingual site translation solution), with whom we have collaborated on a Language Switchers project to bring you :

FiveLanguage Switcher components on Figma,
A demo and no-code integration of the components on a web project (Webflow CMS),
Educational resources on the subject.

Find out more in this article!

1. The challenges of a multilingual site in 2024

In 2024, the conversion performance of many sites is still negatively impacted by language barriers.

1.1 Key figures

To understand the challenges of multilingual sites, let's look at a few figures.

In 2023, despite its 1.456 billion speakers,English will only reach around 16% of the world's population. Yet almost 59% of all websites are written in English. The distribution of languages on the web and in the world is therefore very uneven.

These figures can be explained by several factors:

Internet access is unevenly distributed around the world
English remains the most widely used internationallanguage
Most sites are not translated for various reasons - technical, lack of skills, human resources or budget.

This linguistic disparity presents both challenges and opportunities for companies. A survey by CSA Research, based on 8,709 consumers in 29 countries, showed that 76% of respondents prefer to buy products with information in their own language.

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

In view of these figures, we believe that having a multilingual website is a strategic, profitable and growth-generating factor for companies. With this in mind, and to continue providing effective translation solutions for websites, Digidop is collaborating with Weglot to design new language switchers.

1.2 What is a "Language Switcher"?

A "language switcher" is a component that allows users of a multilingual site to change the language in which the site is displayed. Typically, it consists of a drop-down menu or buttons, where the different languages available on the website are listed. Users can then select the language of their choice, and the site will dynamically update itself to display content in the appropriate language.

1.3 The challenges of language switchers on a website

If your site includes multilingual functionality, switchers are essential for the User Experience (UX). They allow users to choose their language preferences, which makes it possible to :

Reach a much wider audience: By offering multiple languages, your site becomes accessible to users all over the world, increasing your global reach.
Reduce bounce rate: Visitors are more likely to stay on a site that offers content in their native language, thus reducing the bounce rate.
Improve conversion rates: Users feel more comfortable and confident with a site in their own language.

Switching languages is therefore essential to provide a good overall experience for your site's users.

2. Design Weglot language switchers to translate your Figma? models.

2.1 Design of language switchers

Weglot component x Digidop

We're all familiar with the classic FR/EN toggle - very functional - but not very original, which takes us from English to French with a single click. This time, we wanted to innovate the design of this element, while retaining the "1-click" notion that ensures an optimal user experience. The design challenges were many:

Breaking away from the "classic" designs that already exist
Maintain ahigh level of accessibility so as not to affect the user experience
Anticipate the number of languages that could be integrated into the site
Plan behavior for each of these elements
Designing elements that fit in well

2.2 How do you use these language switchers to make a Figma model?

These components are already animated, which means you can integrate them as is into your Figma models, via a simple Copy/Paste operation. When you open your Figma prototype, you'll be able to project yourself into the switcher language and its harmony with the rest of the model.

So how do you translate your Figma model?

To date, there is no native solution in Figma that allows you to translate your layouts with a single click. It is, however, possible to translate elements of your designs using the variable functions - and on a small scale.

Tuto - 00:00 Translating your Figma model

If you've never used variables in Figma before, you can also consult the following resources:

2.3 Weglot Figma template available free of charge

Every month, we make a number of free resources available to the Figma Community. You can find and apply these components from our profile @Digidop.

Available free of charge on the Figma Community

And now, how do I translate my site?

3. New Weglot components for translating a Webflow site

Weglot x Digidop components - Webflow Language Switchers

3.1 Webflow website translation solutions in 2024

In 2024, there are 3 solutions for creating a multilingual site on Webflow:

Folder creation and manual duplication
Weglot no-code translation solution (third-party tool integration)
Localization (Native Solution)

To understand the difference between the 3 methods, here's a full article on the subject →

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

The price of certain features reserved for Enterprise Localization plans,
The fact that Webflow's native functionality is recent,
And that Weglot features an editing interface from an external tool.

Some Webflow users continue to use Weglot's no-code "plug & play" integration. That's why we've taken advantage of this collaboration to rework some "Webflow Friendly" components.

Since the Finsweet x Weglot collaboration in 2020, and the birth of components that can be easily integrated with Webflow, the Weglot translation tool has become more widely available in the Webflow ecosystem. And although Webflow recently announced the release of Localization, Weglot remains (for now?) a popular alternative to Webflow's native feature.

3.2 Why new components?

The aim was to take advantage of the design of new translation components to make a few improvements to the current way in which Weglot integrates into Webflow with :

A single code for all components
Fixed a bug when duplicating a component on the same page (e.g. Navbar + Footer).
CSS animation vs. JS Webflow animation (the entire link design can be customized via the "Current" state of Webflow links)
And of course, a choice of 5 new language Switcher Designs

All this to make it even easier for Weglot users to integrate the translation solution.

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 code with your own code

Screenshot of code added to the webflow body tag

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

4 - Add lang attributes to your links

Add lang attribute to Weglot lang switcher with Webflow

All the attributes can be found in this HTML documentation

5 - Customize your design using the magic of Webflow (CSS)

Weglot link design with current state in designer

(Current State available and recognized via lang attribute)

6 - Publish your site!

Here we go! 🎉

Note: Weglot account configuration is required for integration. Watch this video to find out how to create a Weglot account for Webflow.

3.4 Free template to clone on Made in Webflow

If you're using Webflow, you can clone the components directly from this template onto the Made in Webflow 👇 to facilitate integration of the new Switchers Weglot languages.