Webflow - Integration / Setup

Video guide: Want a quick & easy explanation on how to set up your Webflow site with Weglot? Check out our video tutorial on how to integrate Weglot into your Webflow website!

1. Sign up for a Weglot account

This account is where you’ll be able to view and manage all of your translations. Simply create a Weglot account here.

2. Create your project (~ 1 minute)

Once you have created your account, you have to create your project. You must give it a name, and select the technology of your website, which is "Webflow":

3. Enter the languages you want (~ 1 minute)

In this step, you need the languages you want.

The original language is the language of your original website and the translated language(s) are the languages you want to translate your website into.

Enter the website details

**DO NOT ADD YOUR TEMPORARY domain name ending with .webflow.io.

NOTE: If you have not yet purchased your own domain name and only have a .webflow.io domain, click on “Connect Weglot to your website without it” if you’re still in the testing stage of your site. You can add your domain name later.

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

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

This is the step where you configure your DNS to create and connect the subdomains.

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

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.

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

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

Enter “ en” (for those adding English) under the “Name” section and the value provided by Weglot under the "Data" section.

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 (This can sometimes take a couple of minutes or even 10, so don’t be alarmed if the green check-mark icon hasn’t appeared next to your DNS record yet). Click "Next".

5. Install the Weglot library (~ 3 minutes)

This is the final step, where you will add the language-switch button to 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 below).

Go to your Webflow dashboard, and then, on your website, click on the 3 dots and click on “Settings”
In the Settings page, select "Custom Code” (the last tab on 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”.
Publish your changes, by clicking on the blue button at the very top right.

You’re all done!

Finished! Go to your website, and you’ll see the language-switcher 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: we’ve created some Webflow language switchers that you can clone and add to your website! Check them out on our Webflow UI Kit by Finsweet and on Weglot Components by Digidop.