Options

This page describes options

As you've seen in the "Getting started" section, Weglot gets initialized through this code:

Weglot.initialize(options)

Where options is a Javascript object with properties defined as follows. Only api_key, (in bold) are required. Weglot uses the api_key to retrieve the link to your project and know what language to show on the language button. You can change options directly in your project settings : https://dashboard.weglot.com/projects/edit

You can also add in the option variable custom parameters that will change the default behavior of the library.

Property

Description

Default

Example

api_key

Your Weglot API Key

styleOpt

A javascript object describing the default styling of the Weglot language switcher button

{ fullname: true, withname: true, is_dropdown: true, classF: '' }

styleOpt["withname"]

true to display a label text next to each language options. false otherwise

true

styleOpt["fullname"]

If withname is true, true to display the full name of the language.false to just show the 2-letter language code

true

styleOpt["is_dropdown"]

true to display the language selector as a dropdown. false to show it as a list

true

styleOpt["classF"]

A String. The extra CSS class to apply to the button elements. Add wg-flags to show flags (by default they will be mat rectangles).

""

"wg-flags flag-3" "wg-flags"

waitTransition

true to prevent content blinking when translating a new page.

true

hideSwitcher

true to prevent Weglot from creating language switchers, false otherwise. Defaults to false. If you set it to true, it's your responsibility to use the Client-side API or link hooks to change languages on the page

false

translateSearch

true to translate search queries on the website, false otherwise.

false

searchsForms

A comma-separated list of CSS selectors of search form elements to watch for. Useful only if translateSearch is true. The form has to send the q parameter for it to work (or the searchParameter, if present)

""

"form#side-search, form.search-form"

searchParameter

Name of the input in your form(s) which will send keywords. Frequently, this is the parameter which contain your keywords in URL "?q=xxxxx"

"q"

whiteList

A comma-separated list of CSS selectors of only elements you want to translate on your page. This will cancel all others translations in the same page.

""

".checkout-banner, .product-name"

translateImages

true to translate images' URLs on the website, false otherwise

true

cache

Setting this to true greatly improves user experience by caching Weglot's translations into your visitors' browser. Translations are kept up-to-date asynchronously.

false

switchers

A Javascript Array of Objects representing several language switchers on the page

[]

switchers[]["styleOpt"]

A Javascript Object defined exactly like styleOpt

switchers[]["target"]

The CSS selector of the node that the switcher will be a child of

".site-header__section--title"

switchers[]["sibling"]

The CSS selector of the next sibling element of the switcher. null for the last element inside the target

null

extraDefinitions

A Javascript Array of Objects representing extra translation definitions

[]

extraDefinitions[]["selector"]

A CSS selector to the element(s) you want to target

"input.someclass[type=text]"

extraDefinitions[]["attribute"]

The name of the attribute you'd like to translate

"data-tooltip"

extraDefinitions[]["type"]

Optional. The WordType of the text that you'd like to translate

1

2

A full example could look like this:

Weglot.initialize({
api_key: "wg_1234567897e2ea993d291b571c2ec93b0",
styleOpt : { fullname: true , withname: true , is_dropdown: true , classF: "wg-flags flag-3" },
translateSearch: true, // Translate search keywords from visitors' language
searchParameter: "s", // Because my search input has name="s" attribute.
searchsForms: "#sidebar-search, #main-search", // CSS selectors of <form> which contain search input
switchers: [
{
styleOpt:{
fullname: true,
withname: true,
is_dropdown: true,
classF: "wg-flags flag-3"
},
containerCss: "",
target: ".site-header__section--title",
sibling: null
}
]
});