HTML / Any Site

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>:

...

</body>

</html>

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:

import Script from 'next/script'

export default function RootLayout({ children }) {

return (

{children}

<Script

src="https://cdn.tglivechat.com/w.js"

data-id="YOUR_WIDGET_ID"

strategy="afterInteractive"

</body></html>

)

}

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.

React (CRA / Vite)public/index.html

Vue 3index.html

Astrosrc/layouts/Layout.astro

Nuxt 3app.vue or layouts/default.vue

SvelteKitsrc/app.html

Troubleshooting

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 support