Other integration - How to change the position of the language switcher?

In this article, you'll learn how to change the position of the Weglot language switcher if you're using an integration other than WordPress or Shopify.

1. Use the Switcher Editor

The Switcher Editor allows you to move the language switcher directly on a preview of your website by dragging and dropping it to the desired position.

To use it, follow our dedicated guide: How to use the Switcher Editor?

⚠️ The Switcher Editor can only be used on websites that are live and publicly accessible. It cannot be used on password-protected or local websites. Your website URL must also be entered in your Weglot Dashboard > Settings > General.

2. Use language link hooks

You can create your own language items in your website's native menu and link them to Weglot using language link hooks.

For example, you can create a Languages menu item with English and French as sub-items and use the following links:

• English: #Weglot-en
• French: #Weglot-fr

The capital W in Weglot  is required.

The value after #Weglot-  corresponds to the language code. For example, en  is English and fr  is French.

You can find the code corresponding to each available language in our list of Available Languages.

For more information about language link hooks, see our Developer Documentation - Language link Hooks.

3. Use the weglot_here option

You can place the Weglot language switcher at a specific location by adding the following HTML element to your source code where you want the switcher to appear:

<div id="weglot_here"></div>

Weglot will automatically display the language switcher inside this element.

4. Use the switcher option

You can also place a language switcher inside a specific element of your website using the switchers  option in your Weglot.initialize()  configuration.

Your Weglot integration should contain a script similar to this:

<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>

<script>
  Weglot.initialize({
    api_key: "your_api_key",
  });
</script>

 switchers: [
    {
    button_style: {
        full_name: true,
        with_name: true,
        is_dropdown: true,
        with_flags: true,
        flag_type: "circle"
    },
    location: {
        target: ".header-nav", // You'll probably have to change it (see the step below in order to find the correct CSS selector)
        sibling: null
        }
    }
]
});

Replace "your_api_key"  with your Weglot API key.

The important setting for the position of the language switcher is:

target: ".header-nav"

The target  value must be the CSS selector of the element in which you want to place the language switcher.

⚠️  To find the CSS selector (the "target"):

• Right-click on the element you want to place the language switcher into.
• Go to "Inspect"
• Use the arrow on the top left of the console.
• Right-click on the element in the console.
• Copy > Copy selector
• Paste the code target field between the double quotes

So, for example, if you want to add it to your menu:

<nav class="menu">

target: "nav.menu",

You can find more information about this method in our Developer Documentation

5. Additional information for Squarespace and Webflow

Squarespace

If you're using Squarespace's native Weglot integration, the language switcher is managed directly from Squarespace.

You can customize it from your Squarespace language settings. For more information, follow Squarespace Documentation - Creating a multilingual site with Weglot.

Note that Squarespace's native Weglot integration is currently available for Squarespace version 7.1.

Webflow

If you're using Webflow, you can also use the Weglot UI Kit by Finsweet to create a custom language switcher.