Next.js

The CrawlDesk Ask AI widget enhances your Next.js documentation or web application by adding an interactive AI-powered assistant that allows users to ask questions directly within your site. The widget is integrated via a lightweight script embed, hosted at https://cdn.crawldesk.com/widget.iife.js.

This guide details how to deploy the Ask AI widget in a Next.js (version 13 or later) site using the script embed method, including configuring a CrawlDesk project and embedding the widget script.

Prerequisites:

Active CrawlDesk account (sign up at https://app.crawldesk.com).
Next.js site (version 13 or later) set up with App Router or Pages Router.
CrawlDesk widget API key (obtained from the CrawlDesk dashboard).

Follow these steps to deploy the CrawlDesk Ask AI widget in your Next.js site using the script embed method.

Add the Script to Your Next.js Site
Open or create a layout file (e.g., app/layout.js for App Router or pages/_app.js for Pages Router). Add the CrawlDesk widget script to the <head> section:

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <script
          src="https://cdn.crawldesk.com/widget.iife.js"
          onLoad={() => {
            window.initAIWidget({
              key: "YOUR_CRAWLDESK_WIDGET_KEY",
            });
          }}
        ></script>
      </head>
      <body>{children}</body>
    </html>
  );
}

Replace YOUR_CRAWLDESK_WIDGET_KEY with your actual CrawlDesk API key. Settings (e.g., theme) are managed via the CrawlDesk dashboard.

Secure the API Key Store the API key in an environment variable (e.g., .env.local):
```
NEXT_PUBLIC_CRAWLDESK_WIDGET_KEY=wk_live_****************
```
Update the script to use the environment variable:
```
key: process.env.NEXT_PUBLIC_CRAWLDESK_WIDGET_KEY;
```

Deploying the Ask AI Widget​

Deploying the Ask AI Widget