Web-translate-widget NPM

Webpage translation widget

Reach a global audience for your website with just a few clicks!

With the website translation widget, you can make your site multilingual without any coding, manual translating, and duplication of pages.

AI technology-based translation widget can be integrated into any website or e-commerce platform, which instantly translates all its content. The user can switch between multiple languages and get a precise and fast understanding of what you’re offering.

Feature

Visual Editor A visual editor gives you complete quality control and allows you to edit and manage your translations effortlessly directly inside your website design and structure!
SEO indexing Search engines will index translated pages and you will be able to be found organically in your customer's native language.
SEO editing Some keywords and headlines may need extra special attention and adaptation for each market. With the SEO text editor you will be able to easily edit all the metadata information to make your content attractive to search engines.
Usage Statistics You can see your translation traffic and the number of translations on your translation platform dashboard.
Integrations Tilde Website widget is compatible with any kind of website including WordPress, Shopify, Drupal, JavaScript, Joomala, HTML.

Tanslatable text

You can define elements that are non-translatable with translate attribute By default all elements if not specified otherwise are translatable. The same applies to language attributes. Only elements with source language specified in plugin options will be translated.

<div translate="yes">
   You can define elements to translate with translate attribute
   <div translate="no">
      Excluded elements can be child of translatable elements
      <div translate="yes">
            Multiple levels of translate attribute can be processed
            <div translate="no">
               This element will not be translated because of translate attribute
            </div>
      </div>
   </div>
</div>

Install

npm install tilde-web-translate-widget

Usage

Include reference to translation plugin

<script src="/dist/widget.js"></script>
<link rel="stylesheet" href="/dist/widget.css"></link>

Language selection

Optional If you want to use built-in language selection, add element to your page. This will be continer where language select will be placed.

<div class="tildemt-widget"></div>

Initialization

Initializes plugin to be ready translate page - language menu, fetches available MT systems. If last target language was translated with MT, then automatically start translation to it. Initialize should be issued only once, further calls will take no effect.

// Configure plugin with your personal API key
TildeMTTranslationPlugin.Options.api.clientId = 'x-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'

// Initialize plugin
await TildeMTTranslationPlugin.Initialize()

Plugin translation can be started or canceled through JS. This is especially needed if default language selection is not used.

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 
TildeMTTranslationPlugin.Translate("lt").then(function(translationFinish){
   // You can wait when page is translated
   Promise.all(translationFinish).then(function(){
      console.log("Translation is complete")
   })
})

Cancel translation

Restores page in Source language

TildeMTTranslationPlugin.CancelAndRestore()

Translate with specific system for given language

TildeMTTranslationPlugin.Translate("lv", "smt-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx")

Get current language

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

TildeMTTranslationPlugin.CurrentLanguage

Options

Plugin determines automatically target language if webpage uses lang parameter in url query.

Plugin supports ISO 639-1 language codes with optional ISO 3166-1 alpha-2 country codes. If language is not found with specified country code, then plugin checks if language without country code is available.

TildeMTTranslationPlugin.Options.sourceLanguage

Type: String
Default: en
Source language for machine translation

TildeMTTranslationPlugin.Options.currentLanguage

Type: String
Default: null
Current web page language (if the web page is already pre-translated). The language in which the website has been translated. When currentLanguage is not equal to sourceLanguage, selecting language to translate, plugin will try to get page in sourceLanguage by calling translation.onLanguageSelected(sourceLanguage)

TildeMTTranslationPlugin.Options.debug

Type: Boolean
Default: false
Enable verbose logging in console

Translation API options

TildeMTTranslationPlugin.Options.api.clientId

Type: String
Default: null
Authorization key which allows plugin to access translation api\ Required

TildeMTTranslationPlugin.Options.api.services.Translation

Type: String
Default: https://letsmt.eu/ws/Service.svc/json
Translation service Uri

TildeMTTranslationPlugin.Options.api.services.Authentication

Type: String
Default: https://readymt.tilde.com/Account/Token
Authentication service Uri

Translation options

