Documentación del widget
Aprende a añadir TalkTG a tu sitio, desde la instalación básica hasta la personalización.
Contenido
Inicio rápido
Pega una sola línea de código y empieza en pocos minutos.
Regístrate y añade un sitio
Crea tu cuenta, abre “Sitios”, selecciona “Añadir sitio” e introduce tu dominio.
Conecta un bot de Telegram
Crea un bot con @BotFather, copia el Token, conéctalo en el sitio y envía /start al bot.
Pega el código del widget
Copia el código de inserción y colócalo justo antes de </body> en tu HTML.
Requisitos
- 1Una cuenta de TalkTG
- 2Un sitio web cuyo HTML puedas editar
- 3Un Telegram Bot Token creado con @BotFather
Instalación
Sustituye YOUR_SITE_ID por el ID del sitio que aparece en el panel.
<script src="https://talktg.com/widget.js"
data-site-id="YOUR_SITE_ID" async></script>HTML básico
Añade el script antes de la etiqueta de cierre </body>.
Next.js / React
Usa el componente Script de Next.js en el layout raíz.
Vue / Nuxt
Añádelo a app.head.script en nuxt.config.ts.
WordPress
Añádelo antes de </body> en footer.php o usa un plugin de cabecera y pie.
Shopify
Añádelo antes de </body> en theme.liquid.
Wix
Añade código personalizado al final del Body y aplícalo a todas las páginas.
Configuración del widget
Ve a “Sitios → Tu sitio → Configuración del widget” para cambiar su aspecto y comportamiento.
| Opción | Predeterminado | Descripción |
|---|---|---|
| Color principal | #6366F1 | Color del botón, cabecera y mensajes del visitante. |
| Posición | bottom-right | Esquina inferior derecha o izquierda. |
| Saludo | Hi there! | Mensaje mostrado a visitantes nuevos. |
| Nombre del agente | Support | Nombre mostrado en la cabecera del chat. |
| Ventana automática | false | Muestra automáticamente el saludo. |
| Sonido | true | Reproduce un sonido al recibir una respuesta. |
Referencia de API
El widget utiliza internamente estas API públicas; normalmente no necesitas llamarlas.
/api/widget/config/{siteId}Obtiene la configuración del widget.
/api/sites/{siteId}/statusComprueba el estado del bot de Telegram.
/api/chat/sendEnvía un mensaje del visitante.
/api/chat/historyCarga el historial de conversación.
/api/chat/pollConsulta mensajes nuevos.
Cómo funciona
El script carga de forma asíncrona y aísla los estilos con Shadow DOM.
Los mensajes se reenvían al Telegram conectado mediante TalkTG.
Tus respuestas de Telegram aparecen en el chat del sitio.
La identidad se guarda en el navegador para continuar la conversación al volver.
Preguntas y solución de problemas
El widget no aparece
Comprueba la posición del script, el ID del sitio y los errores de la consola.
No recibo mensajes en Telegram
Envía /start al bot y confirma que el panel indica que está conectado.
¿Puedo usar varios dominios?
Cada sitio corresponde a un dominio; crea un sitio para cada dominio.
¿Ralentiza mi sitio?
No. Carga de forma asíncrona con async y no bloquea el renderizado.
¿Listo para empezar?
Configúralo en pocos minutos. No necesitas tarjeta.