Skip to main content

Full integration guide

Learn about integration and how to customize the language selector for your website.

Create, edit and delete integrations​

Create a new Website translator​

To create a new Website translator:

  1. On the NLTP website, open Website Translator > My integrations.
  2. Click + Create website translator.
  3. Fill the form:
    • Give your integration a name;
    • Add your website domain. (example.com, www.example.com and sub.example.com should all be added separately by clicking Add another domain);
    • Select your website's original language.
    • Select languages you want your website to be translated into.
  4. Click Create.
  5. Copy the generated integration code and add it to your website.

Create new integration Create new integration2

Tip

Create different integrations for Test and Production environments to keep the translations separate.

Edit existing integration settings​

To change and add new languages or update the domains:

  1. On the NLTP website, open Website Translator > My integrations.
  2. In the list of integrations, find the one you want to edit.
  3. Click ⚙️Settings.
  4. Scroll down to Edit website translator.
  5. Make your changes and click Save changes.

If you have your website open, you will need to reload the page (Ctrl+F5) to see the changes.

Edit existing integration

Delete integrations​

To delete an integration:

  1. On the NLTP website, open Website Translator > My integrations.
  2. In the list of integrations, find the one you want to delete.
  3. Click ⚙️Settings.
  4. On the bottom of the page, click Delete website translator.

Setup language selector​

Use the default language selector​

Language selector can be displayed as a dropdown or a list of buttons that can be styled by css to further match your style. It will load the available languages automatically and start translation on making a selection.

Add an element with class="website-translator" to your page.

<div class="website-translator"></div>

Setting WebsiteTranslator.Options.ui.layout="menu" will display the language selector as a dropdown menu. It is the default appearance.

Website translator menu

The website translator’s language selector can be displayed as a list of buttons setting WebsiteTranslator.Options.ui.layout="list",

Website translator button list

That can be further styled with CSS as you wish:

Website translator button list styled

Setting WebsiteTranslator.Options.ui.layout=null will hide the default language selector, but keep the translation progress bar visible.

Use a custom language selector​

Initialize​

Initializes Website Translator - language select, fetches available MT systems. If there is lang parameter in URL, it will translate to language that is provided in parameter value. If there is no lang parameter and current source language is the same as last time when Tilde Website Translator was used, then it will translate to last translated target language.

Normally Initialize should be issued only once, but further calls will reinitialize language select. Consider this when your page changes DOM including language menu.

// Configure your personal access key
WebsiteTranslator.Options.api.clientId = 'x-xxxxxxxx-xxxx-xx'

// Initialize
await WebsiteTranslator.Initialize()

Start translation and wait until finished​

Translate page to specific language. If you call Translate even if previous translation is not finished, it will cancel current translation, restore web page in original language and start new translation in specified language - same as to issue Cancel and restore translation and start new translation with Translate

// You can call next translation even when previous is not finished
WebsiteTranslator.Translate("lt").then(function(translationFinish){
   // You can wait when page is translated
   Promise.all(translationFinish).then(function(){
      console.log("Translation is complete")
   })
})

When page is translated, web page url lang parameter is changed to translated language or added if it does not exist

For example: https://example.com/ -> https://example.com/?lang=lt If page translation is restored, then lang parameter is set to source language.

Cancel translation​

Restores page in Source language

WebsiteTranslator.CancelAndRestore()

Translate with given language​

WebsiteTranslator.Translate("hu")

Get current language​

Returns language code for web page. Value can be also SourceLanguage. This can be used to programmatically read web page language.

WebsiteTranslator.CurrentLanguage

Get available languages and machine translation systems​

Returns available languages and systems. Can be used to create custom language menu or language selection using JavaScript translation API.

WebsiteTranslator.GetTargetLanguages()

Customize translation progress bar​

Translation progress bar can be displayed at the top or bottom of the page. Set WebsiteTranslator.Options.ui.headless=true

Add WebsiteTranslator.Options.ui.headless=true option to the configuration. Website visitors won’t see the translation progress bar and be able to revert the page to the original language by clicking the restore link.

Website translator headful

Integrate in an already multilingual website​

Broaden the language coverage with machine translation for an already multilingual website that has content in two or more languages.

Specify the languages of your webpage that already have the translation embedded and machine translation should not be carried out. Configure the thirdPartyTranslationLanguages option if we have German and French versions of the English pages, for example:

WebsiteTranslator.Options
  .translation.thirdPartyTranslationLanguages = ['de', 'fr']

Set the language of the webpage that is currently rendered (English, German, or French in this example). Use your own logic to detect this.

WebsiteTranslator.Options
  .currentLanguage = document.documentElement.getAttribute('lang')
console.log('Current lang: ' + WebsiteTranslator.Options.currentLanguage)

Implement a JavaScript action to perform when the user changes language to one of the embedded languages (German or French in this example) instead of machine translation.

function onLanguageSelectedHandler(language) {
 console.info('Language selected: ' + language)
 return new Promise(function (resolve) {
   var translationHandled = false

   // Check if custom action must be perform to open a page with embedded
   // translation bypassing MT process
   if (WebsiteTranslator.Options
         .translation.thirdPartyTranslationLanguages.includes(language)) {
     translationHandled = true

     if (WebsiteTranslator.Options.currentLanguage !== language) {
       console.info('Redirecting to embedded language version of the page')
       // Add your own logic on how to transform URL of current language to URL
       // of selected target language or other necessary actions.
       // Note. This transform https://example.com/en/news to
       // https://example.com/de/news and vice versa.
       window.location.href =
         window.location.href.replace(/\.com\/\w+/, "/.com/" + language)
     }
   }
   resolve(translationHandled)
 })
}
WebsiteTranslator.Initialize()
WebsiteTranslator.Options.
    translation.onLanguageSelected = onLanguageSelectedHandler;