Version: v12.0.0

Parameters

The Parameters allow you to configure and personalize the functionality of the Hand Talk plugin. You can enable or disable features as needed, adjusting elements such as position, alignment, language, and Accessibility Features.

Website Translator

You may prefer to enable or disable some features of the Website Translator. To do this, use the parameters below:

caution

The textEnabled parameter will be deprecated. If you want to disable the sign language translator, use the signTranslator parameter.

Settings	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	´´
customButtonStyle	Defines customization for the accessibility button in the mobile version within the `mobileConfig` parameter.	`{borderRadius, size, horizontalMargin, bottomMargin}`	undefined
mobileEnabled	When true, activates the website translator on mobile devices.	false or true	true
remoteConfigEnabled	When true activates the Plugin's Remote Settings.	false or true	true
addonsEnabled	When true activates the Plugin's Assistive Features.	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	[ ]
language	Changes the language of the plugin.	"en-ase" or "ptBR-bzs"	"ptBR-bzs"
colorButton	Defines the color of the Hand Talk plugin button.	"a11yColorMain" or "neutralLowMain" or "a11yColorLight"	"a11yColorMain"
offRedirection	When true, it disables the redirection of external links, which is useful in the context of self-service machines.	false ou true	false
addonsMap	Configuration object for managing the use of Accessibility Features individually.	Object	`{ aiAssistant{}, fontControl {}, navigation {}, colorControl {}}`

tip

For more information about customButtonStyle and mobile customization, visit the link Accessibility Button on Mobile

Example of Using Parameters in Website Translator

<body>
  <h1>Hand Talk</h1>
  <h2>
    Count on the help of Hugo and Maya, our virtual translators, to make
    your communication more accessible.
  </h2>
  <p>
    We offer digital translation for accessibility in Libras, the Brazilian
    Sign Language.
  </p>
  <!-- Fetch 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({
      // Replace with your access token
      token: "TOKEN",
      // Change the avatar to HUGO
      avatar: "HUGO",
      // Change the alignment to top
      align: "top",
      // Change the side to right
      side: "right",
      // Change the plugin button color to a11yColorLight
      colorButton: "a11yColorLight",
      // Change the initial opacity of the plugin
      opacity: 50,
      // Start the plugin with dark mode activated
      highContrast: true,
      // Start the plugin in ASL
      language: "en-ase",
    });
  </script>
</body>

Accessibility Features

You can add specific parameters to manage the availability of Accessibility Features. To do this, use the addonsMap property and add the parameters that will override the default settings.

Settings	Description	Values
addonsMap	Configuration object to manage the use of Accessibility Features individually	`{ aiAssistant{}, fontControl {}, navigation {}, colorControl {}}`

Resource management occurs through the object of each section. You can disable one or more resources depending on the chosen section. Below is a table with the objects for the available sections:

| Settings | Description | Values | | aiAssistant | Configuration object to manage the use of Accessibility Features related to artificial intelligence | { signTranslator, synonymsMeanings } | | fontControl | Configuration object to manage the use of Accessibility Features related to font control | { fontSize, textStyle, highlightLetters, letterSpacing, lineHeight } | | navigation | Configuration object to manage the use of Accessibility Features related to navigation | { pageSpeech, readerMode, readingMask, magnifier, pageStructure, hideImages, highlightHeadings, highlightLinks, readingGuide, pauseAnimations } | | colorControl | Configuration object to manage the use of Accessibility Features related to color control | { contrastMode, saturationMode } |

Within the object of the chosen section, you can add one or more resources if you wish to disable them. To do this, define the specific resource according to your section.

tip

By default, all parameters for Accessibility Features are set to true.

📌 aiAssistant

Object responsible for grouping Accessibility Features related to artificial intelligence.

Settings	Description	Values
signTranslator	Manages the state of the sign language translator	`true` or `false`
synonymsMeanings	Manages the state of the synonyms and meanings feature	`true` or `false`

📌 fontControl

Object responsible for grouping Accessibility Features related to text control

Settings	Description	Values
fontSize	Manages the state of the font size resource	`true` or `false`
textStyle	Manages the state of the text style resource	`true` or `false`
highlightLetters	Manages the state of the highlighted letters resource	`true` or `false`
letterSpacing	Manages the state of the letter spacing resource	`true` or `false`
lineHeight	Manages the state of the line height resource	`true` or `false`

Object responsible for grouping Accessibility Features related to navigation

Settings	Description	Values
pageSpeech	Manages the state of the site reader resource	`true` or `false`
readerMode	Manages the state of the reading mode resource	`true` or `false`
readingMask	Manages the state of the reading mask resource	`true` or `false`
magnifier	Manages the state of the content magnifier resource	`true` or `false`
pageStructure	Manages the state of the page structure resource	`true` or `false`
hideImages	Manages the state of the hide images resource	`true` or `false`
highlightHeadings	Manages the state of the highlight headings resource	`true` or `false`
highlightLinks	Manages the state of the highlight links resource	`true` or `false`
readingGuide	Manages the state of the reading guide resource	`true` or `false`
pauseAnimations	Manages the state of the pause animations resource	`true` or `false`
disableSounds	Manages the state of the stop sounds resource	`true` or `false`

📌 colorControl

Object responsible for grouping Accessibility Features related to color control

Settings	Description	Values
contrastMode	Manages the state of the color contrast resource	`true` or `false`
saturationMode	Manages the state of the saturation resource	`true` or `false`
pageColors	Manages the state of the colorblind mode resource	`true` or `false`

Example of using parameters in Accessibility Features

<body>
  <h1>Hand Talk</h1>
  <h2>
    Count on the help of Hugo and Maya, our virtual translators, to make your communication more accessible.
  </h2>
  <p>
    We offer digital translation for accessibility in Libras, Brazilian Sign Language.
  </p>
  <!-- Get 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({
      // Replace with your access token
      token: "TOKEN",
      // Configuration object to group Accessibility Features
      addonsMap: {
        // Disables AI assistant section resources individually
        aiAssistant: {
          signTranslator: false,
          synonymsMeanings: false,
        },
        // Disables font control section resources individually
        fontControl: {
          fontSize: false,
          textStyle: false,
          highlightLetters: false,
          letterSpacing: false,
          lineHeight: false,
        },
        // Disables navigation section resources individually
        navigation: {
          pageSpeech: false,
          readerMode: false,
          readingMask: false,
          magnifier: false,
          pageStructure: false,
          hideImages: false,
          highlightHeadings: false,
          highlightLinks: false,
          readingGuide: false,
          pauseAnimations: false,
        },
        // Disables color control section resources individually
        colorControl: {
          contrastMode: false,
          saturationMode: false,
          pageColors: false,
        },
      },
    });
  </script>
</body>

Website Translator​

Example of Using Parameters in Website Translator​

Accessibility Features​

📌 aiAssistant​

📌 fontControl​

📌 navigation​

📌 colorControl​

Example of using parameters in Accessibility Features​