Skip to main content
Machine Translation TranslateBox

Tilde TranslateBox

Tilde TranslateBox is a web component that embeds Tilde MT text and file translation into your website.

Translate box 1

TranslateBox authenticates using an access key created in Tilde MT. The available models and optional glossaries depend on how the key is configured.

Prerequisites​

Before beginning the integration, ensure you have:

  1. An active Tilde MT workspace account.
  2. A valid Access Key generated with appropriate scopes.
  3. Access to your web project's root directory for hosting assets.
Security

For public-facing applications, always use a scoped access key. Restrict the key to specific web domains to prevent unauthorized usage.

Install TranslateBox​

Add the TranslateBox script and stylesheet to your page:

  • <script src="https://unpkg.com/@tilde-nlp/ngx-translate@latest/src/assets/webcomponent/polyfills.js" type="module"></script>

  • <script src="https://unpkg.com/@tilde-nlp/ngx-translate@latest/src/assets/webcomponent/polyfills.js" type="module"></script>

  • <link rel="stylesheet" href="https://unpkg.com/@tilde-nlp/ngx-translate@latest/src/assets/webcomponent/styles.css">

To pin a specific version, replace @latest with a version number in both URLs.
Version history is available on npm: @tilde-nlp/ngx-translate.

Configuration reference

The full list of component parameters is maintained on npm: @tilde-nlp/ngx-translate.

Add TranslateBox to a page​

Replace MY-X-API-KEY with your access key.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Testing Tilde Translate Box</title>
    <base href="/" />
    <link rel="stylesheet" href="https://unpkg.com/@tilde-nlp/ngx-translate@latest/src/assets/webcomponent/styles.css">
  </head>
  <body>
    <tilde-translate-box
      x-api-key="MY-X-API-KEY"
      is-collections-activated="true"
      translate="no"
      hide-glossary-menu-without-collections="false"
      is-auth="false"          
      is-dictionary-enabled="true"
      dictionary-urls=["https://eurotermbank.com/svc/termsvc/lookup/result"]
    ></tilde-translate-box>
    <script src="https://unpkg.com/@tilde-nlp/ngx-translate@latest/src/assets/webcomponent/polyfills.js" type="module"></script>
    <script src="https://unpkg.com/@tilde-nlp/ngx-translate@latest/src/assets/webcomponent/main.js" type="module"></script>
  </body>
</html>