Advanced Settings – Hand Talk

It is currently possible to make some additional configurations directly in the script installed on the page. Below we list our parameters, public functions, and events that can be customized to fit the page structure.

Keep in mind that this topic requires prior programming knowledge to understand the script customization. Therefore, we recommend consulting this article together with a programmer.

Parameters

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

Settings	Description	Values	Default
textEnabled	When true: displays the website translator for texts.	false or true	true
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"
align	Defines the vertical alignment of the translator window on the site.	"default" or "top" or "bottom"	"default"
zIndex	Defines the depth positioning of the translator on the site, that is, whether the Website Translator will be closer to or farther from the screen.	Integers	1000000
maxTextSize	Defines the maximum character size for text capture in an element.	Integer between 500 and 1000	800
doNotTrack	If this property's value 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	[ ]
clickables	List of queries that will be treated as clickable elements by the plugin, e.g.: ["a", "form", ".main", "#site-title"]	array	[ ]
mobileEnabled	When true, enables the website translator on mobile devices.	false or true	true
mobileConfig	Configuration object for the mobile platform; when defined, overrides the default HT settings.	Object	{ }
parentElement	Element that will receive the Hand Talk plugin.	Element	document.body
avatar	Defines the avatar that the plugin will use.	"HUGO" or "MAYA"	"HUGO"
opacity	Defines the initial background opacity in the plugin.	Number: 0 or 50 or 100	100
highContrast	Defines whether the plugin will start with dark mode enabled.	false or true	false
colorButton	Defines the color of the Hand Talk Plugin button.	"a11yColorMain" or "neutralLowMain" or "a11yColorLight"	"a11yColorMain"
language	Changes the plugin's language.	"en-ase" or "ptBR-bzs"	"ptBR-bzs"
addonsMap	Configuration object to manage the use of assistive features individually	Object	{ fontControl {}, navigation {}, colorControl {}}

Example of using parameters in HTML:

<!-- Fetches 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",
      // Changes the avatar to HUGO
      avatar: "HUGO",
      // Changes the alignment to top
      align: "top",
      // Changes the side to right
      side: "right",
      // Changes the plugin button color to a11yColorLight
      colorButton: "a11yColorLight",
      // Changes the initial opacity of the plugin
      opacity: 50,
      // Starts the plugin with dark mode enabled
      highContrast: true,
      // Starts the plugin in ASL
      language: "en-ase"
    });
</script>

Public Functions

These are functions that allow access to information regarding the Plugin or interaction with the Website Translator.

Public Function	Description
config	Returns the plugin configuration object.
version	Returns the plugin version as a string.
removeListenersFromIframe	Removes the listener from a specific iframe passed as a parameter.
addListenersToIframe	Adds the listener to a specific iframe passed as a parameter.
removeListenersFromIframes	Removes listeners from all iframes present on the page.
addListenersToIframes	Adds listeners to all iframes present on the page.
destroy	Removes the plugin from the page.
openWebsiteTranslator	Opens the Website Translator.

Example of public functions in HTML:

<script src="https://plugin.handtalk.me/web/latest/handtalk.min.js">
</script>
<script>
    var ht = new HT({
      // Replace with your access token
      token: "TOKEN"
    )};
    // View configuration
    ht.config();
    // View plugin version
    ht.version();
    // Remove listener from a specific iframe
    ht.removeListenersFromIframe(<HTMLIFrameElement/>);
    // Add listener to a specific iframe
    ht.addListenersToIframe(<HTMLIFrameElement/>);
    // Remove listeners from all iframes on the webpage
    ht.removeListenersFromIframes();
    // Add listeners to all iframes on the webpage
    ht.addListenersToIframes();
    // Remove the plugin from the page
    ht.destroy();
    // Open the Website Translator
    ht.openWebsiteTranslator();
</script>

Events

Sometimes you may need usage data from the tool, such as the number of openings, translations, knowing if the tool has loaded, among others. To do this, you should listen to the events fired by HT. The events fired by HT are:

Event	Description	Return
coreReady	Avatar loaded	true
activated	Text translator was activated	undefined
deactivated	Text translator was deactivated	undefined
signalized	Fires when the text is fully signaled	undefined
errorOnAuth	Authentication error	string: message related to the occurred error
errorOnTranslate	Error translating text on Hand Talk's server	undefined
notCompatible	Browser or hardware not compatible	string: 'withoutCanvas' or 'withoutWebGL'

Example of using Events in HTML:

<!-- Fetches 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: '<YOUR TOKEN>'
      });
      // Listen to the signalized event
      ht.on('signalized', function () {
        console.log('New phrase translated!');
      });
</script>

If you want to learn more about additional configurations that can be made so the plugin fits perfectly into your page structure, you can access our documentation at the link: https://docs.handtalk.me/