Add Telegram live chat to Next.js

In Next.js the line becomes one <Script> in your root layout, loaded after the page.

Your line

Every website has its own line, which you get in step 3 of setup. It looks like this, with your site’s code in place of your-site-id:

Example
<script src="https://signalgood.com/s/your-site-id.js" async></script>

Start free to get your lineYour own line is under Install in Your websites.

Add it to Next.js in three steps

  1. Step 1: Open your root layout: app/layout.tsx, or pages/_app.tsx with the Pages Router.
  2. Step 2: Import Script from 'next/script' and add it inside <body>, as below, with your own site id.
  3. Step 3: Deploy.
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://signalgood.com/s/your-site-id.js" strategy="lazyOnload" />
      </body>
    </html>
  );
}

Check it works

Open your website in a new tab and look for the chat button in the corner. Send yourself a message: it arrives in Telegram from the SignalGood bot.

Questions about Next.js

Why lazyOnload?

It loads the chat after everything else, so it never competes with your page for the first paint.

Does it work with client-side navigation?

Yes. The chat lives in the layout, so it stays put as people move between pages, and each message says which page it came from.

If the button doesn’t show

  • Wait up to 10 minutes after a change.
  • Clear your cache plugin or CDN.
  • Check the line is on every page, not just one.
  • Make sure the address in SignalGood matches your site, with or without www.
For developers

If your site has a Content Security Policy, allow https://signalgood.com in script-src, connect-src and frame-src.

Take it off again

Remove the line, and the chat is gone from your site.

Related guides

New to this? Read how Telegram live chat works, or see every platform. It’s $5 a month per website after 14 days free.

From $5 a month per website, after 14 days free. No card to start.

Start freeYour websites