Para añadir un botón de Telegram a una web HTML, crea un enlace normal:
<a href="https://t.me/your_support_bot">Escríbenos en Telegram</a>Sustituye el username. Para soporte empresarial, un bot es mejor que la cuenta personal de un empleado.
Enlace y botón con CSS
Un elemento <a> funciona sin JavaScript y mantiene el comportamiento correcto del navegador. Evita enlaces falsos con javascript:void(0).
<a class="telegram-contact" href="https://t.me/your_support_bot">
Escribir en 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;
}Los 44 píxeles facilitan el toque en móvil. Conserva un foco visible para teclado.
Botón flotante
Coloca el enlace cerca del final de <body> y añade:
.telegram-contact--floating {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 50;
box-shadow: 0 10px 30px rgba(0,0,0,.16);
}Comprueba que no tape cookies, navegación móvil, carrito o botones de compra.
Deep link y fuente
Telegram admite oficialmente el parámetro start para bots:
https://t.me/your_support_bot?start=pricing_pageEl bot recibe /start pricing_page. Usa valores como product_page o delivery_help, pero nunca datos personales en la URL.
Qué destino elegir
| Destino | Uso | Límite |
|---|---|---|
| Perfil personal | Contacto individual | No se comparte bien con el equipo |
| Canal | Noticias | No es soporte privado |
| Grupo público | Comunidad | Otros pueden ver la consulta |
| Bot empresarial | Soporte y enrutamiento | Requiere configurar respuestas |
Dónde colocarlo
Usa botones contextuales junto a precios, disponibilidad, entregas o servicios. “Preguntar por disponibilidad” explica mejor la acción que un icono aislado. En un sitio con footer compartido, coloca allí el botón global.
Generador de GramDesk
El Generador de botones de Telegram crea código con texto, icono, colores, posición y versión móvil. Pega el Universal Script antes de </body> o en la plantilla del footer.
Para atención en equipo, conecta el bot con GramDesk: el cliente escribe en privado y los compañeros responden desde un grupo compartido.
Comprobación final
Prueba la página publicada en móvil y escritorio, el foco de teclado y el bot correcto. Envía un mensaje real, responde desde el equipo y confirma que el cliente lo recibe.
Preguntas frecuentes
¿Necesito JavaScript?
No. Un enlace https://t.me/... es suficiente.
¿Cómo mido el origen?
Usa el parámetro start y un evento de clic en tu analítica.