TildeMTTranslationPlugin.Options.translation.autoTranslate

Type: Boolean
Default: true
Save last translation target language and on next page load, automatically translate to it.

TildeMTTranslationPlugin.Options.translation.systems

Type: Object

Default: null

Limit translation systems by defining systems and their target languages as object

{
   "smt-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx": 'lv',
   "smt-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx": 'ru'
}

TildeMTTranslationPlugin.Options.translation.translateOnlyAllowedTags

Type: Boolean
Default: false
Translate only tags and their children which have translate="yes" attribute

TildeMTTranslationPlugin.Options.translation.translateAttributes

Type: Boolean
Default: true
Translate HTML attributes

TildeMTTranslationPlugin.Options.translation.onLanguageSelected

Type: Function
Default: () => Promise.resolve(false)
Custom actions on selecting languages. This function if implemented should return Boolean -> true when Language must be Translated with this Translation plugin, false otherwise

TildeMTTranslationPlugin.Options.translation.thirdPartyTranslationLanguages

Type: Array<string>
Default: []
Define languages which are supposed to be translated with third party

TildeMTTranslationPlugin.Options.ui.filterSystemsByAppID

Type: Boolean
Default: false
Filter systems by app id to show only systems

UI options

TildeMTTranslationPlugin.Options.ui.suggestions.allowAnyoneToSuggest

Type: Boolean
Default: false
Show unauthorized users option to suggest translation

TildeMTTranslationPlugin.Options.ui.suggestions.automaticPreview

Type: Boolean
Default: true
Automatically preview suggestion chages in web page when suggestion is added.

TildeMTTranslationPlugin.Options.ui.tooltipShowDelay

Type: Number
Default: 500
How much time to wait after user is started to hover translation to show suggestion popup (in ms)

TildeMTTranslationPlugin.Options.ui.toolbarPosition

Type: String
Default: bottom
Where toolbar is positioned. Values can be:
- "top" - Show translation toolbar at the top of the page
- "bottom" - Show translation toolbar at the bottom of the page

TildeMTTranslationPlugin.Options.ui.mainContentElement

Type: HTMLElement
Default: null
Main container HTMLElement for web page that contains all scrollable content

TildeMTTranslationPlugin.Options.ui.alwaysShowOriginalTextInPopup

Type: Boolean
Default: false
Show original text even if public suggestions are set to false

TildeMTTranslationPlugin.Options.ui.showPopupTranslationProvider

Type: Boolean
Default: true
Show notification about what service is providing translation

TildeMTTranslationPlugin.Options.ui.showPopup

Type: Boolean
Default: true
Show or hide translation popup

TildeMTTranslationPlugin.Options.ui.showOriginalControl

Type: Boolean
Default: false
Show control in translation toolbar which controls whether translation popup appears

TildeMTTranslationPlugin.Options.ui.showMTVendor

Type: Boolean
Default: false
Show Machine Translation system vendor in Translation toolbar

TildeMTTranslationPlugin.Options.ui.showLanguagesInNativeLanguage

Type: Boolean
Default: false
Show languages in native language for example in Language Menu

TildeMTTranslationPlugin.Options.ui.showSignInLink

Type: Boolean
Default: true
Show sign in link for WTW

TildeMTTranslationPlugin.Options.ui.translate

Type: String
Default: source
Translate plugin ui, values can be:
- source - Show plugin ui in source language
- target - Show plugin ui in target language

TildeMTTranslationPlugin.Options.ui.showTranslationControls

Type: Boolean
Default: true
Show or hide "restore" and "cancel" translation buttons on Translation Plugin UI

TildeMTTranslationPlugin.Options.ui.layout

Type: String
Default: menu
Change display mode of the language selection in UI, values can be:
- "menu" - Show available languages in select
- "list" - Show available languages as list items
- null - Hide language menu If you wish to add more functionality, please consider use your own language menu?

You can find all development options here here

Example

Full examples of code can be viewed here Example 1 and Example 2

Licence

XXXXX

@babel/polyfill axios core-js diff js-cookie rxjs uuid

1.8.0

3 years ago