Botón en un sitio web
Usa este generador. Crea HTML o JavaScript para un botón flotante o integrado que abre un usuario, bot, canal o grupo de Telegram.
Herramienta de Telegram para sitios web
Generador de botón de Telegram para sitios web
Configura un botón de Telegram, revisa el preview y copia el código listo para pegar.
Define enlace, estilo, icono, posición y formato de código. El icono usa SVG inline, sin archivos externos ni CDN.
Usa un bot, canal o usuario de Telegram. Ejemplos: @GramDeskBot, usuario, t.me/usuario.
Desktop
Textos rápidos
Mobile
Posición
Desktop
Distancia desktop
Mobile
Distancia mobile
Preview de posición
Código de instalación
Instálalo en la mayoría de sitios en menos de 2 minutos. Pégalo antes del cierre de </body> o usa Footer / Custom Code en tu 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', 'Contactar soporte');
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">Contactar soporte</span>`;
root.appendChild(a);
document.body.appendChild(root);
})();
</script>Cómo instalar el botón
Copia el Universal Script y pégalo antes del cierre de body o en el área de custom code de tu plataforma.
Tilda
- Mejor opción para todo el sitio: abre Site Settings -> More -> HTML Code for Head/Body.
- Pega el Universal Script en Before </body>.
- Guarda y publica todas las páginas.
- Revisa la home, páginas de producto y mobile.
- Si no tienes acceso a site-level code, añade un bloque T123 - Embed HTML y pega el Universal Script allí. Esto funciona solo en esa página.
WordPress.org
- Instala y activa WPCode.
- Abre Code Snippets → Header & Footer.
- Pega el Universal Script completo en Footer y guarda.
- Vacía la caché y prueba el sitio publicado en escritorio y móvil.
WordPress.com
- JavaScript requiere un plan con plugins y funciones de alojamiento activadas.
- Instala WPCode y pega Universal Script en Code Snippets → Header & Footer → Footer.
- Si no puedes usar scripts, añade un bloque Botón con tu enlace de Telegram.
- Prueba la página publicada sin iniciar sesión.
Webflow
- Abre Project Settings -> Custom Code.
- Pega el Universal Script en Footer Code.
- Publica el sitio.
- Revisa la home y la versión mobile.
Shopify
- Abre Online Store -> Themes -> Edit code.
- Abre layout/theme.liquid.
- Busca </body>.
- Pega el Universal Script justo antes de </body>.
- Guarda. El botón aparecerá en toda la tienda.
- Revisa home, productos, carrito y mobile.
WooCommerce
- WooCommerce usa WordPress, así que utiliza WPCode o Header Footer Code Manager.
- Pega el Universal Script en Footer y aplícalo a todo el sitio.
- Sin plugin, pega el script antes de </body> en footer.php, preferiblemente con child theme.
- Revisa product, cart, checkout, desktop y mobile.
Wix
- Abre Settings -> Advanced -> Custom Code.
- Haz clic en Add Custom Code.
- Pega el Universal Script.
- En Placement elige Body - end.
- En Apply elige All Pages y guarda.
- Publica y revisa desktop y mobile.
HTML website
- Abre index.html o el archivo footer/template compartido.
- Busca </body>.
- Pega el Universal Script justo antes de </body>.
- Guarda y abre el sitio en el navegador.
- Comprueba que el botón se ve y funciona en desktop y mobile.
Convierte el botón en un flujo de soporte
Usa el generador como punto de entrada y elige la guía que corresponde a tu sitio y a la forma en que tu equipo atiende mensajes.
¿Necesitas soporte en equipo dentro de Telegram?
Si necesitas más que un botón, conecta GramDesk para enrutar mensajes a un grupo privado de Telegram con topics separados.
FAQ
¿El botón de Telegram ralentizará mi sitio web?
No. El script de instalación generado es ligero y autónomo. No carga software pesado de live chat, bibliotecas externas de iconos ni frameworks de widgets de terceros. El icono de Telegram se integra directamente como SVG inline, por lo que no hay solicitudes externas para el icono. Para la mayoría de sitios, este tipo de botón es mucho más ligero que los widgets tradicionales de live chat.
¿Necesito Telegram API o BotFather para usar este botón?
No. Si solo quieres añadir un botón de contacto de Telegram a tu sitio web, no necesitas acceso a Telegram API ni BotFather. Puedes enlazar el botón a un username personal, un bot de Telegram, un canal de soporte u otro destino de Telegram. BotFather solo es necesario si quieres crear y administrar tu propio bot personalizado.
¿Puedo instalar el botón de Telegram sin un desarrollador?
Sí. El generador está pensado tanto para usuarios no técnicos como para desarrolladores. En la mayoría de casos solo tienes que copiar el Universal Script generado y pegarlo en el Footer, la sección Custom Code de tu plataforma o antes del cierre de </body>. Tilda, WordPress, Shopify, Webflow y Wix suelen permitirlo sin crear una integración a medida.
¿Puedo añadir el botón a todas las páginas del sitio?
Sí. Si colocas el Universal Script en un Footer global o en un área de Custom Code para todo el sitio, el botón puede aparecer automáticamente en todas las páginas. Esta es la configuración recomendada para un botón flotante de soporte, porque solo lo instalas una vez.
¿Cuál es la diferencia entre un botón flotante y un botón inline?
Un botón flotante permanece fijo en la pantalla mientras el visitante se desplaza, por lo que sigue siendo visible y fácil de usar desde casi cualquier parte de la página. Un botón inline se coloca dentro del contenido, como una sección hero, un bloque de contacto o una página de producto, y funciona como un CTA tradicional.
¿Puedo cambiar el texto, los colores y la forma del botón?
Sí. El generador permite personalizar la etiqueta, el color de fondo, el color del texto, el color del icono de Telegram, el radio del borde, el tamaño y la sombra. Así puedes adaptar el botón al diseño de tu sitio en vez de usar un embed genérico.
¿Puedo usar un bot, un canal o un username personal de Telegram?
Sí. El generador admite formatos comunes como @username, username, t.me/username y https://t.me/username. El enlace puede apuntar a un bot de Telegram, un canal de soporte o una cuenta personal, según cómo quieras recibir mensajes.
¿El código usa iconos o archivos externos?
No. El código generado incluye el icono de Telegram directamente como SVG inline dentro del script de instalación. No depende de bibliotecas de iconos, packs de fuentes, URLs de imágenes ni assets alojados en CDN. Esto hace que el botón sea más portable y reduce el riesgo de iconos rotos.
¿Puedo usar este botón de Telegram en lugar de live chat?
Para muchos sitios pequeños y negocios pequeños, sí. Si tu objetivo principal es que los visitantes hagan preguntas o inicien una conversación, un botón de Telegram puede ser una alternativa más sencilla que un widget completo de live chat. Un live chat tradicional puede tener sentido para equipos grandes o flujos avanzados, pero en muchos casos Telegram es más rápido de instalar y mantener.
¿Este generador crea botones dentro de los mensajes de Telegram?
No. Esta herramienta crea un botón para un sitio web que abre Telegram. Para los botones de la bienvenida después de Start, usa el generador de menú inicial. Los botones en otros mensajes requieren un teclado inline enviado por el bot mediante Telegram Bot API.
¿Qué pasa si necesito soporte en equipo dentro de Telegram, no solo un botón?
Un botón de Telegram es solo el punto de entrada a la conversación. Si necesitas enrutar mensajes entrantes a un grupo privado de Telegram, separarlos por topics y permitir que varios miembros del equipo respondan, necesitas algo más que una simple URL. En ese caso puedes conectar GramDesk y usar Telegram como un sistema ligero de soporte en equipo.