How Do You Add a Weglot in Webflow?

by

Adding a Weglot in Webflow is a straightforward process that allows you to easily translate your website into multiple languages. With Weglot, you can reach a wider audience and provide a user-friendly experience to visitors from different regions. In this tutorial, we will guide you through the steps of adding Weglot to your Webflow site.

Step 1: Create a Weglot Account
Before you can integrate Weglot into your Webflow site, you need to create an account on the Weglot website. Simply visit their website and sign up for an account. Once you have successfully created an account, you will have access to the necessary credentials required for integration.

Step 2: Install and Configure the Weglot Plugin
To begin, log in to your Webflow account and navigate to the site where you want to add Weglot. In the Designer interface, click on “Add Elements” in the left sidebar navigation menu.

Option 1: Using the Embed Element
If you prefer using the Embed element, simply drag and drop it onto your desired page or template. Click on the newly added Embed element and go to the settings panel on the right-hand side.

  • In the “Embed code” field, paste the following code snippet:

    • <script src="https://cdn.weglot.com/weglot.min.js"></script>

  • In a new line after pasting the above snippet, add another script tag with your unique API key provided by Weglot:

    • <script>Weglot.setup({
    api_key: 'YOUR_API_KEY'
    })</script>

Note:

Make sure to replace ‘YOUR_API_KEY’ with your actual API key obtained from Weglot.

Option 2: Using the Custom Code
If you prefer using the Custom Code option, navigate to the “Project Settings” tab in the Designer interface. Scroll down to the “Custom Code” section and click on “Head Code.”

  • Paste the following code snippet into the “Head Code” field:

    • <script src="https://cdn.js"></script>

    Note:

    Again, remember to replace ‘YOUR_API_KEY’ with your actual API key obtained from Weglot.

    Step 3: Customize Your Language Switcher
    To customize your language switcher, you can use Webflow’s built-in elements or design your own custom switcher. Simply add a container for the switcher and use Webflow’s styling options or custom CSS to make it visually appealing.

    Step 4: Publish Your Site
    Once you have added and configured Weglot on your Webflow site, it’s time to publish your changes. Click on the “Publish” button in the top-right corner of the Designer interface.

    Wait for Webflow to publish your site, and voila! Your website is now equipped with Weglot’s powerful translation capabilities.

    In conclusion, adding Weglot to your Webflow site is a breeze. By following these simple steps, you can effectively expand your website’s reach and provide a multilingual experience for visitors around the world.

    Remember to customize your language switcher to match your site’s design. Happy translating!