Translate your Webflow website and make it multilingual

Discover how to translate your Webflow website and make it available in multiple languages with Weglot.

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

Weglot dancing character

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!

weglot webflow setup demo

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

10 minutes

1) Create an account on Weglot

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

Webflow-signup

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.

webflow-languages

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:”
Webflow translate JavaScript snippet
  • 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”:
HTML

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.

READY TO GET STARTED?
Make your Webflow website multilingual within minutes
Cookies settings
We use cookies to collect and analyze information on site performance and usage, to provide social media features and to enhance and customize content and advertisements. Learn more with our Privacy policy
Necessary cookies

Some cookies are required to provide core functionality. The website won’t function properly without these cookies and they are enabled by default and cannot be disabled.

Non-necessary Cookie Settings

Any cookies that may not be particularly necessary for the website to function and is used specifically to remember preferences or to help us improve our website by collecting and reporting information on its usage.

We use cookies to collect and analyse information on site performance and usage, to provide social media features and to enhance and customize content and advertisements. Learn more with our Privacy policy