Widget Customization

Customize Widget Page

Visit the Widget page to customize the language selection widget. This will display the Widget settings page.

📘

Admin Permissions Required

To edit the widget settings you will need to have Admin permissions for the project.

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 in some Localize subscription plans, effectively white-labeling 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 in some Localize subscription plans, effectively white-labeling the widget.

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

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 default 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 widget's background opacity.
• 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.

• Select/deselect the checkbox next to a language, then click Save Changes.

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:

1. Use the In-Context Editor

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');

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. Select the Languages tab.
2. Click the Edit Display Names button.
3. Click on the name of the language that you'd like to change.
4. Make your changes.
5. Click Save Changes when you are ready.
6. Bring up your site and view the widget.
7. Refresh the page and you'll see the new name in your widget!

Customize Which Languages are Available

You can programmatically determine which languages are available by providing an array of language codes in your Localize.intialize() call. Read about the enabledLanguages option here.

Custom CSS

Style the widget to match the colors and style of your website by manually adding custom styles to your language widget. The widget will accept any CSS override styling on your own website.

1. Add a <style> tag to the <head> element of your web page (or include in a separate CSS file)
2. Any CSS style overrides should use the following 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"

📘

!important

In some cases you may need to add the !important attribute to your custom CSS rules.

For example, if you select the top/right position for the widget but you want to move it a bit to the left and down some, you could use the following custom CSS in your page:

#localize-widget {
  right: 140px !important;
  top: 10px !important;
}

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