@tilde-nlp/web-translate-widget
Advanced tools
Widget to integrate in to another website to translate it
Quickly scale up from one language to a dozen! No coding, manual translation, or duplicated webpages! Simply select the target languages and Tilde’s Website Translator will instantly translate the content. For quality control, you can review and edit translations with a visual editor.
To use the Tilde Website Translator you will need:
npm i @tilde-nlp/web-translate-widget
All elements are translatable by default, but you may set elements as non-translatable by setting the value of translate attribute to no.
The same applies to language attributes. All elements are translatable unless the value of lang attribute is not equal to source language configuration in the options (TildeMTTranslationPlugin.Options.sourceLanguage).
Translate attribute affects localization and translation of element's attributes (href, title, label, etc.)
<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>
Full code examples can be found in the npm package's './examples' folder.
examples/Multi pretranslated lang example - Full example of pretranslated website integration
examples/example1.html - Example of custom language switching through translator API
examples/example2.html - Example of minimal pretranslated website integration
Include a reference to the Tilde Website Translator
<script src="/dist/widget.js"></script>
Tilde Website Translator can be integrated using the default language selector or a custom solution. Both options support adding third party languages. Try the default selector for out-of-the-box solution. Check Options for a full list of options. Check the npm package's /examples folder for more implementation examples.
Default 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.
<html lang="en">
<head>
<!-- Enter the correct source code path -->
<script src="/dist/widget.js"></script>
</head>
<body>
<div class="tildemt-widget"></div>
<!-- This will be translated -->
<p>This will be translated</p>
<!-- This will not be translated -->
<p translate="no">This will not be translated</p>
<!-- This will not be translated -->
<p lang='ja'>これを訳して</p>
</body>
<footer>
<script>
// Configure
// Change XXXXXXXXXXX to your Client-ID
TildeMTTranslationPlugin.Options.api.clientId = "XXXXXXXXXXX";
TildeMTTranslationPlugin.Options.ui.toolbarPosition = "top";
// Display the language selector as a dropdown:
// menu - "menu"
// list of buttons - "list"
TildeMTTranslationPlugin.Options.ui.layout = "menu";
// Set UI language the administrator will see,
// by default it will be displayed in the language you are translating into
TildeMTTranslationPlugin.Options.ui.translation.adminLanguage="en";
// Display UI in the language your visitors are translating into:
// target language - "target",
// the original language - "source"
TildeMTTranslationPlugin.Options.ui.translate = "target";
// Allow your visitors to suggest translations:
// allow - "true"
// disallow - "false"
TildeMTTranslationPlugin.Options.ui.suggestions.allowAnyoneToSuggest=false;
// Set the source language
TildeMTTranslationPlugin.Options.sourceLanguage = "en";
TildeMTTranslationPlugin.Initialize()
</script>
</footer>
</html>
Initializes Tilde 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 API key
TildeMTTranslationPlugin.Options.api.clientId = 'x-xxxxxxxx-xxxx-xx'
// Source language that will be used to generate machine translation
TildeMTTranslationPlugin.Options.sourceLanguage = "en"
// Initialize
await TildeMTTranslationPlugin.Initialize()
Translation can be started or canceled through JS. This is especially needed if default language selection is not used.
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")
})
})
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.
Restores page in Source language
TildeMTTranslationPlugin.CancelAndRestore()
TildeMTTranslationPlugin.Translate("lv")
TildeMTTranslationPlugin.Translate("lv", "smt-xxxxxxxx-xxxx-xx")
Returns language code for web page. Value can be also SourceLanguage. This can be used to programmatically read web page language.
TildeMTTranslationPlugin.CurrentLanguage
Returns available languages and systems. Can be used to create custom language menu or language selection using JavaScript translation API.
TildeMTTranslationPlugin.GetTargetLanguages()
Broaden the language coverage with machine translation for an already multilingual website that has content in two or more languages.
Step #1: Additionally, to the initial configuration you have to decide which of the pre-existing language versions of the website will be the source for the translation. It is going be used to generate the machine translation in additional languages.
Set the sourceLanguage option to the selected language.
Check what language directions your subscription offers to make the decision.
TildeMTTranslationPlugin.Options.sourceLanguage = "en"
Step #2: 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.
TildeMTTranslationPlugin.Options
.translation.thirdPartyTranslationLanguages = ['de', 'fr']
Step #3: Set the language of the webpage that is currently rendered (English, German, or French in this example). Use your own logic to detect this.
TildeMTTranslationPlugin.Options
.currentLanguage = document.documentElement.getAttribute('lang')
console.log('Current lang: ' + TildeMTTranslationPlugin.Options.currentLanguage)
Step #4: 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 (TildeMTTranslationPlugin.Options
.translation.thirdPartyTranslationLanguages.includes(language)) {
translationHandled = true
if (TildeMTTranslationPlugin.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)
})
}
TildeMTTranslationPlugin.Initialize()
TildeMTTranslationPlugin.Options.
translation.onLanguageSelected = onLanguageSelectedHandler;
More elaborate example is available in npm package ./examples/Multi pretranslated lang example/ directory.
Tilde Website Translator determines automatically target language if webpage uses lang parameter in URL query.
Tilde Website Translator 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 Tilde Website Translator checks if language without country code is available.
Type: String
Default: en
Source language for machine translation
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, Tilde Website Translator will try to get page in sourceLanguage by calling translation.onLanguageSelected(sourceLanguage)
Type: Boolean
Default: false
Enable verbose logging in console
Type: String
Default: null
Authorization key which allows Tilde Website Translator to access translation API Required
Type: String
Default: https://letsmt.eu/ws/Service.svc/json
Translation service Uri
Type: String
Default: https://readymt.tilde.com/Account/Token
Authentication service Uri
Type: Boolean
Default: true
Save last translation target language and on next page load, automatically translate to it.
if browser url contains lang parameter in url, Tilde Website Translator will use it for translation.
Otherwise if lang parameter is not available, saved language will be used.
Type: Object
Default: null
Limit translation systems by defining systems and their target languages as object Default will show all available systems. Limiting systems can be useful, because there may be multiple systems with different domains for single language code.
{
"smt-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx": "lv",
"smt-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx": "ru"
}
Type: Boolean
Default: false
Translate only tags and their children which have translate="yes" attribute
Type: Boolean
Default: true
Translate HTML attributes
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 Tilde Website Translator, false otherwise
Type: Array<string>
Default: []
Define languages which are supposed to be translated with third party
Type: Boolean
Default: false
Filter systems by app id to show only systems
Type: Boolean
Default: false
Hide MT toolbar with translation progress.
Type: String
Default: null
Example: en
Language code in which plugin interface is shown when user is signed in WTW
Type: Boolean
Default: false
Show option to suggest translation for unauthorized users
Type: Boolean
Default: true
Automatically preview suggestion changes in web page when suggestion is added.
Type: Number
Default: 500
How much time to wait after user is started to hover translation to show suggestion popup (in ms)
Type: String
Default: bottom
Where toolbar is positioned. Values can be:
Type: HTMLElement
Default: null
Main container HTMLElement for web page that contains all scrollable content
Type: Boolean
Default: false
Show original text even if public suggestions are set to false
Type: Boolean
Default: true
Show notification about what service is providing translation
Type: Boolean
Default: true
Show or hide translation popup Also when disabled, highlight for translated sentences won't be visible.
Type: Boolean
Default: false
Show languages in native language for example in Language Menu
Type: Boolean
Default: true
Show sign in link for WTW
Type: String
Default: source
Translate UI, values can be:
Type: Boolean
Default: true
Show or hide "restore" and "cancel" translation buttons on UI
Type: String
Default: menu
Change display mode of the language selection in UI, values can be:
You can find all development options in npm package ./src/js/interfaces/IPluginOptions.ts
 Edge |  Firefox |  Chrome |  Safari |  Opera |
|---|---|---|---|---|
| 14+ | 52+ | 51+ | 10+ | 38+ |
Edge Legacy and Internet Explorer browsers are not supported.
All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.
Copyright (C) 2020 by Tilde SIA. All rights reserved.
Proprietary software.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
FAQs
Widget to integrate in to another website to translate it
The npm package @tilde-nlp/web-translate-widget receives a total of 29 weekly downloads. As such, @tilde-nlp/web-translate-widget popularity was classified as not popular.
We found that @tilde-nlp/web-translate-widget demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.