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.
Method 1: Project Settings (all pages)
This adds the widget to every page on your Webflow site. This is what most people want.
Open your Webflow project
Go to your project in the Webflow Designer.
Go to Project Settings > Custom Code
Click the gear icon in the left sidebar to open Project Settings. Then click the Custom Code tab.
Paste in the "Before </body> tag" section
You'll see two text areas: "Head Code" and "Footer Code." Paste your script in the Footer Code box (the one labeled "Before </body> tag"):
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 for the Custom Code feature, but the Embed element method below works on all plans.
Method 2: Embed element (specific pages)
If you only want the chat widget on certain pages, or you're on Webflow's free plan, use an Embed element instead.
Open the page in the Designer
Navigate to the page where you want the widget.
Add an Embed element
Open the Add Elements panel (the + icon), scroll down to Components, and drag an Embed element onto the page. Put it at the bottom of the page, inside the body but outside your main content sections.
Paste the script
Double-click the Embed element to open the code editor. Paste your script:
Save & Close, then Publish
Click Save & Close in the embed editor, then Publish. The widget will show on that page only.
Webflow hosting vs custom domain
TGLiveChat works on both Webflow's default yoursite.webflow.io subdomain and custom domains. No extra configuration needed.
If you're using Cloudflare or another CDN in front of your custom domain, make sure your CDN isn't blocking third-party scripts. Most don't, but some aggressive security settings can interfere.
Troubleshooting
Widget doesn't appear in the Designer
That's normal. Custom code and Embed scripts don't run in the Webflow Designer. You need to Publish 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. The most common issue is an incorrect widget ID. Also make sure you actually published after adding the code (Webflow doesn't auto-publish).
Custom Code tab is grayed out
The Custom Code feature requires a paid Webflow site plan (Basic, CMS, Business, or Enterprise). 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 on your page has a higher z-index that's covering the widget. Webflow interactions and overlays sometimes sit on top of everything. You can adjust the widget's z-index from your TGLiveChat dashboard under widget settings.
Need a hand?
Chat with us on Telegram