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.
https://t.me/GramDeskBot
Desktop
Mobile
Posición
Desktop
Mobile
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', 'Contact us');
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">Contact us</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
- Mejor opción: instala WPCode o Header Footer Code Manager.
- Abre Settings -> Header/Footer Scripts.
- Pega el Universal Script en Footer.
- Elige Site Wide para mostrar el botón en todo el sitio.
- Guarda y revisa desktop y mobile.
- Sin plugin: abre Appearance -> Theme File Editor -> footer.php y pega el script antes de </body>. Mejor hacerlo con child theme.
WordPress.com
- En el plan Business, instala WPCode o abre Settings -> Additional Code -> Footer.
- Pega el Universal Script en el área Footer.
- Guarda y prueba el sitio publicado.
- En el plan gratuito puede ser necesario cambiar a un plan con soporte de Custom Code.
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.
¿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.
¿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.