Configuration

You can configure your Active implementation in several ways: via script tag attributes, Configuration object in the library or even URL query parameters! The last one should be used only for debugging purposes.

Configuring via script tag attributes

You can provide each configuration as an attribute to the <script> tag that you are using to load ActivejS.

Example:

<script 
    src="https://active.motaword.com/index.js" 
    crossorigin
    data-token="token" 
    data-project-id="project-id"
    data-current-language="en-US"
    data-render-widget="true"
    data-widget-element="#my-language-selector"
    data-theme="light"
    data-position="in-place-down"
    data-follow-user="true"
    data-use-dummy-translations="false"
    data-use-dynamic-translations="true"
    data-change-mode="history"
    data-url-mode="path"
    data-modify-links="true"
    data-query-name="locale"
    data-wait-for-dom="true"></script>

Configuring library use

You can provide each configuration as an attribute to the <script> tag that you are using to load ActivejS.

Example:

import Active from 'motaword-active-js';
import Configuration from 'motaword-active-js/configuration';

const config = new Configuration();
config.accessToken = "my-token";
config.projectId = "123";
config.currentLanguage = "en-US";
config.widgetElement = "#mw-active";
config.renderWidget = true;
config.theme = "light";
config.position = "bottom-left";
config.followUser = true;
config.useDummyTranslations = true;
config.useDynamicTranslations = true;
config.changeMode = "history";
config.urlMode = "path";
config.queryName = "locale";
config.waitForDom = true;

const activeInstance = new Active(config);
...

Configuring via URL

This method is mostly for debugging purposes.

You can provide each configuration as query parameter in your page URL, prefixed with mwActive.

Example:

https://www.example.com/about?
    mwActiveAccessToken=my-token
    &mwActiveProjectId=123
    &mwActiveCurrentLanguage=en-US
    &mwActiveWidgetElement=%23mw-active
    &mwActiveRenderWidget=true
    &mwActiveTheme=light
    &mwActivePosition=bottom-left
    &mwActiveFollowUser=true
    &mwActiveUseDummyTranslations=true
    &mwActiveUseDynamicTranslations=true
    &mwActiveChangeMode=history
    &mwActiveUrlMode=path
    &mwActiveModifyLinks=true
    &mwActiveQueryName=locale
    &mwActiveWaitForDom=true

Options

Parameter NameScript Tag Data Attribute NameURL Query Parameter NameDefault ValueRequiredAvailable OptionsDescription
Tokendata-tokenmwActiveTokennullyesThis is the token given to you by MotaWord.
Project IDdata-project-idmwActiveProjectIdnullyesThis is the project ID given to you by MotaWord.
Current Languagedata-current-languagemwActiveCurrentLanguagenullnoany language code that your website project supportsYou can tell us the current locale language that the user should view. Usually given from backend systems.
Render Widgetdata-render-widgetmwActiveRenderWidgettrueno"false", "no", "0", true", "yes", "1"Tell Active JS to render a widget. You can also use Active programmatically without rendering a language selection widget.
Widget Elementdata-widget-elementmwActiveWidgetElement#mw-activenoDOM selector to render the widget inside or "", "NULL"Given a widget element, we'll render the widget inside this element. If not, we will create and use our default floating widget element.
Themedata-thememwActiveThemelightnolight, darkSpecify which theme you would like to use with our widget.
Positiondata-positionmwActivePositionbottom-leftnobottom-left, bottom-right, in-place, "", "NULL"Specify where to render the widget. Giving "" empty string or "NULL" string will render the widget inline without the dropdown.
Follow Userdata-follow-usermwActiveFollowUsertrueno"false", "no", "0", true", "yes", "1"Specify whether we should follow the user around in your website and automatically translate pages.
Use Dummy Translationsdata-use-dummy-translationsmwActiveUseDummyTranslationsfalseno"false", "no", "0", true", "yes", "1"When enabled, we will simply prefix all translatable content with Translated ({languageCode}) -
Use Dynamic Translationsdata-use-dynamic-translationsmwActiveUseDynamicTranslationstrueno"false", "no", "0", true", "yes", "1"When enabled, we will use Intersection and Mutation observers to translate the page. Otherwise, we will simply parse the whole DOM and translate only once.
Locale Change Modedata-change-modemwActiveChangeModehistorynohistory, redirect, NULLWhen a user changes locale (or when we automatically detect and change it for them), we will change the URL of the page they are in. We can do this by actually redirecting the user to the new page, or by simply changing the URL in the address bar via browser's History API. When NULL, we won't apply any URL changes.
Locale URL Modedata-url-modemwActiveUrlModepathnopath, query, NULLWhen a user changes locale (or when we automatically detect and change it for them), we will change the URL of the page they are in. We can either change the path of the URL to prefix it with the locale code, or we can add a query parameter to the URL. We also use this mode to detect the locale for the current page when a user directly loads a page. When NULL, locale detection from URL will be disabled (even then, if the user has selected a locale manually, and followUser is enabled, we will still automatically translate the page in user's locale.
Modify Linksdata-modify-linksmwActiveModifyLinkstrueno"false", "no", "0", true", "yes", "1"We can automatically localize the same-domain URLs in your page. The way we localize the URL depends on urlMode configuration. We can either add/update the locale query parameter, or add/update the path of the URL.
Query Parameter Namedata-query-namemwActiveQueryNamelocalenoany string valueWhen urlMode is query, we will use this query parameter name in the URL, to detect the requested locale to update the URL when user changes locale to modify the links on page when modifyLinks is enabled.
Wait For DOMdata-wait-for-dommwActiveWaitForDommixedno"false", "no", "0", true", "yes", "1"Should we wait until the DOM is ready to translate the content? When you put ActiveJS script inside <head> tag, we will automatically make this true unless you explicitly specify otherwise. When ActiveJS script is used within <body>, this is false by default.