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.

Display

Displaying the 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.

Hiding the language widget on your website

To hide the default 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.

📘

Localize Branding

The ability to turn off the Localize "O" symbol and "Powered by Localize" options is only available in the Growth Plan or higher.


Position

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

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

Color

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

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

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:

2. Change the language on the query string using the ljs parameter:

  • www.example.com/?ljs=es, where 'es' is the language code for Spanish.

3. Use the Developer Tools in your Browser

  1. Enable the Developer Tools in your browser.
  2. In Chrome, Firefox or Safari, you can press:
    1. Command+Option+C (Mac)
    2. Control+Shift+C (Windows, Linux, Chrome OS)
  3. This will display the Developer Tools window.
  4. In the Developer Tools window, select the Console tab.
  5. In the console area, enter the following Javascript command to switch the language:
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 change the language names as they appear on the widget.

Instructions:

  1. Navigate to the Widget page in your Project
  2. Scroll down to the Languages panel
  3. Click the Edit display names link
  4. Click on the language name that you'd like to change
  5. Make your change and select Done
  6. You can see how your widget will look in the preview pane
  7. Click Save Changes when you are ready
  8. Bring up your site and view the widget
  9. Refresh the page and you'll see the new name in your 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).

Updated about a month ago


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.