It is possible to include translate box in any website as webcomponent. To do this, you need to add <tilde-translate-box> tag with necessary properties.

In order to <tilde-translate-box> tag to work, you need to include compiled js file and components stylesheet file.

To include javascript file, you need to add following part somewhere in your head or body (depends on your web app and goals): <script type="text/javascript" src="https://unpkg.com/@tilde-nlp/ngx-translate@latest/src/assets/webcomponent/tilde-translate-box.js"></script>. This tag references translate box javascript file.

Including stylesheet is pretty much the same as javacsript, you need to add link in your project <link rel="stylesheet" href="https://unpkg.com/@tilde-nlp/ngx-translate@latest/src/assets/webcomponent/styles.css">. // INFO about specific parts for translate box

Note @latest part in the urls - this means that your page will always load latest version of library, which means library can change at any day with some new updates. If major version is updated, it may even break. Please evaluate best scenario. It might be good also to set it to specific version, to do that just replace @latest with version number, for example @5.0.5.

Integrating translatebox from javascript

If you are integrating from javascript, you can add parameters by appending translateBox element with properties in camelCase, which means if param name below is x-api-key, when using it in javascript, you should use it as xApiKey. Full list of params is visible below.

  <script>
    // create element for tilde-translate-box 
    var translateBox = document.createElement('tilde-translate-box'); 
    // set mandatory params  
    translateBox.xApiKey='MY-X-API-KEY';	
    // set optional params as needed
    translateBox.language="en";
    document.body.appendChild(translateBox);
</script>

Integrating translatebox from html

If you are integrating from html, you can add parameters by appending <tilde-translate-box></tilde-translate-box> tag. For example, if the parameter name is x-api-key and your value for this parameter is MY-API-KEY, your tag after modification would look like this: <tilde-translate-box x-api-key="MY-API-KEY"></tilde-translate-box>. Full list of params is visible below.

<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"></tilde-translate-box>
      
      <script type="text/javascript" src="https://unpkg.com/@tilde-nlp/ngx-translate@latest/src/assets/webcomponent/tilde-translate-box.js"></script>
    </body>
</html>

Input params

Translate box has some mandatory parameters and some optional configuration settings than can be set from html or javascript. See integration examples for usage of params.

Translate box has following input params:

Mandatory params

Params that are mandatory and whose default values are null.

x-api-key - client authentication key. Contact support to get one.

Optional params

Translate box will work with default values that are described below.

allowed-file-types-auth-user - allowed file formats for authorized user default value [".doc", ".docx", ".docm", ".xlsx", ".pptx", ".odt", ".odp", ".ods", ".txt", ".html", ".htm", ".xhtml", ".xht", ".tmx", ".xlf", ".xlif", ".xliff", ".sdlxliff", ".sdlxlf", ".ttx", ".rtf", ".pages", ".tex", ".xml", ".json", ".sxw", ".pdf", ".csv", ".ttl", ".srt", ".png", ".jpg", ".jpeg", ".bmp"];

language - UI language code. default value en

Supported languages:

lv (Latvian)
lt (Lithuanian)
et (Estonian)
en (English)
de (German)
fi (Finnish)
pl (Polish)

default-language - UI fallback language. default value en

show-extensions - Show allowed extensions. default value true

contact-support - Wether should show contact support in nontification messages. default value true

is-auto-language-detection-enabled - Enable or disable auto detection of source language. defult value true

Keywords

FAQs

What is @tilde-nlp/ngx-translate?

Is @tilde-nlp/ngx-translate popular?

Is @tilde-nlp/ngx-translate well maintained?

Package last updated on 14 Nov 2024

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.

Install