Multilingual Translation of Your Webflow Site with Weglot: Tutorial

Tutorial
March 20, 2023
3 min
weglot-digidop-multilingual-website
Key points

What is Weglot?

Weglot is a no-code technology that allows you to easily translate a website into multiple languages.

The tool offers different plans for each user based on the number of languages they need to translate into and the amount of content on their site. Weglot provides a free version that allows translation of up to 2000 words into another language.

The advantages of Weglot? Our opinion

We chose to use Weglot for the automatic translation of our Webflow sites because the tool offers:

· a team with very responsive technical support

· high-quality automatic translation! (manual translation available)

· very simple to use

· multilingual SEO with translations of your URLs, meta, and titles to optimize your site's SEO in all languages: Weglot multilingual site

Using Weglot for your website step by step

🎁 Weglot Promo Code -20%: DIGIGLOT

1 - Create a Weglot account

  1. Click on the button to try for free
  2. Fill out the form (email and password)
  3. Click on “create an account”
  4. Validate your account by confirming your email (No email? Check your spam folder)

2 - Create a project

  1. Give it a name, for example: Digidop's website
  2. Choose your website technology: Webflow
  3. Click on: Next

3 - DNS or JavaScript Setup

Choose one of the two Weglot translation options (DNS or JavaScript)

3-1 With DNS setup (SEO friendly)

  1. Enter your domain URL, for example: digidop.fr
  2. The original language of your website, for example: French
  3. The destination language(s) for translation, for example: English, Spanish, German.
  4. Add the DNS to your domain name settings (GoDaddy, OVH, Google My Domains, etc.)
  5. Why? To create subdomains of your site translated into the languages. This allows you to translate your site while optimizing multilingual SEO.
  6. CNAME record:  websites.weglot.com
  7. Test your settings ✅
  8. Copy and paste the code into your "custom code" section at the "End of the <!-- fs-richtext-ignore --><head tag>" See the settings parameters of your CMS (Webflow/Wix/WordPress)
  9. ⚠️ Attention ⚠️ don’t forget to personalize your API key: WG_123456789 to be replaced
<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js">
<script>Weglot.initialize({ api_key: 'wg_123456789' });</script>

3-2 With JavaScript published on webflow.io (we recommend this if your site is in development/testing phase)

  1. Click on the JavaScript integration button
  2. Choose the translation languages
  3. Copy and paste the code into your custom code (⚠️ Customize your API key)
  4. Qualify your site with the 3 additional parameters and click on: Go to my translations.

Congratulations! Your site is translated. 🇧🇷 🇪🇸  

Simple and quick to use = a true no-code tool ⚡️

4 - Activate automatic translation based on your user's language settings

Automatically redirect users of your site based on their language settings. (An English visitor will automatically see the "EN" version of your site) It's very simple. You just need to activate auto-switch. 3 clicks to access the page:

Settings > General > Auto-switch ✅

BONUS - Customize the translation widget on your Webflow site

1- Remove the Weglot container

Quick to set up:  Settings > Language switcher > custom css > add the code below 👇

Removing the default Weglot translation container
.weglot-container { display:none; }

2- Add a custom container, 100% Webflow native and 100% customizable

Finsweet (as usual) has provided an incredible resource. Quick and easy design to set up. Discover the tutorial and duplicate content in the Webflow Showcase.

Need help with creating a website on Webflow? Our agency can assist you.

Translate SEO parameters in Weglot

For this, you can read our tutorial on translating SEO parameters in Weglot!

Choosing Weglot means integrating an easy-to-install and high-quality translation tool. The tool adheres to best practices for natural SEO and many guides exist to assist you step by step in its use. Connect with Webflow (versus WordPress) for 100% native use, no plugins required.  

Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

Webflow Localization, Credial's Use Case
Documentation
Webflow

Webflow Localization: Practical Guide & Credial's Use Case

Webflow Localization: Practical Guide & Credial's Use Case
Visuel showcasing digidop.fr switching to digidop.com
News
Digidop

Digidop.fr is now Digidop.com

Digidop.fr is now Digidop.com
Photo of the Digidop team with the Digidop Logo 2024
News
Digidop

A Look Back at an Exceptional 2024 and Vision 2025

A Look Back at an Exceptional 2024 and Vision 2025

Want to turn your website into your most valuable asset?

Contact us today