Add TGLiveChat to Framer
Framer has a Custom Code section in the site settings. One paste in the End of body field, one Publish, and the widget is on every page.
Your widget script
Copy this from your TGLiveChat dashboard under Widgets. Your widget ID will be pre-filled.
Site Settings > General > Custom Code
The site-wide way. The script is added to every page of the published site, including pages you create later.
Open your Framer project
Log in to Framer and open the project in the editor.
Open Site Settings
Click the project name in the top left, then Site Settings. The gear icon in the top toolbar gets there too.
Go to General
General is the first tab. Scroll down to Custom Code.
Paste in End of <body> tag
Custom Code has four fields. Use End of <body> tag, so the widget loads after your page content:
Save, then Publish
Save the settings and click Publish in the top right. Custom code only runs on the published site, so open the live URL in a new tab; the widget sits in the bottom-right corner.
Plan requirement: Custom Code needs a paid Framer site plan that includes it (Basic and up). On Free and Mini sites the fields are locked; upgrading the site plan unlocks them.
One page only (Embed component)
If the widget should appear on a single page, use an Embed instead of the site settings.
- Open the page and press Insert, then search for Embed
- Drop it anywhere on the page; it renders nothing visible
- In the right panel set the type to HTML and paste the script tag
- Publish
Prefer the site-wide method for a support widget: visitors rarely need help on exactly the page you guessed. To hide it on specific pages instead, list those paths under the widget's settings in the dashboard.
Troubleshooting
Custom Code is greyed out or missing
Custom code needs a paid Framer site plan that includes it (Basic and up). Free and Mini sites cannot add scripts. Upgrade the site plan and the fields unlock.
I do not see the widget in the editor
That is expected. Framer runs custom code only on the published site and in Preview, never on the design canvas. Publish, then open the live URL.
The widget shows on the old version of the site
Site settings changes go live with the next Publish. Publish again after saving Custom Code, then hard refresh (Ctrl+Shift+R).
The widget overlaps a fixed element
TGLiveChat renders inside Shadow DOM in the bottom-right corner. If a Framer element with a very high z-index covers it, raise the widget's z-index or move it to the left in the dashboard's widget settings.
Still need help?
Contact supportGoing further
Why the size matters on a Framer site
Framer sites score well on Lighthouse out of the box, and a heavy chat widget is the quickest way to lose that. TGLiveChat loads about 39KB gzipped in three requests, against the 79KB to 749KB range DebugBear measured across this category. The widget size benchmark has the numbers per vendor.