WordPress Installation Guide

Add TGLiveChat to WordPress

Three ways to do it. All of them take about 2 minutes. Pick whichever feels most comfortable.

First: grab your widget script

Log in to your TGLiveChat dashboard, go to Widgets, and copy your script tag. It looks like this:

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

Replace YOUR_WIDGET_ID with your actual widget ID from the dashboard. (It's already filled in when you copy it from there.)

1

Method 1: Theme File Editor (quickest)

1

Go to Appearance > Theme File Editor

In your WordPress admin sidebar, find Appearance, then click Theme File Editor (some themes call it Theme Editor).

2

Open footer.php

On the right side, you'll see a list of theme files. Click on footer.php. This file handles the bottom of every page on your site.

3

Paste the script before </body>

Find the closing </body> tag. Paste your script tag right before it:

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

Click Update File

That's it. Visit your site in a new tab and you should see the chat widget.

Heads up: If you update your WordPress theme, changes to footer.php might get overwritten. Use a child theme or Method 2 if you want something update-proof.

2

Method 2: Insert Headers and Footers plugin (safest)

The most popular way to add scripts to WordPress. Survives theme updates.

1

Install the plugin

Go to Plugins > Add New. Search for "Insert Headers and Footers" by WPCode. Install and activate it.

2

Go to Settings > Insert Headers and Footers

(Or if using the newer WPCode version, it's under Code Snippets > Header & Footer.)

3

Paste in the "Scripts in Footer" box

Paste in the Footer box:

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

Save changes

Click Save. Open your site in a new tab. Widget should be there.

3

Method 3: Custom HTML Widget

No theme file edits, no plugins. A bit unconventional but it works.

1

Go to Appearance > Widgets

Find any widget area (Footer is ideal).

2

Add a Custom HTML block

Click the + button, search for "Custom HTML," and add it to your widget area.

3

Paste the script tag

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

Update and check

Click Update. Visit your site.

Troubleshooting

Widget doesn't show up

Clear your browser cache (Ctrl+Shift+R). If you're using a caching plugin (WP Super Cache, W3 Total Cache, etc.), purge that too. Also check that your widget ID is correct in the script tag.

Widget shows on desktop but not mobile

Some WordPress themes load different footer files for mobile. If you used Method 1, check mobile-footer.php or use Method 2 (plugin) instead, which works everywhere.

"Something went wrong" error in Theme Editor

Your hosting might have disabled the theme file editor. This is a security feature. Use Method 2 (plugin) or ask your hosting provider to enable it temporarily.

Widget disappeared after a theme update

This happens with Method 1 because theme updates overwrite theme files. Switch to Method 2 (plugin) and your widget will survive all future theme updates.

Widget conflicts with another chat plugin

TGLiveChat uses Shadow DOM, so CSS conflicts are extremely rare. But if you have another live chat plugin running (Tawk, Crisp, etc.), deactivate the old one first.

Still stuck? We're happy to help.

Contact support