Translate a Webflow website

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.

Key benefits

Fast and easy: you don’t need to do any coding, and the solution is integrated in minutes

All-inclusive: all of the content on your website is automatically detected and translated

SEO-optimized for translated pages: your Webflow website will be indexed by search engines in all your languages, via individualized subdomains

Translation tools: Weglot gives you access to a first ultra-fast round of automatic translations, which you can supplement with professional translations – ready-to-order right on your Weglot dashboard

Bonus: top-notch, expert support team to help you out whenever you need

Start your free trial

Example of a translated Webflow website

Before trying it out yourself, you can check out an example of a translated Webflow website here and read more about BigBlue – a Webflow user utilizing Weglot!

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://www.translate-wf.com/
The French version is on https://fr.translate-wf.com/

We’ve even created our very own Webflow UI Kit with 14 language switchers available to clone and 2 tutorial videos to help you get Webflow multilingual up and running!

Let’s start translating your Webflow website

1) Create an account on Weglot

This account will be where you manage and edit all your translations. Create your Weglot account here.

2) Add your new languages

Once you’ve set up an account you’ll be prompted to add your domain name, the original language of your site and the languages you would like to add.

NOTE: This step is for users who have a primary domain name and not those that are using a temporary domain name ending with .webflow.io. Click on “Use Javascript integration” if you’re still in the testing stage of your site and have yet to purchase a domain name. You can add your domain later.

Click on the “Next” button.

3) Configure the subdomains in the DNS records

This next step is where you’ll configure your DNS records to create and connect the subdomains. These subdomains will display the translations of your Webflow website once configured.

For the purposes of this example we’re using Google Domains as our domain name provider – most other host providers will look similar to this one. But, please contact us at support@weglot.com if you need help with this step.

On your Weglot account setup, you’ll see the following DNS entries to add (note: this example is for setting up French):

Now, go to your domain name provider account and 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).

Create new entries in the DNS section of your account (in our example it’s in the section “Custom resource records”). Select CNAME as the type of entry.Enter “fr” (for those adding French) under the “Name” section and “websites.weglot.com” under the Data section.

Save the entries, go back to your Weglot dashboard and click on the green ‘Check DNS’ button. This can sometimes take a couple of minutes or even 10, so don’t be alarmed if the green tick hasn’t appeared next to your DNS record yet!

4) Add the Javascript code

This is the final step where you’ll add a language-switcher button to your Webflow website.

Go to your Webflow admin area, 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 make sure you add your actual API key instead of the placeholder “YOUR_API_KEY”:

<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
<script>
    Weglot.initialize({
        api_key: 'YOUR_API_KEY',
    });
</script>

Click on the green button, “Save Changes” and publish your changes by clicking on the blue button at the very top right.

5) Your multilingual Webflow website is now live!

That’s all there is to it. If you go to your website, you’ll see a language-switcher has been added 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 new translated pages.

Bonus: we’ve created some Webflow language switchers that you can clone and add to your website! Check them out on our Webflow UI Kit.

Translate your Webflow website and make it multilingual