Code and frameworks

Add TailGPT to Next.js

About five minutes. You add the code to your root layout with Next.js’s own Script component, then deploy.

Before you start

Step 1: Copy your code

Your code is on your chatbot's page in the TailGPT dashboard: open Chatbots, choose your chatbot, and find the Code box. Click Copy code. Until you have a plan the code is blurred, with Subscribe beside it.

It looks like this, with your own key where this one says YOUR_WIDGET_KEY:

<script src="https://app-tailgpt.tailwebs.com/widget.js" data-key="YOUR_WIDGET_KEY"></script>

Copy yours from the dashboard - this example will not work on your site.

Your code has two values you need here: the address before /widget.js, and the key after data-key=.

Step 2: Open your root layout

• App Router: app/layout.js (or app/layout.tsx).
• Pages Router: pages/_app.js (or pages/_app.tsx).

Step 3: Add the Script component

Import Script from next/script and add it once, with your own address and key.

App Router, in app/layout:

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://YOUR-TAILGPT-ADDRESS/widget.js"
          data-key="YOUR_WIDGET_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Pages Router, in pages/_app:

import Script from 'next/script';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://YOUR-TAILGPT-ADDRESS/widget.js"
        data-key="YOUR_WIDGET_KEY"
        strategy="afterInteractive"
      />
    </>
  );
}

Write data-key exactly like that, with the hyphen. Next.js passes it to the page as it is; a spelling like dataKey would not reach the page, and TailGPT would not find its key.

Step 4: Deploy

Deploy your app the way you usually do. The chatbot appears once the new version is live.

Single-page apps

Add the code once, in the page every route shares - never inside a page or route component. TailGPT checks that it is not already running before it starts, and the chat bubble stays on screen as visitors move between pages, so once is all it needs.

Check it works

1. Open your website in a private (incognito) window. A logged-in admin view and a cached page can both hide a change.
2. Wait a few seconds for the chat bubble in the corner of the page.
3. Ask it a question your website answers.
4. In the TailGPT dashboard, open Chatbots. Once the bubble has loaded on a page of your website, your chatbot shows Live.

No bubble? Troubleshooting covers the usual reasons.

Stuck?

Start with Troubleshooting. Still stuck? Write to [email protected] with your website's address and the platform it is built on.