Visit the Customize Widget tab in your Project Settings to customize the language selection widget.
In the Widget Settings panel you can:
By default the Localize language widget is shown on your site, allowing users to select their desired language with which to view your site.
- To hide the widget, unselect this checkbox, then click Save.
- To hide the widget on some pages and show it on others, use the
disableWidgetoption when calling the Localize.initialize() function in the frontend API.
By default the Localize logo is displayed on the widget. This can be toggled off for Growth Plan subscriptions and higher, effectively white-labelling the widget.
- To hide the Localize logo, unselect this checkbox, then click Save.
By default the widget will be shown in a compact form on smaller screens. You can customize the mobile version of your widget with this setting.
- To turn off this option, unselect this checkbox, then click Save.
The compact version of the widget is displayed using a media query break point at 480px.
You can select which languages to display on your widget.
Hiding a language is useful especially when adding a new language to your Project while you are working on the translations for the new language. Then when your translations are completed, you can add the new language back to the widget so users can select it.
If you want to preview the site as translations are being added, you can view your website and open the development console in your browser and enter the following command:
Simply replace 'ko' with the appropriate language identifier, as seen on the Project Overview page.
We provide two themes (dark and light) and the option to customize the theme to your liking.
We also provide the ability to change the position and colors to match your brand.
You can manually add custom styles to your language widget. The widget will accept any CSS override styling on your own website.
- Add the
<style>tag to the head of your web page.
- Any CSS style overrides should use the following ID selectors:
<div id="localize-widget"></div> <div id="localize-current"></div> <div id="localize-langs"></div>
Don't like the widget? Build your own! We provide language links to fit within a native dropdown (anywhere on your site).