Skip to main content

Nextra

The CrawlDesk Ask AI widget enhances your Nextra documentation by adding an interactive AI-powered assistant that allows users to ask natural language questions directly within your site. The widget is integrated via a lightweight script embed, hosted at Crawldesk CDN.

This guide details how to deploy the Ask AI widget in a Nextra documentation site using the script embed method, including configuring a CrawlDesk project and embedding the widget script.

Prerequisites:

  • Active CrawlDesk account
  • Nextra documentation site set up (built on Next.js, version 13 or later).
  • CrawlDesk widget API key (obtained from the CrawlDesk dashboard).

Deploying the Ask AI Widget​

Follow these steps to deploy the CrawlDesk Ask AI widget in your Nextra documentation site using the script embed method. Since Nextra is built on Next.js, you can use methods compatible with Next.js App Router, Pages Router, or Nextra’s theme configuration.

Using Next.js App Router (Nextra 3.0+)​

Add the widget script to your root layout file (app/layout.tsx or app/layout.js):

import Script from "next/script";

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

Replace YOUR_CRAWLDESK_WIDGET_KEY with your actual CrawlDesk API key (e.g., wk_live_481518cb45d758df71b0548b979ad8192506c1b5ea33da1e).

Using Pages Router​

For Nextra sites using the Pages Router, add the widget script to your pages/_document.tsx or pages/_document.js file:

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          src="https://cdn.crawldesk.com/widget.iife.js"
          onLoad={() => {
            window.initAIWidget({
              key: "YOUR_CRAWLDESK_WIDGET_KEY",
            });
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Replace YOUR_CRAWLDESK_WIDGET_KEY with your actual CrawlDesk API key.

Using theme.config.jsx​

Alternatively, you can add the widget using Nextra's theme configuration file (theme.config.jsx or theme.config.js):

export default {
  head: (
    <>
      <script
        src="https://cdn.crawldesk.com/widget.iife.js"
        onLoad={() => {
          window.initAIWidget({
            key: "YOUR_CRAWLDESK_WIDGET_KEY",
          });
        }}
      />
    </>
  ),
  // ... other theme configuration
};

Replace YOUR_CRAWLDESK_WIDGET_KEY with your actual CrawlDesk API key.

Customize the Widget​

Visit your CrawlDesk dashboard to tailor the widget to your brand. You can adjust settings such as colors, logos, and other styling options to create a seamless, branded experience for your users.

info

Since Nextra is built on top of Next.js, you can use any of the above methods depending on your project's setup and preferences. The theme.config.jsx method is specific to Nextra and might be the most straightforward approach for most documentation sites. After adding the script, redeploy or rebuild your Nextra site to ensure the changes take effect. Follow security best practices to keep your widget key secure and avoid exposing sensitive information.