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. Create an account on Weglot using this link (~ 1 minute)

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

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 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 (~ 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:

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. 

Enter the first part of the certificate under the Name section and the last part 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. Click "Next."

4. Install the Weglot library (~ 3 minutes)

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”:

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

Still need help? Contact Us Contact Us