Configurações Avançadas – Hand Talk

Atualmente é possível realizar algumas configurações adicionais diretamente no próprio script que é instalado na página, abaixo listamos nossos parâmetros, funções públicas e eventos que podem ser personalizados para adequar com a estrutura da página.

Vale lembrar que esse tópico necessita um conhecimento de programação prévio para entender a personalização do script, dessa forma aconselhamos que esse artigo seja consultado juntamente com um programador.

Parâmetros

Você pode preferir habilitar/desabilitar algumas funcionalidades do Tradutor de Sites, para isso utilize os parâmetros abaixo:

Configurações	Descrição	Valores	Padrão
textEnabled	Quando verdadeiro: exibe o tradutor de sites para textos.	false ou true	true
side	Define o posicionamento da janela do tradutor no site. O Tradutor de Sites pode ser inicializado do lado esquerdo ou do lado direito da tela.	"right" ou "left"	"right"
align	Define o alinhamento vertical da janela do tradutor no site.	"default" ou "top" ou "bottom"	"default"
zIndex	Define o posicionamento da profundidade do tradutor no site, ou seja, determinar se o Tradutor de Sites estará mais próximo ou mais afastado da tela.	Inteiros	1000000
maxTextSize	Define o tamanho máximo de caracteres para captura de texto em um elemento.	Número inteiro entre 500 e 1000	800
doNotTrack	Se o valor desta propriedade for verdadeiro, as frases traduzidas não serão armazenadas ou utilizada para a melhoria do sistema de tradução.	false ou true	false
exceptions	Lista de queries que serão ignoradas pelo plugin, ex.: ["a", "form", ".main", "#site-title"]	array	[ ]
clickables	Lista de queries que serão tratadas como elementos clicaveis, pelo plugin, ex.: ["a", "form", ".main", "#site-title"]	array	[ ]
mobileEnabled	Quando verdadeiro ativa o tradutor de sites em dispositivos móveis.	false ou true	true
mobileConfig	Objeto de configuração para a plataforma mobile, quando definido, sobscreve as configurações padrões de HT.	Object	{ }
parentElement	Elemento que receberá o plugin Hand Talk.	Element	document.body
avatar	Define o avatar que o plugin irá utilizar.	"HUGO" ou "MAYA"	"HUGO"
opacity	Define a opacidade inicial do fundo no plugin.	Número: 0 ou 50 ou 100	100
highContrast	Define se o plugin vai iniciar com o modo escuro ativado.	false ou true	false
colorButton	Define a cor do botão do Hand Talk Plugin.	"a11yColorMain" or "neutralLowMain" or "a11yColorLight"	"a11yColorMain"
language	Altera a língua do plugin.	"en-ase" ou "ptBR-bzs"	"ptBR-bzs"
addonsMap	Objeto de configuração para gerenciar uso de recursos assistivos individualmente	Object	{ fontControl {}, navigation {}, colorControl {}}

Exemplo de uso de parâmetros no HTML:

<!-- Pega a ultima versão do plugin Hand Talk -->
<script src="https://plugin.handtalk.me/web/latest/handtalk.min.js">
</script>
<script>
    var ht = new HT({
      // Troque por seu token de acesso
      token: "TOKEN",
      // Muda o avatar para o HUGO
      avatar: "HUGO",
      // Muda o alinhamento para cima
      align: "top",
      // Muda o lado para a direita
      side: "right",
      // Muda o botão do plugin para a cor a11yColorLight
      colorButton: "a11yColorLight",
      // Muda a opacidade inicial do plugin
      opacity: 50,
      // Inicia o plugin com o modo escuro ativado
      highContrast: true,
      //Inicia o plugin em ASL
      language: "en-ase"
    });
</script>

Funções públicas

São funções que permitem o acesso à informações referente ao Plugin ou interação com o Tradutor de sites.

Função pública	Descrição
config	Retorna a configuração do plugin objeto.
version	Retorna a versão do plugin em string.
removeListenersFromIframe	Remove o listener de um iframe específico passado via parâmetro.
addListenersToIframe	Adiciona o listerner em um iframe específico passado via parâmetro.
removeListenersFromIframes	Remove listeners de todos os iframes presentes na página.
addListenersToIframes	Adiciona listerners de todos os iframes presentes na página.
destroy	Remove o plugin da página.
openWebsiteTranslator	Abre Tradutor de sites.

Exemplo de funções públicas no HTML:

<script src="https://plugin.handtalk.me/web/latest/handtalk.min.js">
</script>
<script>
    var ht = new HT({
      // Troque por seu token de acesso
      token: "TOKEN"
    )};
    // Visualiza configurações
    ht.config();
    // Visualiza versão do plugin
    ht.version();
    // Remove listerner em um iframe específico
    ht.removeListenersFromIframe(<HTMLIFrameElement/>);
    // Adiciona listerner em um iframe específico
    ht.addListenersToIframe(<HTMLIFrameElement/>);
    // Remove listerners de todos os iframes na página web
    ht.removeListenersFromIframes();
    // Adiciona listerners de todos os iframes na página web
    ht.addListenersToIframes();
    // Remove o plugin da página
    ht.destroy();
    // Abre Tradutor de sites
    ht.openWebsiteTranslator();
</script>

Eventos

Em alguns momentos você pode necessitar de dados de uso da ferramenta, como quantidade de aberturas, traduções, saber se a ferramenta carregou, entre outros. Para isso, você deve ouvir os eventos disparados por HT, os eventos disparados por HT são:

Evento	Descrição	Retorno
coreReady	Avatar carregado	true
activated	Tradutor de texto foi ativada	undefined
deactivated	Tradutor de texto foi desativada	undefined
signalized	Dispara quando o texto é sinalizado por completo	undefined
errorOnAuth	Erro ao autenticar	string: mensagem referente ao erro ocorrido
errorOnTranslate	Erro ao traduzir texto no servidor da Hand Talk	undefined
notCompatible	Navegador ou hardware não compatível	string: 'withoutCanvas' ou 'withoutWebGL'

Exemplo do uso de Eventos no HTML:

<!-- Pega a ultima versão do plugin Hand Talk -->
<script src="https://plugin.handtalk.me/web/latest/handtalk.min.js"></script>
<script>
      var ht = new HT({
        // Troque por seu token de acesso
        token: '<SEU TOKEN>'
      });
      // Escuta o evento signalized
      ht.on('signalized', function () {
        console.log('Nova frase traduzida!');
      });
</script>

Caso queira saber mais sobre configurações adicionais que podem estar sendo realizadas para que o plugin encaixe perfeitamente na estrutura da sua página, você pode estar acessando a nossa documentação pelo link: https://docs.handtalk.me/