Next.js

Use Next.js’s built-in <Script> component with strategy="afterInteractive" so the widget loads after the page becomes interactive without blocking rendering. Add it to your root layout so it appears on every page.

App Router (Next.js 13+)
Pages Router (Next.js 12 and below)

Open app/layout.tsx

Open app/layout.tsx (or app/layout.jsx) — the root layout that wraps every page in your app.

Import Script and add the widget

app/layout.tsx

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}

        <Script
          src="https://widget.beforequery.com/beforequery-widget.js"
          strategy="afterInteractive"
          data-knowledge-base-id="kb_xxx"
          data-client-key="bq_pk_..."
        />
      </body>
    </html>
  );
}

Replace kb_xxx and bq_pk_... with your actual values.

Run the dev server

Run npm run dev. Open the browser DevTools → Sources and confirm beforequery-widget.js is loaded, then verify the launcher appears on the page.

Open pages/_app.tsx

Open pages/_app.tsx (or _app.jsx).

Import Script and add the widget

pages/_app.tsx

import type { AppProps } from "next/app";
import Script from "next/script";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />

      <Script
        src="https://widget.beforequery.com/beforequery-widget.js"
        strategy="afterInteractive"
        data-knowledge-base-id="kb_xxx"
        data-client-key="bq_pk_..."
      />
    </>
  );
}

Replace kb_xxx and bq_pk_... with your actual values.

Run the dev server

Run npm run dev and verify the launcher appears on all pages.

Use strategy="afterInteractive" (not "beforeInteractive" or "lazyOnload"). afterInteractive is the closest equivalent to the plain-HTML async attribute — it hydrates the script client-side after the page is interactive without blocking the server render.

Get your keys — your knowledge base ID and public client key (bq_pk_...) are in the BeforeQuery dashboard under Knowledge Base → Integration. Add your Next.js app’s domain (e.g. docs.yourproduct.com) to the key’s origin allowlist.

For all widget configuration options, see Widget reference.

Get Started

Knowledge Sources

Knowledge Connectors

Community Sources

Helpdesk Tickets

Deploy

Platform

Account Management