Webflow Installation Guide

Add TGLiveChat to Webflow

Webflow makes this really easy. One paste in Project Settings and you're done. Here's exactly where to put it.

Your widget script

Grab this from your TGLiveChat dashboard under Widgets. It'll have your actual widget ID already filled in.

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

Method 1: Project Settings (all pages)

This adds the widget to every page on your Webflow site. This is what most people want.

1

Open your Webflow project

Go to your project in the Webflow Designer.

2

Go to Project Settings > Custom Code

Click the gear icon in the left sidebar to open Project Settings. Then click the Custom Code tab.

3

Paste in the "Before </body> tag" section

Paste in the Footer Code box:

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

Save and Publish

Click Save Changes, then Publish your site. Custom code only runs on the published site, not in the Designer preview.

Note: Custom code requires a Webflow paid site plan (Basic or above). It won't work on the free webflow.io staging domain. The Embed element method below works on all plans.

2

Method 2: Embed element (specific pages)

For specific pages only, or if you're on Webflow's free plan.

1

Open the page in the Designer

Navigate to the page where you want the widget.

2

Add an Embed element

Open the Add Elements panel (the + icon), scroll to Components, and drag an Embed element to the bottom of the page.

3

Paste the script

Double-click the Embed element to open the code editor. Paste your script:

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

Save & Close, then Publish

Click Save & Close, then Publish. The widget will show on that page only.

Troubleshooting

Widget doesn't appear in the Designer

That's normal. Custom code and Embed scripts don't run in the Webflow Designer. Publish first and check the live site.

Widget doesn't appear on the published site

Open your browser's developer console (F12 > Console) and check for errors. Most common issue: incorrect widget ID. Also make sure you published after adding the code.

Custom Code tab is grayed out

The Custom Code feature requires a paid Webflow site plan. If you're on the free plan, use Method 2 with an Embed element instead.

Widget appears but clicks don't work

Check if another element has a higher z-index covering the widget. Webflow interactions sometimes sit on top of everything. You can adjust z-index from your TGLiveChat dashboard.

Need a hand?

Contact support