Para adicionar um botão do Telegram a um site HTML, crie um link normal:
<a href="https://t.me/your_support_bot">Fale conosco no Telegram</a>Substitua o username. Para suporte empresarial, um bot é melhor que a conta pessoal de um funcionário.
Link e botão com CSS
Um elemento <a> funciona sem JavaScript e mantém o comportamento correto do navegador. Evite links falsos com javascript:void(0).
<a class="telegram-contact" href="https://t.me/your_support_bot">
Falar no Telegram
</a>.telegram-contact {
display: inline-flex;
min-height: 44px;
align-items: center;
padding: 0 18px;
border-radius: 12px;
background: #ffc400;
color: #0f0f0f;
font: 700 15px/1.2 system-ui, sans-serif;
text-decoration: none;
}
.telegram-contact:focus-visible {
outline: 3px solid #0f0f0f;
outline-offset: 3px;
}Os 44 pixels facilitam o toque no celular. Mantenha o foco visível para teclado.
Botão flutuante
Coloque o link perto do final de <body> e adicione:
.telegram-contact--floating {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 50;
box-shadow: 0 10px 30px rgba(0,0,0,.16);
}Verifique se ele não cobre cookies, navegação móvel, carrinho ou botões de compra.
Deep link e origem
O Telegram suporta oficialmente o parâmetro start para bots:
https://t.me/your_support_bot?start=pricing_pageO bot recebe /start pricing_page. Use valores como product_page ou delivery_help, sem dados pessoais na URL.
Qual destino escolher
| Destino | Uso | Limite |
|---|---|---|
| Perfil pessoal | Contato individual | Difícil compartilhar com a equipe |
| Canal | Notícias | Não é suporte privado |
| Grupo público | Comunidade | Outros podem ver a pergunta |
| Bot empresarial | Suporte e roteamento | Exige configurar respostas |
Onde colocar
Use botões contextuais perto de preços, disponibilidade, entrega ou serviços. “Perguntar sobre disponibilidade” explica melhor a ação que um ícone isolado. Em um site com footer compartilhado, coloque ali o botão global.
Gerador do GramDesk
O Gerador de botão do Telegram cria código com texto, ícone, cores, posição e versão móvel. Cole o Universal Script antes de </body> ou no template do footer.
Para atendimento em equipe, conecte o bot ao GramDesk: o cliente escreve em privado e os colegas respondem de um grupo compartilhado.
Verificação final
Teste a página publicada no celular e desktop, o foco do teclado e o bot correto. Envie uma mensagem real, responda pela equipe e confirme que o cliente recebeu.
Perguntas frequentes
Preciso de JavaScript?
Não. Um link https://t.me/... é suficiente.
Como medir a origem?
Use o parâmetro start e um evento de clique na sua ferramenta de analytics.