Watson IBM Translation Demo Page

This page demonstrates IBM Translation Widget--a web application which enables to translate web content into other languages. Choose a language from the Select language pulldown to read a translation of this page.

Translate with Weglot

Quick Start

To add translation to your English web page add to it the following code snippet:

<script id='ibm-transwidget-script-id' type='text/javascript' src='TRANSWIDGET_HOST/tw.js'>

Transwidget Options

Transwidget behavior and look can be customized by overriding the default configuration through data stored in <script> element used to fetch the tw.js script. The above code snippet is equivalent to specifying all options with their default values. Create customized version by filling the form below.

Generated Code

<script id='ibm-transwidget-script-id' type='text/javascript' src='TRANSWIDGET_HOST/tw.js' data-ibm-tw-opts='{"enable_corrections": false, "enable_hover": false, "monitor_page": false, "remember_language": true, "show_banner": true, "show_disclaimer": true, "show_hover": false, "source_language": "en"}'></script>
<!--Omitting a value is equivalent to setting it to the default value.-->


1. Preventing Translation of Selected Area

Transwidget will skip translation of any element (and all its children) which contains the attribute translate=0 . Did you notice how the top title IBM Translation Widget never gets translated? That is achieved by adding translate=0 to the <b> tag, like this:

<b translate=0>IBM Translation Widget</b>

This attribute can be added to any tag including <div> such that any text within these tags will not be translated.

2. Translation provider

You can choose an IBM Watson or Weglot provider to translate your site by specifying the provider parameter in data-ibm-tw-opts. "provider": "wg" for Weglot, empty or omitted for IBM Watson.

3. Language Selector Location

The way the widget draws itself is by calling insertBefore(selector, document.body.childNodes[0]). One can control location of the selection widget by creating a

<div id='ibm-tw-selector-div-id'>

The language selector will be inserted as a child of this div. The id itself can be changed by setting 'selector-div-id' tag in json supplied in 'data-ibm-tw-opts' attribute of the script element used to load tw.js. The default value used if tag is omitted is 'ibm-tw-selector-div-id'.

4. Language Selector Styling

If you would like to change the style of panel, you can assign pre-existing CSS classnames to the 4 different components in the widget. You do this by appending to 'data-ibm-tw-opts' json the classname for each component you want to override.

The defaults are:
ibm-tw-selector-table-default { float: left; margin: 3px; border: 1px solid #4477bb; padding: 0px; }
ibm-tw-title-row-default { background-repeat: repeat; color: 4675c3; font-family: sans-serif,arial; font-size: 10pt; text-align: center; font-weight: normal; padding: 1px; }
ibm-tw-language-row-default { font-family: verdana; font-size: 8pt; }
ibm-tw-correction-row-default { background-color: 4477bb; color: white; cursor: pointer; font-weight: bold; font-size: 8pt; font-weight: bold; padding: 4px; }
5. Language Translator credentials
Transwidget can be configured in two ways:
6. Retrieving Corrections
Thank you,

IBM Translation Team