Badge Webflow Award Winner 2023

Multilingual translation of your Webflow website with Weglot: tutorial

Published on 
7/11/2021
-
Amended on 
24/4/2023
Reading time: 5 min
weglot-digidop-multilingual-website
Written by
Florian Bodelot with a T-shirt Digidop

Florian Bodelot

Co-founder

Step-by-step tutorial from Digidop for the integration of Weglot to translate your website into multilingual.

Key points to remember

What is Weglot?

Weglot is a nocode-free technology that will allow you to easily translate a website into several languages.

The tool offers different packages for each user depending on the number of languages they need to translate into and the amount of words on your site. Weglot offers a free version that allows you to translate 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 super responsive technical support

- super qualii machine translation! (manual translation available)

- very simple to use

- a multilingual seo with the translation of your url, meta and tittle to optimize the seo of your site in all languages: multilingual site Weglot

Using Weglot for your website step by step

🎁 Weglot promo code -20% : DIGIGLOT

1 - Create a Weglot account

  1. Click on the free trial button
  2. Fill in the form (e-mail and password)
  3. Click on "create an account".
  4. Validate your account by confirming your email ( No emails? Check your spam folder)

2 - Creating a project

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

3 - DNS or Javascprit settings

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

3-1 With DNS settings ( SEO friendly 🙂 )

  1. Enter your domain url, example : digidop.fr
  2. The original language of your website, for example: French
  3. The language(s) of destination, e.g. English, Spanish, German.
  4. Add DNS in your domain name settings (GoDaddy, OVH, GoogleMydomains, etc.)
  5. What for? To create sub-domains of your site translated into different languages. This allows you to translate your site while optimising multilingual referencing
  6. CNAME record : websites.weglot.com
  7. Testing your settings ✅
  8. Copiez-coller le code dans votre "custom code" dans la partie "End of the <!-- fs-richtext-ignore --><head tag>" Voir les paramètres settings du cms (Webflow/Wix/Wordpress)
  9. ⚠️ Attention ⚠️ don't forget to personalise 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 publish on webflow.io (we advise it when your site is in development/test phase)

  1. Click on the Javasprit 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.

Bravo !🥳 Your site is translated. 🇧🇷 🇪🇸

Simple and quick to use = a real nocode tool ⚡️

4 - Activate automatic translation according to your user's language settings

Automatically redirect visitors to your site based on their language settings. (An English visitor will have the "EN" version of your site automatically). You just have to activate the auto-switch. 3 clicks to access the page:

Settings > General > Auto-switch ✅

BONUS - Customize the translation widget on your Webflow site

1- Delete 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 100% webflow native and 100% customizable container

Finsweet (as is often the case) has put together an incredible resource. Quick and easy to set up designs. Check out the tutorial and the content that is duplicable in the Webflow Showcase.

Need help creating a website on webflow? Our agency can help you.

Translate SEO parameters in Weglot

To do this, you can read our tutorial on how to translate SEO settings in Weglot!

Choosing Weglot means integrating a translation tool that is easy to install and of excellent quality. The tool meets the best practices concerning natural referencing and many guides exist to accompany you step by step in its use. Connect with Webflow (vs Wordpress) for a 100% native use, without plugin.  

20% off coupon code for Weglot subscriptions

Yes, digital should be accessible to all and the cost of the tools should not be a brake on your investments! Gift, a Weglot promo code in our partner space😁 # WeglotPartner

Flomodia by Digidop
Coudac project by Digidop
project Heka by DigidopFlaw by project DigidopMorfo project by Digidop