Widget Customization

The widget allows your visitors to select their preferred language when visiting your website.

Customize Widget tab

Visit the Customize Widget tab in your Project Settings to customize the language selection widget.

Widget Settings

In the Widget Settings panel you can:

Display language widget

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.

Hiding the widget on certain pages

Display Localize logo on widget

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.

Display compact widget on small screens (e.g. mobile)

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.


Widget Languages

You can select which languages to display on your widget.

Hiding a Language

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:

Localize.setLanguage('ko');

Simply replace 'ko' with the appropriate language identifier, as seen on the Project Overview page.


Widget CSS

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.

  1. Add the <style> tag to the head of your web page.
  2. 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>

Build-your-own Widget

Don't like the widget? Build your own! We provide language links to fit within a native dropdown (anywhere on your site).

Widget Customization


The widget allows your visitors to select their preferred language when visiting your website.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.