Add TGLiveChat to any website
Plain HTML, React, Vue, Next.js, Astro, Nuxt, or whatever you're using. If it renders HTML, it works.
The script tag
Copy this from your TGLiveChat dashboard after signing up. Your actual widget ID will already be filled in.
Plain HTML
Open your HTML file and paste the script just before </body>:
Save the file. Open your site. The chat bubble appears in the bottom-right corner.
Next.js
Use the Script component from next/script in your root layout:
React / Vue / Astro / anything else
Find the root layout file of your project, the one that wraps every page. Add the script tag at the bottom of the <body> block.
public/index.htmlindex.htmlsrc/layouts/Layout.astroapp.vue or layouts/default.vuesrc/app.htmlTroubleshooting
Widget doesn't appear
Open browser DevTools (F12) and check the Console tab for errors. The most common cause is a wrong widget ID. Also check your Content Security Policy if you have one, you'll need to allow cdn.tglivechat.com in script-src.
Messages not reaching Telegram
Go to your dashboard and check that Telegram is still connected (green badge). If you're using group routing, make sure the bot is still an admin with Manage Topics permission.
Widget conflicts with site styles
TGLiveChat uses Shadow DOM so your site's CSS can't bleed in. If something still looks off, it's likely a z-index issue with another element. You can adjust the widget's z-index from the dashboard.
Still stuck?
Contact supportGoing further
Live chat for plain HTML, in depth
This page is the install. The plain HTML platform guide covers the rest: the plan limits to check before you start, the three specific ways a correct install still looks broken on plain HTML, what the native option gives you instead, and how a 39KB widget compares with the 79KB to 749KB range DebugBear measured across this category.