Installation Guides

Add TGLiveChat to any platform

One script tag. Works on every platform that lets you add custom HTML. Pick yours below.

Don't see yours? Let us know , if it supports custom HTML, TGLiveChat works there.

How it works

One script. Every platform.

TGLiveChat is a single JavaScript file hosted on a CDN. You reference it with one script tag, pass your widget ID as a data attribute, and the widget boots itself. No npm install. No build step. No dependencies.

It works on any platform that lets you add custom HTML, which is essentially all of them. WordPress, Shopify, Webflow, Bubble, Squarespace, static sites, custom apps. If you can paste a script tag, you can use TGLiveChat.

Style isolation

It won't break your site.

The widget renders inside a Shadow DOM, a completely separate rendering context that's built into browsers. Your CSS can't reach inside it and the widget's CSS can't leak out to your page. They don't interfere.

This also means you don't need to worry about CSS specificity conflicts, z-index wars, or font inheritance messing up the widget appearance. It looks the same on every site it's installed on.

1
script tag to install
< 30s
on plain HTML sites
0
build tools needed
Decision guide

Which guide should I follow?

Pick the one that matches your setup. They all end up in the same place.

Your setupBest guideTime

Plain HTML or static site (no CMS)

Easiest install. Paste before </body>.

~30 sec

React / Next.js / Vite app

npm install @tglivechat/widget, official React component.

~1 min

WordPress site (any theme)

Upload the plugin zip, or paste one script tag. No code editing needed.

~2 min

Shopify store

Edit theme.liquid. Covers all store pages at once.

~60 sec

Webflow project

Project Settings > Custom Code. One paste.

~2 min

Bubble.io app

Script/Meta tags in Settings, or an HTML element.

~2 min

Squarespace website

Code Injection in Pages settings.

~2 min

Framer site

Custom Code in Site Settings, then Publish.

~2 min

Something else

If it supports custom HTML, the HTML guide works.

Varies

The short version

Whatever platform you're on, the install is the same: paste this one line before your closing </body> tag.

<script src="https://cdn.tglivechat.com/w.js" data-id="YOUR_WIDGET_ID"></script>

Get your widget ID from the dashboard after signing up. Free to start.

FAQ

Installation questions

The ones people ask most often.

How do I install TGLiveChat on my website?

Add one script tag before the closing </body> tag of your HTML. Replace YOUR_WIDGET_ID with the ID from your dashboard. That's the whole install. It works on any platform that allows custom HTML.

Will the widget break my site's styles?

No. TGLiveChat uses Shadow DOM, which completely isolates the widget from your page. Your CSS can't affect the widget and the widget's CSS can't leak out to your page. They exist in separate rendering contexts and don't interfere with each other at all.

Can I install TGLiveChat with npm in React or Next.js?

Yes. Run npm install @tglivechat/widget then render <TGLiveChat widgetId="YOUR_ID" /> in your app. For Next.js App Router, wrap it in a "use client" component. The package handles React StrictMode and cleanup automatically.

How do I install it on WordPress?

The easiest way is the official plugin, search TGLiveChat in Plugins → Add New, activate, and connect your account with one click. No code needed. Alternatively paste the script before </body> or use Insert Headers and Footers. The WordPress guide covers all methods.

How do I add it to a Shopify store?

Go to Online Store > Themes > Edit code and open theme.liquid. Paste the script tag before </body>. Save and you're done, the widget appears on every page in your store automatically.

Does it work on Webflow?

Yes. Go to Project Settings > Custom Code and paste the script tag in the Footer Code section. Publish your site and the widget is live on every page. No extra plugins or Webflow integrations needed.

My platform isn't listed. Can I still use TGLiveChat?

Almost certainly yes. If your platform lets you add custom HTML anywhere on the page, TGLiveChat will work. Wix, Framer, Ghost, and most website builders all support this. Follow the HTML guide and adapt the steps. If you're stuck, contact us and we'll check your specific platform.