Pular para o conteúdo principal
Versão: v5.0.0

Customizando o botão de acessibilidade na versão mobile

Fotografias do site indicação de variação da altura do posicionamento do botão do plugin.

Você pode utilizar o parâmetro customButtonStyle para aplicar uma customização no botão de acessibilidade na versão mobile.

Nota

Quando o parâmetro customButtonStyle estiver definido, as animações do botão de acessibilidade serão desativadas.

Ao invocar HT, no parâmetro mobileConfig, defina também o objeto customButtonStyle. Consulte os exemplos abaixo.

O objeto customButtonStyle suporta os parâmetros:

ConfiguraçõesDescriçãoValoresPadrão
sizeTamanho do botão, o valor será aplicado na largura e na altura.stringundefined
borderRadiusNível de arredondamento do botão.stringundefined
horizontalMarginMargem entre o posicionamento definido no parâmetro side e as laterais da tela.stringundefined
bottomMarginMargem entre o botão e a borda inferior da tela.stringundefined
Nota

Para todos os casos, especifique a unidade de medida com os sufixos em, %, px, vh, vw.

Você pode definir apenas o parâmetro que deseja aplicar. Com o exemplo abaixo, apenas a borda arredondada será aplicada ao botão. Os demais parâmetros ficarão com os valores padrões da Hand Talk.

Exemplo de customização do botão de acessibilidade mobile​

Javascript​

var ht = new HT({
  // Troque por seu token de acesso
  token: 'SEU TOKEN',
  // Define uma configuração especifica para a versão mobile
  mobileConfig: {
    // Aplica uma customizacão no botão de acessibilidade
    customButtonStyle: {
      borderRadius: '6px',
      bottomMargin: '60px',
      horizontalMargin: '4.4vw',
      size: '40px'
    }
  }
});

HTML​

<body>
  <!-- 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",
    mobileConfig: {
      // Aplica uma customizacão no botão de acessibilidade
      customButtonStyle: {
        borderRadius: '6px',
        bottomMargin: '60px',
        horizontalMargin: '4.4vw',
        size: '40px'
      }
    }
  });
  </script>
</body>

Exemplo de parâmetro de customização do botão de acessibilidade​

Javascript​

var ht = new HT({
  // Troque por seu token de acesso
  token: 'SEU TOKEN',
  // Define uma configuração especifica para a versão mobile
  mobileConfig: {
    // Aplica uma customizacão no botão de acessibilidade
    customButtonStyle: {
      borderRadius: '6px'
    }
  }
});

HTML​

<body>
  <!-- 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",
    mobileConfig: {
      // Aplica uma customizacão no botão de acessibilidade
      customButtonStyle: {
        borderRadius: '6px'
      }
    }
  });
  </script>
</body>