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
    }
  ]
});

Javascript - Previous

Getting Started

Next - Javascript

Javascript functions

Last updated 1 month ago

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`