Next.js App Router & Pages Router

Install Live Chat on Next.js

Embed a zero-dependency, ultra-lightweight (~10KB) Telegram chat bubble into Next.js 14/15.

AMethod 1: Next.js Script Component (Recommended)

Add the script tag inside your root app/layout.tsx using Next.js native next/script:

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.tglivechat.com/w.js"
          data-id="YOUR_WIDGET_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

BMethod 2: NPM Component Wrapper

Alternatively install @tglivechat/widget and render as a client component:

'use client'
import { TGLiveChat } from '@tglivechat/widget'

export default function ChatWrapper() {
  return <TGLiveChat widgetId="YOUR_WIDGET_ID" />
}

✓Done!

Your chat widget loads with zero CSS pollution using Shadow DOM encapsulation.

Visitor messages immediately ping your Telegram DM or Supergroup!

Get your Widget ID

Create a free widget in 10 seconds.

Create Free Widget