How to add a language selector?

Once the translation process is complete and the translations are live, you must provide a way for your visitors to discover the translations. This is done via a language selector. Users will be able to see that translations are available and select their preferred option.

MP Express provides three styles of language selector. You can use the Settings section of the Dashboard to configure them. You can find it in the left sidebar. Then, select Language selector to open these settings.

Each selector type can be previewed and adjusted on the right-hand side of the settings panel. You can change the order of languages, the display name, and even assign custom flags.

Sidebar

The Sidebar selector offers a simple and clean design that remains visible on all pages. You can choose whether it appears on the left or right side of your site.

It supports:

• Flags: Show or hide country flags.
• Language codes: Choose between short codes (e.g. EN) or full names (e.g. English (United States)).

The sidebar is the default option and doesn't require any special setup. Once the translations are live and the selector is visible, it will automatically appear.

Dropdown

The Dropdown selector is more compact and ideal for placing in a website header or menu. It starts as a button (usually with a globe 🌐), which expands to show a list of available languages.

To use it:

1. Add an empty <div> or <span> in your website template where the selector should appear.
2. Assign it a class, such as el-dropdown.
3. Go to the Dashboard, open Settings > Language Selector, and select Dropdown.
4. Paste your class name into the Installation field.
5. Preview your changes and press Save & Refresh.

You can customise what appears when the dropdown is closed (icons, text, flags) and what appears when it's opened.

Floating

The Floating selector is a lightweight card that floats over the page. It's ideal for minimal or mobile-first designs.

Settings include:

• Flag visibility
• Positioning from the top and left of the page (as percentages)

Note: On mobile, the selector automatically appears at the bottom of the screen regardless of the desktop position settings.

Preview

A live preview of your selected settings is always visible on the right-hand side of the configuration screen. Use it to check icons, flag visibility, and the layout before going live.

⚠️ Changes may take up to 10 minutes to appear on your live site.