Multi-language Switcher

This custom code upgrades Super’s native multi-language control into a compact, responsive navbar dropdown with matching flags, language codes, and a clear selected state.

Recommended setup

• Set up the Super’s built-in multi-language feature (Pro Plan) and configure the required languages before installing the custom code.
• Confirm that Super’s original language switcher is visible and that its language links work correctly.
• On desktop, the dropdown can display up to 10 language rows when enough viewport space is available. Longer lists remain accessible through internal scrolling.

Installation

1. Open your site in the Super Dashboard.
2. Go to the Code section.
3. Remove any previous language-switcher stylesheet or JavaScript.
4. Add this stylesheet to the Head:
Copy

<link rel="stylesheet" href="https://sites.super.so/switcher/langswitcher.css"/>

5. Add this script to the Head:
Copy

<script defer src="https://sites.super.so/switcher/langswitcher.js"></script>

6. Save your changes.
7. Publish the site or refresh the pages.
8. Refresh the live page and test at least two language options on desktop and mobile.

Pages Can Only Be Assigned to One Language

Once a page has been assigned to a language, it cannot be assigned to another language. Each page can only belong to one language at a time.

If you need to use the same content for another language, create a separate translated page in Notion and add it to Super before assigning it to that language.

Behavior and limitations

• The switcher reads the language choices provided by Super.
• The current language is detected automatically and displayed with its associated flag and base language code, such as EN, JA, or ZH.
• The opened dropdown uses specific locale codes where regional variants need to be distinguished, such as EN-US, EN-GB, ZH-CN, ZH-TW, PT-BR, and PT-PT.
• The currently selected language is shown with a highlighted row and checkmark.
• Longer language lists use internal vertical scrolling.
• The menu includes positioning adjustments for standard navbars, hidden navbars, and hidden-navbar layouts with a sidebar.