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

In this article, you'll see the different methods to change the position of the Weglot language switcher if you are using a different integration than WordPress and Shopify

1. Use the Switcher Editor feature
2. The language link hooks
3. The switcher option
4. Additional information (Webflow and Squarespace)

1. Use the Switcher Editor feature

The switcher editor allows you to move the language switcher in context on your website by dragging and dropping the button on a preview of your website
In order to use it, you can follow this article: How to use the Switcher Editor?

⚠️ Note that your website must be live and accessible in order to be able to use the Switcher Editor

2. The language link hooks

You have the possibility to create languages elements into your native menu, for example, and link them with the translation hooks according to this guide

For instance, you create a "  Languages" item menu with "English" and "French" as sub-menus.
English will have the link "#Weglot-en" and French will have the link "#Weglot-fr"

Note that the capital letter on the ' W' is important
If you have any trouble finding the correct shortcode, you can type your language here and use the related shortcode: https://weglot.com/documentation/available-languages/

3. The switcher option

You can also integrate the switcher manually to any elements present in your website by adding the "Switchers" option to your Weglot.initialize code

To do that, go to the page where is located your Weglot code snippet You should see the following code (with your own API key in replace of YOUR_API_KEY):

<!--Start Weglot Script-->
<script src=“//cdn.weglot.com/weglot.min.js”></script>
<script id=“has-script-tags”>Weglot.initialize({ api_key:“YOUR_API_KEY” })</script>
<!--End Weglot Script-->
Add the following piece of code after “  YOUR_API_KEY” (just delete any of the old code after your API key):
    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

Important: don’t forget the comma after your API key.

The piece of code that’s important here is the “.header-nav” as this determines the location of your language switcher. This needs to be replaced with the CSS selector of the parent element where you want the language switcher to be placed.

⚠️  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:

Your target line will be:
target: ".menu",

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

4. Additional information (Webflow and Squarespace)

If you are using Squarespace, the language switcher here is managed by Squarespace directly, so we recommend following their documentation

If you are using Webflow, don't hesitate to try this guide, it will allow you to create some nice-looking language switchers on your website.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us