Logo Webflow

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

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

Webflow demo website translated

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.

Translate Webflow register step

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:

Webflow translate domain name step

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:

Translate Webflow DNS record step

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.”)

Translate Webflow manage your DNS

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).

Translate Webflow add the JS library step

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