Widget Customization

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

Customize Widget Page

Visit the Widget page to customize the language selection widget.

This will display the Widget settings page.

Widget Display

In the Widget Display section you can:

Display language widget on your website

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 Changes.

Hiding the widget on certain pages

  • To hide the widget on some pages and show it on others, use the disableWidget option when calling the Localize.initialize() function in the frontend API. You will need to write Javascript code to accomplish this. See the following code sample, and replace PAGE_NAME_HERE with the page name on which you want to hide the widget.
var hideWidget = (window.location.href.indexOf("PAGE_NAME_HERE") > -1) ? true : false;

Localize.initialize({
  key: '[[app:key]]', 
  rememberLanguage: true,
  disableWidget: hideWidget,
});

Display "O" symbol on widget

By default the Localize "O" symbol 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 "O" symbol, unselect this checkbox, then click Save Changes.

Display "Powered by Localize" on widget

By default "Powered by Localize" is displayed on the widget. This can be toggled off for Growth Plan subscriptions and higher.

  • To hide "Powered by Localize", unselect this checkbox, then click Save Changes.

Widget Positioning

You can position the widget in one of 6 places on your site.

  • Select one of the 6 positions, then click Save Changes.

Widget Themes

We provide two themes (dark and light) and the option to customize the theme to your liking to match your brand.

Widget Colors

  • You can change the colors using the color picker.
  • You can add a border to the widget.
  • You can also set the background opacity of the widget.
  • Select your desired options, then click Save Changes.

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 either:

  • Use the In-Context Editor
  • 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.

Changing the Language Display Names

You can also change the language names as they appear on the widget.


Custom CSS

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 (or include in a separate CSS file)
  2. Any CSS style overrides should use the following ID selectors:
<div id="localize-widget" class="localize-left-bottom"></div>
<div id="localize-current"></div>
<div id="localize-widget-langs"></div>
<div id="localize-powered-by"></div>
<div id="localize-active-lang"></div>
<div id="localize-widget-langs"></div>

For positioning of the widget, use the following Class selectors:

class="localize-left-bottom"
class="localize-right-bottom"
class="localize-left-center"
class="localize-right-center"
class="localize-left-top"
class="localize-right-top"

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.