Translate your Webflow website and make it multilingual

Making a translated and multilingual Webflow website has always been difficult and complicated in the past. The Webflow solution does not have any native and official solution to do that. So, users generally recreate pages or duplicate existing ones in a translated language.

But it’s not good for SEO (translated pages are not – or badly – indexed) and it takes a lot of time and effort to maintain everything.

At Weglot, we wanted to create an easy solution to help Webflow users to translate their website, the right way.

Key Benefits

• Fast and easy: you do not need to do any coding, integrated in minutes
• All the content is translated: everything is automatically detected and can be translated
• SEO optimized for translated pages: your Webflow website will be indexed by Google in all your languages on your subdomains
• Powerful translation tools: automatic and human translations to publish quickly
• Bonus: top-notched expert support team to help you if needed

Before digging in how you can translate your Webflow, you can check an example of a translated Webflow website we setup: https://weglot-translate-wbflow.com

Example of a translated Webflow website

In the example, we added the language switcher in the menu, as a dropdown, you can click on it to change the language from English to French.

English version is on https://weglot-translate-wbflow.com
French version is on https://fr.weglot-translate-wbflow.com

Let’s go and start translating your Webflow website

1. Create an account on Weglot (~ 1 minute)

This account will be the place where you have all your translations and where you will manage them. Simply create a Weglot account here.

2. Enter your domain name and the languages you want (~ 1 minute)

In this step, you need to enter your domain name and the languages you want. DO NOT ADD your domain name ending with .webflow.io.

(If you did not purchased your own domain name yet, and you only have a .webflow.io domain, scroll down on the Weglot setup page under “OTHER POSSIBLE INTEGRATIONS”. Click on “Use Javascript integration” and jump directly to step 4 of this guide)

In our example:

• the domain is .weglot-translate-wbflow.com
• the original language is English
• the translated language is French

Click on the “Next” button to go to the following step.

3. Configure the subdomains in the DNS records (~ 5 minutes)

This is the step where you configure your DNS to create and connect the subdomains.
The subdomains will display the translations of your Webflow website once configured. In our example we purchased a domain name on Google domain, but it’s also working if you’re using another Domain name provider.

You’ll see the following DNS entries to add:

Then, go to your Domain provider account, in this example it’s Google domain, in the section or the page where you can manage the DNS (in Google domain there is a tab in the left menu named DNS).

At this stage you should be able to create new entries (in our example it’s in the section “Custom resource records”).
Select CNAME as the type of entry.
In our example (it should be very similar if you’re using another provider), enter the first part of the certificate under the “Name” section and the last part in under the “Data” section.

(note: if you’re using Google domain as well, add a “.” at the end of the certificate ending with “.acm-validations.aws” so you should have”xxxx.acm-validations.aws.”)

If you have doubts about how you should do it or where it is, we can help you. Just email us at support@weglot.com.

Once you have added and saved the entries, go back to the Weglot page. You can click on “Check DNS” and a green icon should appear, it means everything has been successfully setup. Then, just click on “Next”.

4. Install the Weglot library (~ 3 minutes)

This is the final step, it will add the language button on your Webflow website and it will allow you to customize the app settings.

It’s quick and easy, you just need to follow the steps below (also shown in the gif).

• Go to your Webflow admin area, in Setting > Custom Code (the last tab at the right)
• Then go to “Head Code” in the field under “Add code at the end of the the <head> tag:”
• Copy paste the JavaScript snippet provided that looks like the following with your actual API key instead of the placeholder “YOUR_API_KEY”

• Click on the green button “Save Changes”
• Publish your changes, clicking on the blue button at the very top right

You are done!

Finished! Go to your website to see the language button appear at the very bottom right. Give a few minutes to make sure your subdomains are properly setup, then you can try to change the language and you will see your translated website.

Bonus: if you want to add a native language switcher in your menu, you can simply create a dropdown and add links with the following format:
#Weglot-fr for French
#Weglot-en for English