# Options As you've seen in the "Getting started" section, Weglot gets initialized through this code: ```javascript 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 : You can also add in the **`option`** variable custom parameters that will change the default behavior of the library. ## Options ### api\_key Your Weglot API Key. Find it in your project settings : . ### switchers A Javascript Array of Objects representing several language switchers on the page **switchers.style** A javascript object describing the default styling of the Weglot language switcher button. * **switchers.style.with\_name** (default: `true`)\ Display a label text next to each language options. `false` otherwise * **switchers.style.full\_name** (default: `true`)\ Display the full name of the language.`false` to just show the 2-letter language code (eg. FR, ES, DE, EN...) * **switchers.style.is\_dropdown** (default: `true`)\ Display the language selector as a dropdown. `false` to show it as a list * **switchers.style.with\_flags** (default: `true`)\ Display flags on switcher. `false` otherwise * **switchers.style.flag\_type** (default: `rectangle_mat`)\ When `with_flags` is `true`, you can choose flag style option: * `shiny` * `square` * `circle` * `rectangle_mat` * **switchers.style.invert\_flags** (default: `true`)\ When `is_dropdown` is `false` , the switcher is a list. When you select a language, it has the same behavior as a dropdown: *the selected one is always at first*. You can set this option to `false` to disable this behavior and show a fixed list when language changed. **switchers.location** A Javascript Object to define position of your switcher in the page. * **switchers.location.target** The CSS selector of the node that the switcher will be a child of * **switchers.location.sibling** The CSS selector of the next sibling element of the switcher. `null` for the last element inside the target ```javascript { switchers: [ { // Same as button_style at root style: { full_name: true, with_name: true, is_dropdown: false, with_flags: true, flag_type: "circle", invert_flags: false }, // Move switcher somewhere in the page location: { target: ".header-nav", sibling: null } } ], } ``` ### wait\_transition Default: `true`\ `true`to prevent content blinking when translating a new page. ### hide\_switcher Default: `false`\ `true` to prevent Weglot from creating language switchers, `false` otherwise. If you set it to `true`, it's your responsibility to use the [Client-side API](https://developers.weglot.com/javascript#weglot-switchto-code) or [link hooks](https://developers.weglot.com/javascript#link-hooks) to change languages on the page. It's also useful with the auto-switch option. ### translate\_search Default: `false`\ `true` to translate search queries on the website, `false` otherwise. You need to add details to select forms to translate with `search_forms` & `search_parameter` options ### search\_forms Default: `""`\ A comma-separated list of CSS selectors of search form elements to watch for. Useful only if `translate_search` is `true`. The form has to send the `q` parameter for it to work (or the `search_parameter`, if present) ```javascript { translate_search: true, // Need to be true, otherwise search_forms is useless search_forms: "form#side-search, form.search-form" } ``` ### search\_parameter Default: `""`\ Name of the input in your form(s) which will send keywords. Frequently, this is the parameter which contain your keywords in URL.For example, if you have `"?q=xxxxx"`, it will be `q` ```javascript { translate_search: true, search_forms: ".my-form", //
search_parameter: "q" // it's the name value of your form's search input : } ``` ### whitelist Default: `""` An array of objects containing CSS selectors of elements you want to translate on your page. This will disable all others translations in the same page. ```javascript // all other elements won't be translated { whitelist: [ { value: ".my-translated-block" }, { value: ".my-another-block" } ] } ``` ### cache Default: `false` Setting this to `true` greatly improves user experience by caching Weglot's translations into your visitors' browser. Translations are kept up-to-date asynchronously. ### extra\_definitions A Javascript Array of Objects representing extra translation definitions **extra\_definitions.selector** A CSS selector to the element(s) you want to target **extra\_definitions.attribute** The name of the attribute you'd like to translate **extra\_definitions.type** Default: `1` Optional. The [WordType](https://developers.weglot.com/api/reference#wordtype) of the text that you'd like to translate ```javascript { extra_definitions: [ { type: 1, // Type of translation, 1 for text, others: https://developers.weglot.com/api/reference#wordtype selector: "input.someclass[type=text]", // Selector to find element with attribute attribute: "data-tooltip" // Name of attribute which is translated } ] } ``` ### remove\_unused\_link\_hooks Default: `false` If you use [link hooks](https://developers.weglot.com/javascript/link-hooks) you may have some excluded pages, so your links will be inactive with anchors `#Weglot-xx`. Turn this option to `true` and we'll remove this HTML links. ### extra\_merged\_selectors Array of CSS selectors to merge your own HTML nodes in your translations. [More information here](https://developers.weglot.com/javascript/advanced-concepts/translation-engines) about translation engine. ```javascript { extra_merged_selectors: ["code", ".wg-merged-nodes"] } ``` ## Examples A full example could look like this: ```javascript // EXAMPLE VALUES, NOT DEFAULT Weglot.initialize({ // Only mandatory value is api_key: api_key: "wg_1234567897e2ea993d291b571c2ec93b0", // Next are optionals, often editable on your Weglot dashboard. // Options written here are concatenated with dashboard options when it's possible, otherwise these one have priority // Manually design switcher switchers: [ { style: { full_name: true, with_name: true, is_dropdown: false, with_flags: true, flag_type: "circle", invert_flags: false }, // Move switcher somewhere in the page location: { target: ".header-nav", sibling: null } } ], // Automatically redirect visitor by its navigator's language auto_switch: true, // If auto switch is true, but you don't have visitor's language, redirect on this language code, otherwise original language auto_switch_fallback: "en", // Only translate these blocks whitelist: [ { value: ".only-translate-me" // All other elements in the same page won't be translated anymore! } ], // Exclude some blocks from translation excluded_blocks: [ { value: ".no-translate" // All elements with this class won't be translated } ], // Exclude some path in website from translation excluded_paths: [ { value: "/blog", type: "START_WITH" // IS_EXACTLY, CONTAIN, START_WITH, END_WITH, MATCH_REGEX } ], // Don't display default switcher, nothing else change, translation works. Useful with Auto-switch feature! hide_switcher: false, // Use front cache between pages, speed up your page loading! cache: true, // Shopify special options: customer_tag: true, // Add a tag on your customer when they signup, 2-letter code eg. "EN" order_tag: true, // Add a tag on your order when they are filled, 2-letter code eg. "EN" // Translate search translate_search: true, // Translate search keywords from visitors' language search_parameter: "s", // Because my search input has name="s" attribute. search_forms: "#sidebar-search, #main-search", // CSS selectors of which contain search input // Hide original text before loading translated one, true by default wait_transition: true, extra_definitions: [ { type: 1, // Type of translation, 1 for text, others: https://developers.weglot.com/api/reference#wordtype selector: "input.someclass[type=text]", // Selector to find element with attribute attribute: "data-tooltip" // Name of attribute which is translated } ], remove_unused_link_hooks: true, // If some languages are disable, remove HTML element which contains #Weglot-xx links extra_merged_selectors: ["code", ".wg-merged-nodes"] }); ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://developers.weglot.com/javascript/options.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.