Parameters
You may prefer enable/disable some functionalities of the website translator, for that, use the parameters below:
| Configurations | Description | Values | Default |
|---|---|---|---|
| align | Defines the vertical alignment of the translator window on the site. | "default" or "top" or "bottom" | "default" |
| avatar | Defines the avatar that the plugin will use. | "HUGO" or "MAYA" | "HUGO" |
| doNotTrack | If the value of this property is true, translated phrases will not be stored or used to improve the translation system. | false or true | false |
| exceptions | List of queries that will be ignored by the plugin, e.g.: ["a", "form", ".main", "#site-title"] | array | [ ] |
| highContrast | Defines whether the plugin will start with dark mode activated. | false or true | false |
| maxTextSize | Defines the maximum number of characters for capturing text in an element. | Integer between 500 and 1000 | 800 |
| mobileConfig | Configuration object for the mobile platform; when defined, overrides the default Hand Talk settings. | Object | ´´ |
| mobileEnabled | When true, activates the website translator on mobile devices. | false or true | true |
| pageSpeech | When true activates the screen reader in the plugin. | false ou true | true |
| opacity | Defines the initial opacity of the background in the plugin. | Number: 0 or 50 or 100 | 100 |
| parentElement | Element that will receive the Hand Talk plugin. | Element | document.body |
| side | Defines the positioning of the translator window on the site. The Website Translator can be initialized on the left or right side of the screen. | "right" or "left" | "right" |
| textEnabled | When true: displays the website translator for texts. | false or true | true |
| zIndex | Defines the depth positioning of the translator on the site, i.e., whether the Website Translator will be closer or farther from the screen. | Integer | 1000000 |
| clickables | List of queries that will be treated as clickable elements by the plugin, e.g.: ["a", "form", ".main", "#site-title"] | array | [ ] |
Parameters example
Javascript
var ht = new HT({
// Change it to your acess token
token: "TOKEN",
// Changes the avatar to MAYA
avatar: "MAYA",
// Changes the alignment to the bottom
align: "bottom",
// Changes the side to the left
side: "left",
// Change the plugin's initial opacity
opacity: 50,
// Start the plugin with dark mode enabled
highContrast: true,
});
HTML
<body>
<h1>Hand Talk</h1>
<h2>Count on the help of Hugo and Maya, our virtual translator, to make your communication more accessible.</h2>
<p>We offer digital translation to accessibility in Libras, the Brazilian Sign Language.</p>
<!-- Takes the latest version of the Hand Talk Plugin. -->
<script src="https://plugin.handtalk.me/web/latest/handtalk.min.js"></script>
<script>
var ht = new HT({
// Change it to your acess token
token: "TOKEN",
// Changes the avatar to MAYA
avatar: "MAYA",
// Changes the alignment to the bottom
align: "bottom",
// Changes the side to the left
side: "left",
// Change the plugin's initial opacity
opacity: 50,
// Start the plugin with dark mode enabled
highContrast: true,
});
</script>
</body>