Botão em um site
Use este gerador. Ele cria HTML ou JavaScript para um botão flutuante ou inline que abre usuário, bot, canal ou grupo do Telegram.
Ferramenta de Telegram para sites
Gerador de botão do Telegram para sites
Configure um botão do Telegram, veja o preview e copie o código pronto para colar.
Defina link, estilo, ícone, posição e formato de código. O ícone usa SVG inline, sem arquivos externos ou CDN.
Use um bot, canal ou usuário do Telegram. Exemplos: @GramDeskBot, usuario, t.me/usuario.
Desktop
Textos rápidos
Mobile
Posição
Desktop
Distância desktop
Mobile
Distância mobile
Preview da posição
Código de instalação
Instale na maioria dos sites em menos de 2 minutos. Cole antes do fechamento de </body> ou use Footer / Custom Code na sua plataforma.<script>
(function() {
if (window.__gramdesk_tg_button_loaded || document.getElementById('gram_desk_bot_tg_generator_root')) return;
window.__gramdesk_tg_button_loaded = true;
var style = document.createElement('style');
style.innerHTML = `.gram_desk_bot_tg_generator_button{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 18px;border-radius:12px;background:#ecad1f;color:#111111;font:15px/1.1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-decoration:none;border:0;box-sizing:border-box;white-space:nowrap;}
.gram_desk_bot_tg_generator_button:hover{filter:brightness(.97);}
.gram_desk_bot_tg_generator_icon{width:20px;height:20px;color:#111111;flex:0 0 auto;}
.gram_desk_bot_tg_generator_label{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.gram_desk_bot_tg_generator_label_mobile{display:none;}
.gram_desk_bot_tg_generator_shadow{box-shadow:0 12px 26px rgba(17,24,39,.18);}
.gram_desk_bot_tg_generator_button{position:fixed;z-index:9999;bottom:24px;right:24px;}
@media (max-width: 640px){.gram_desk_bot_tg_generator_button{bottom:16px;right:16px;}}
@media (max-width: 640px){.gram_desk_bot_tg_generator_button{width:46px;padding:0;border-radius:12px;}.gram_desk_bot_tg_generator_label_desktop{display:none;}.gram_desk_bot_tg_generator_label_mobile{display:none;}}`;
document.head.appendChild(style);
var root = document.createElement('div');
root.id = 'gram_desk_bot_tg_generator_root';
var a = document.createElement('a');
a.href = 'https://t.me/GramDeskBot';
a.target = '_blank';
a.rel = 'noopener noreferrer';
a.className = 'gram_desk_bot_tg_generator_button gram_desk_bot_tg_generator_shadow';
a.setAttribute('aria-label', 'Falar com suporte');
a.innerHTML = `<svg class="gram_desk_bot_tg_generator_icon" viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M23.11 4.49c.32-1.55-1.2-2.83-2.68-2.26L2.34 9.22c-1.65.64-1.72 2.94-.12 3.68l3.94 1.82 1.88 6.55a1 1 0 0 0 1.67.44l2.88-2.89 4.05 3.03c1.17.88 2.86.24 3.16-1.2l3.31-16.16ZM3.06 11.08l18.09-6.99-3.31 16.16-4.74-3.55a1 1 0 0 0-1.31.09l-1.23 1.24.37-2.04 7.28-7.28a1 1 0 0 0-1.2-1.58L6.95 12.88l-3.89-1.8Zm5.12 3.4.6 2.12.24-1.28a1 1 0 0 1 .27-.53l2.22-2.22-3.33 1.91Z"/></svg>
<span class="gram_desk_bot_tg_generator_label gram_desk_bot_tg_generator_label_desktop">Falar com suporte</span>`;
root.appendChild(a);
document.body.appendChild(root);
})();
</script>Como instalar o botão
Copie o Universal Script e cole antes do fechamento de body ou na área de custom code da sua plataforma.
Tilda
- Melhor opção para todo o site: abra Site Settings -> More -> HTML Code for Head/Body.
- Cole o Universal Script em Before </body>.
- Salve e publique todas as páginas.
- Confira a home, páginas de produto e mobile.
- Se você não tiver acesso a site-level code, adicione um bloco T123 - Embed HTML e cole o Universal Script ali. Isso funciona apenas naquela página.
WordPress.org
- Instale e ative o WPCode.
- Abra Code Snippets → Header & Footer.
- Cole o Universal Script completo em Footer e salve.
- Limpe o cache e teste o site publicado no computador e no celular.
WordPress.com
- JavaScript exige um plano com plugins e recursos de hospedagem ativados.
- Instale WPCode e cole Universal Script em Code Snippets → Header & Footer → Footer.
- Se scripts não estiverem disponíveis, use um bloco Botão com seu link do Telegram.
- Teste a página publicada sem entrar no painel.
Webflow
- Abra Project Settings -> Custom Code.
- Cole o Universal Script em Footer Code.
- Publique o site.
- Confira a home e a versão mobile.
Shopify
- Abra Online Store -> Themes -> Edit code.
- Abra layout/theme.liquid.
- Encontre </body>.
- Cole o Universal Script logo antes de </body>.
- Salve. O botão aparecerá em toda a loja.
- Confira home, produtos, carrinho e mobile.
WooCommerce
- WooCommerce usa WordPress, então use WPCode ou Header Footer Code Manager.
- Cole o Universal Script em Footer e aplique em todo o site.
- Sem plugin, cole o script antes de </body> em footer.php, de preferência com child theme.
- Confira product, cart, checkout, desktop e mobile.
Wix
- Abra Settings -> Advanced -> Custom Code.
- Clique em Add Custom Code.
- Cole o Universal Script.
- Em Placement, escolha Body - end.
- Em Apply, escolha All Pages e salve.
- Publique e confira desktop e mobile.
HTML website
- Abra index.html ou o arquivo footer/template compartilhado.
- Encontre </body>.
- Cole o Universal Script logo antes de </body>.
- Salve e abra o site no navegador.
- Verifique se o botão aparece e funciona em desktop e mobile.
Transforme o botão em um fluxo de suporte
Use o gerador como ponto de entrada e escolha o guia que combina com seu site e com a forma como sua equipe atende mensagens.
Precisa de suporte em equipe no Telegram?
Se você precisa de mais que um botão, conecte o GramDesk para rotear mensagens para um grupo privado do Telegram com tópicos separados.
FAQ
O botão do Telegram vai deixar meu site mais lento?
Não. O script de instalação gerado é leve e independente. Ele não carrega software pesado de live chat, bibliotecas externas de ícones ou frameworks de widgets de terceiros. O ícone do Telegram é incorporado diretamente como SVG inline, então não há requisições externas para ícones. Para a maioria dos sites, esse tipo de botão é bem mais leve que widgets tradicionais de live chat.
Preciso da Telegram API ou do BotFather para usar este botão?
Não. Se você só quer adicionar um botão de contato do Telegram ao site, não precisa de acesso à Telegram API nem ao BotFather. O botão pode apontar para um username pessoal, um bot do Telegram, um canal de suporte ou outro destino no Telegram. O BotFather só é necessário se você quiser criar e gerenciar seu próprio bot personalizado.
Posso instalar o botão do Telegram sem desenvolvedor?
Sim. O gerador foi feito para usuários não técnicos e também para desenvolvedores. Na maioria dos casos, basta copiar o Universal Script gerado e colar no Footer, na seção Custom Code da plataforma ou antes do fechamento de </body>. Plataformas como Tilda, WordPress, Shopify, Webflow e Wix normalmente permitem isso sem criar uma integração personalizada.
Posso adicionar o botão a todas as páginas do site?
Sim. Se você colocar o Universal Script em um Footer global ou em uma área de Custom Code para todo o site, o botão pode aparecer automaticamente em todas as páginas. Essa é a configuração recomendada para um botão flutuante de suporte, porque você instala uma vez e não precisa repetir página por página.
Qual é a diferença entre botão flutuante e botão inline?
Um botão flutuante fica fixo na tela enquanto o visitante rola a página, por isso permanece visível e fácil de acessar em quase qualquer parte do site. Um botão inline é colocado diretamente no conteúdo, como uma seção hero, um bloco de contato ou uma página de produto, funcionando como um CTA tradicional.
Posso alterar texto, cores e formato do botão?
Sim. O gerador permite personalizar o texto do botão, a cor de fundo, a cor do texto, a cor do ícone do Telegram, o raio da borda, o tamanho e a sombra. Assim fica mais fácil combinar o botão com o design do site em vez de usar um embed genérico.
Posso usar um bot, canal ou username pessoal do Telegram?
Sim. O gerador aceita formatos comuns de link do Telegram, incluindo @username, username, t.me/username e https://t.me/username. O destino pode ser um bot do Telegram, um canal de suporte ou uma conta pessoal, dependendo de como você quer receber contatos.
O código usa ícones ou arquivos externos?
Não. O código gerado inclui o ícone do Telegram diretamente como SVG inline dentro do script de instalação. Ele não depende de bibliotecas de ícones, packs de fontes, URLs de imagem ou assets em CDN. Isso torna o botão mais portátil e reduz o risco de ícones quebrados no site publicado.
Posso usar este botão do Telegram no lugar de live chat?
Para muitos sites pequenos e pequenos negócios, sim. Se o objetivo principal é permitir que visitantes façam perguntas ou iniciem uma conversa, um botão do Telegram pode ser uma alternativa mais simples que um widget completo de live chat. Um live chat tradicional pode fazer sentido para equipes maiores ou fluxos avançados, mas em muitos casos o Telegram é mais rápido de instalar e manter.
Este gerador cria botões dentro das mensagens do Telegram?
Não. Esta ferramenta cria um botão para o site que abre o Telegram. Para botões na mensagem inicial depois de Start, use o gerador de menu inicial. Botões em outras mensagens exigem um teclado inline enviado pelo bot pela Telegram Bot API.
E se eu precisar de suporte em equipe dentro do Telegram, não apenas um botão?
Um botão do Telegram é apenas a entrada para a conversa. Se você precisa rotear mensagens recebidas para um grupo privado do Telegram, separar conversas por tópicos e permitir que vários membros respondam, precisa de mais do que um link. Nesse caso, você pode conectar o GramDesk e usar o Telegram como um sistema leve de suporte em equipe.