Install ASDK in Next.js and React

In a single-page app, load the widget once for the whole app. It follows client-side navigation by itself, so it needs no code per route.

Next.js (App Router)

Add the script to your root layout, app/layout.tsx, with the next/script component:

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.asdk.com/v1/asdk.js"
          data-site-id="SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

next/script passes extra attributes such as data-site-id through to the script tag, and a script in the root layout loads once however the visitor navigates. See the Next.js guide to loading scripts (checked October 2026).

If your site sends a Content Security Policy with nonces, pass the nonce to the Script component as well; see Content Security Policy.

Next.js (Pages Router)

Put the same Script element in pages/_app.tsx, next to <Component {...pageProps} />, so every page gets it.

React with Vite or Create React App

Paste the snippet into index.html, just before </body>:

    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script async src="https://cdn.asdk.com/v1/asdk.js" data-site-id="SITE_ID"></script>
  </body>

Don't add the script from a component's effect: React may run effects twice in development, and the widget only needs to load once.

Calling the widget from your app

The widget adds a global asdk function. To call it before the widget has loaded, define the queue first (in index.html, or with an inline Script that has an id):

<script>
  window.asdk = window.asdk || function () { (asdk.q = asdk.q || []).push(arguments); };
</script>

Then, for example, pass the signed-in person after login:

window.asdk("identify", { email: user.email, name: user.name });

and call window.asdk("shutdown") on logout to forget them and the current conversation.

Check

Deploy, open your site, look for the chat button, then click Check installation on the dashboard. A server-rendered page includes the snippet in its HTML; if your app renders only in the browser, the check counts the widget's own report once you have opened the site.