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