Translate your Webflow website and make it multilingual

Translating a Webflow website and making it multilingual has proven complicated for many users. The platform doesn’t offer a native solution for full-site translation, so users generally re-create their pages manually or duplicate existing ones in a translated language.

Here’s the problem: these methods are not good for SEO (self-translated pages will either be poorly indexed or not indexed at all on search engines); plus, 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 websites and make them multilingual.

Example of a translated Webflow website

Before trying it out yourself, you can check out an example of a translated Webflow website here.

In the example, we integrated the language-switch button into the main menu bar, as a dropdown. You can click on it to change the language from English to French.

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

Let’s start translating your Webflow website.

Let’s start translating your Webflow website

10 minutes

1) Create an account on Weglot

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

In this step, you need to enter your domain name and the languages you want.

DO NOT add your temporary domain name ending with .webflow.io.

(If you have not yet purchased your own domain name, and you only have a .webflow.io domain, scroll down on the Weglot setup page to “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

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 this example, we’ve used Google Domains as our domain name provider; however, there are lots of other providers out there, and the DNS entry process will look fairly similar no matter which you’ve chosen to use.

On your Weglot account setup, you’ll see the following DNS entries to add:

Now, go to your domain name provider account (again, in this example, it’s Google Domains); then, go to the section or page where you can manage the DNS (for instance, in Google Domains, it’s located under a tab on the left-side menu bar called DNS).

At this stage, you should be able to create new entries in the DNS table on your screen (in our example it’s in the section “Custom resource records”). Select CNAME as the type of entry.

In our Google Domain 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 under the Data section.

(Note: if you’re using Google Domains, add a “.” at the end of the certificate ending with “.acm-validations.aws”, so that it reads ”xxxx.acm-validations.aws.”)

If you have any issues figuring out where to find or how to update your DNS records, 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 check-mark icon should appear: this means everything has been successfully set up. Now, just click on “Next”.

4) Install the Weglot library

This is the final step, where you will add the language-switch button onto your Webflow website, and customize some of 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, then click on “Settings” > “Custom Code” (the last tab at the right)
• Go to “Head Code”, and you should see a field that’s titled “Add code at the end of the <head> tag:”
• Copy paste the JavaScript snippet provided to you on your Weglot account. It will look like the following one, but 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.

5) You’re all done!

Finished! Go to your website, and you’ll see the language-switch button appear at the very bottom right. Give it a few minutes to make sure your subdomains are properly set up, then you can try changing the language, and you’ll see your translated pages.

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