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 Name	Script Tag Data Attribute Name	URL Query Parameter Name	Default Value	Required	Available Options	Description
Token	data-token	mwActiveToken	null	yes		This is the token given to you by MotaWord.
Project ID	data-project-id	mwActiveProjectId	null	yes		This is the project ID given to you by MotaWord.
Current Language	data-current-language	mwActiveCurrentLanguage	null	no	any language code that your website project supports	You can tell us the current locale language that the user should view. Usually given from backend systems.
Render Widget	data-render-widget	mwActiveRenderWidget	true	no	"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 Element	data-widget-element	mwActiveWidgetElement	`#mw-active`	no	DOM 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.
Theme	data-theme	mwActiveTheme	light	no	light, dark	Specify which theme you would like to use with our widget.
Position	data-position	mwActivePosition	bottom-left	no	bottom-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 User	data-follow-user	mwActiveFollowUser	true	no	"false", "no", "0", true", "yes", "1"	Specify whether we should follow the user around in your website and automatically translate pages.
Use Dummy Translations	data-use-dummy-translations	mwActiveUseDummyTranslations	false	no	"false", "no", "0", true", "yes", "1"	When enabled, we will simply prefix all translatable content with `Translated ({languageCode}) -`
Use Dynamic Translations	data-use-dynamic-translations	mwActiveUseDynamicTranslations	true	no	"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 Mode	data-change-mode	mwActiveChangeMode	history	no	history, redirect, `NULL`	When 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 Mode	data-url-mode	mwActiveUrlMode	path	no	path, query, `NULL`	When 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 Links	data-modify-links	mwActiveModifyLinks	true	no	"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 Name	data-query-name	mwActiveQueryName	locale	no	any string value	When `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 DOM	data-wait-for-dom	mwActiveWaitForDom	mixed	no	"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.