Implementation recommendations

  • Put your <script> tag inside <head> tag, as early as possible. If you are using Active as a library, initialize it as early as possible. This prevents "blinking" experience for end-users while translating the page.

  • Add crossorigin attribute to the <script> tag

    <script src="https://active.motaword.com/index.js" crossorigin></script>
  • Use async
    <script src="https://active.motaword.com/index.js" crossorigin async></script>

This way, Active JS will load asynchronously, as early as possible, and will start putting the translations as the DOM elements become available.

  • If your page is large, enable useDynamicTranslations or data-use-dynamic-translation in your Active configuration along with async loading of the script. This is enabled for you by default, and we do not recommend disabling it for most of the websites. If disabled, interactive elements on your page won't be translated properly.

  • Do not use defer in your <script> tag as it delays translating the DOM and increases "blinking" experience for end-users.

  • During testing and/or on staging environments, enable useDummyTranslations option so that you won't incur any costs.