Weglot
WebsiteGithubSlack
  • Developer Documentation
  • WordPress
    • Getting Started
    • Helpers Functions
    • Hooks
      • Translations Hooks
      • Other Hooks
    • Use cases
      • Lang attribute
      • Translate link
      • Implementing Custom Link Translation
      • Wp-rocket Lazyload
      • Deactivate Weglot on Elementor
      • Weglot translate on Elementor
      • Language Selector Styling
      • Change flag size
      • Exclude a Custom Post Type
      • Exclude the search page
      • Exclude draft or private status post
      • Plugin Woocommerce: Translate all email sent to customers
      • Plugin WooCommerce: Translate Product URLs
      • Use custom language code (URL, lang and hreflang attribute)
      • Theme OceanWP: Use language selector in the main menu
      • Theme Avada: Use language selector in the main menu
      • LinkedIn Share Post: Translate oEmbed WP URL
      • Hide button on excluded page
      • Auto switch only for HomePage
      • Proxify Url
      • Translate pdf for Woocommerce pdf invoice
      • Translate pdf with Gravity pdf
      • Translate Dublin core meta (or other meta)
      • How to not translate specific ajax action
      • How to get translated url programmatically
      • How to set WP locale based on Weglot current language
      • How to translate mail from Photo Reviews for WooCommerce
      • How to translate schema from schema.org generate by Yoast plugin
      • How to translate email sending by plugin WP Mail SMTP
      • How to hide the Weglot admin button for non administrator roles
      • Exemple of snippet to translate search from JetSearch plugin
      • Example of snippet to translate your checkout element (override/added by the Funnel Builder plugin)
      • LScache
      • How to fix live builder issue with Weglot
      • Add translated url to Rankmath sitemap index
      • Advanced Woo Search X Weglot
      • Conditionally Disabling Weglot Translation for Specific URLs
    • Weglot filters
      • weglot_translate_email
      • weglot_cancel_init
      • weglot_translate_email_languages_forced
      • weglot_menu_parent_item_title
      • weglot_active_current_menu_item
      • weglot_ajax_no_translate
      • weglot_active_translation_before_process
      • weglot_active_translation_before_treat_page
      • weglot_debug_file
      • weglot_autoredirect_only_home
      • weglot_autoredirect_skip
      • weglot_remove_google_translate
      • weglot_add_hreflang
      • weglot_get_replace_modify_link
      • get_replace_modify_link_in_xml
      • weglot_get_flag_class
      • weglot_get_name_with_language_entry
      • weglot_get_class_dropdown
      • weglot_button_html
      • weglot_get_dom_checkers
      • weglot_replace_div_id
      • weglot_replace_weglot_menu
      • weglot_render_default_button
      • weglot_render_switcher_editor_button
      • weglot_href_lang
      • weglot_get_options_from_cdn_cache
      • weglot_get_options_from_cdn_cache_duration
      • weglot_get_slugs_from_cache
      • weglot_get_slugs_cache_duration
      • weglot_exclude_blocks
      • weglot_exclude_urls
      • weglot_get_parser_ignored_nodes
      • weglot_navigator_language
      • weglot_url_auto_redirect
      • weglot_replace_url
      • weglot_replace_link
      • weglot_ajax_replace_urls
      • weglot_proxify_urls
      • weglot_add_json_keys
      • weglot_json_treat_page
      • weglot_html_treat_page
      • Copy of weglot_xml_treat_page
      • weglot_render_dom
      • weglot_default_current_language_empty
    • Algolia integration
  • Proxy
    • Headers
  • Javascript
    • Getting Started
    • Options
    • Javascript functions
    • Language link Hooks
    • Translate iframe
    • Advanced concepts
      • Translation engines
  • CMS Specific
    • Shopify
  • API
    • Reference
  • Cookies
Powered by GitBook
On this page
  • Options
  • api_key
  • switchers
  • wait_transition
  • hide_switcher
  • translate_search
  • search_forms
  • search_parameter
  • whitelist
  • cache
  • extra_definitions
  • remove_unused_link_hooks
  • extra_merged_selectors
  • Examples
  1. Javascript

Options

This page describes options available for the Javascript integration.

PreviousGetting StartedNextJavascript functions

Last updated 1 year ago

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 :

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

{
    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 trueto prevent content blinking when translating a new page.

hide_switcher

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)

{
    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

{
    translate_search: true,
    search_forms: ".my-form", // <form class="my-form">
    search_parameter: "q" // it's the name value of your form's search input : <input name="q" />
}

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.

// 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

{
  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

extra_merged_selectors

{
    extra_merged_selectors: ["code", ".wg-merged-nodes"]
}

Examples

A full example could look like this:

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

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 or to change languages on the page. It's also useful with the auto-switch option.

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

If you use 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.

Array of CSS selectors to merge your own HTML nodes in your translations. about translation engine.

https://dashboard.weglot.com/projects/edit
https://dashboard.weglot.com/projects/edit
WordType
link hooks
More information here
Client-side API
link hooks