Documentation du widget
Découvrez comment ajouter TalkTG à votre site, de l’installation à la personnalisation.
Sommaire
Démarrage rapide
Collez une seule ligne de code et démarrez en quelques minutes.
Inscrivez-vous et ajoutez un site
Créez votre compte, ouvrez « Sites », cliquez sur « Ajouter un site » et saisissez votre domaine.
Connectez un bot Telegram
Créez un bot avec @BotFather, copiez le Token, liez-le au site puis envoyez /start au bot.
Collez le code du widget
Copiez le code d’intégration et placez-le juste avant </body> dans votre HTML.
Prérequis
- 1Un compte TalkTG
- 2Un site dont vous pouvez modifier le HTML
- 3Un Telegram Bot Token créé avec @BotFather
Installation
Remplacez YOUR_SITE_ID par l’identifiant affiché dans le tableau de bord.
<script src="https://talktg.com/widget.js"
data-site-id="YOUR_SITE_ID" async></script>HTML simple
Ajoutez le script avant la balise de fermeture </body>.
Next.js / React
Utilisez le composant Script de Next.js dans le layout racine.
Vue / Nuxt
Ajoutez-le à app.head.script dans nuxt.config.ts.
WordPress
Ajoutez-le avant </body> dans footer.php ou utilisez un plugin d’en-tête et pied.
Shopify
Ajoutez-le avant </body> dans theme.liquid.
Wix
Ajoutez un code personnalisé en fin de Body et appliquez-le à toutes les pages.
Configuration du widget
Ouvrez « Sites → Votre site → Paramètres du widget » pour modifier son apparence et son comportement.
| Option | Défaut | Description |
|---|---|---|
| Couleur principale | #6366F1 | Couleur du bouton, de l’en-tête et des messages visiteur. |
| Position | bottom-right | Coin inférieur droit ou gauche. |
| Message d’accueil | Hi there! | Message affiché aux nouveaux visiteurs. |
| Nom de l’agent | Support | Nom affiché dans l’en-tête du chat. |
| Ouverture automatique | false | Affiche automatiquement le message d’accueil. |
| Son | true | Joue un son à la réception d’une réponse. |
Référence API
Le widget utilise ces API publiques en interne ; vous n’avez généralement pas à les appeler.
/api/widget/config/{siteId}Récupère la configuration du widget.
/api/sites/{siteId}/statusVérifie l’état du bot Telegram.
/api/chat/sendEnvoie un message visiteur.
/api/chat/historyCharge l’historique de conversation.
/api/chat/pollRecherche de nouveaux messages.
Fonctionnement
Le script charge en différé et isole ses styles avec le Shadow DOM.
Les messages sont transmis au Telegram connecté via TalkTG.
Vos réponses Telegram apparaissent dans le chat du site.
L’identité est conservée dans le navigateur pour reprendre la conversation.
FAQ et dépannage
Le widget ne s’affiche pas
Vérifiez l’emplacement du script, l’ID du site et les erreurs de la console.
Je ne reçois rien dans Telegram
Envoyez /start au bot et vérifiez que le tableau de bord indique « connecté ».
Puis-je utiliser plusieurs domaines ?
Un site correspond à un domaine ; créez un site pour chaque domaine.
Le widget ralentit-il mon site ?
Non. Il charge avec async et ne bloque pas l’affichage de la page.
Prêt à commencer ?
La configuration prend quelques minutes, sans carte bancaire.