# How to Integrate the Context7 Chat Widget with Your Application

> Easily integrate the Context7 chat widget into your application with a simple script tag. Follow our guide to add real-time chat functionality to your site.

- Repository: [Upstash/context7](https://github.com/upstash/context7)
- Tags: how-to-guide
- Published: 2026-02-16

---

**Integrate the Context7 chat widget by adding a single script tag from `https://context7.com/widget.js` to your site's HTML after claiming and enabling your library in the Context7 admin panel.**

The Context7 chat widget is a lightweight JavaScript solution that embeds an AI-powered documentation assistant directly into your website. According to the `upstash/context7` repository, this widget streams real-time answers from your library's indexed documentation, helping visitors find precise information without leaving your site.

## What Is the Context7 Chat Widget?

The **Context7 chat widget** is a client-side script that renders a floating chat interface on your documentation pages. When a visitor submits a question, the widget queries your library's documentation stored on Context7, generates an answer using a large language model (LLM), and streams the response back in real-time.

The widget loads asynchronously from `https://context7.com/widget.js` and requires no build-step integration. It communicates with the Context7 backend to retrieve context-specific answers based on your documentation corpus.

## Prerequisites for Integrating the Context7 Chat Widget

Before adding the script to your site, you must complete three administrative steps in the Context7 platform. These steps are documented in `docs/howto/chat-widget.mdx`.

### Claim Your Library

You must be a **verified owner** of the library to enable the chat widget. Navigate to your library's page on Context7 and complete the verification process to claim ownership. Only claimed libraries can activate the widget functionality.

### Enable the Widget and Whitelist Domains

Once verified, access your library's admin page at `https://context7.com/{owner}/{repo}/admin`. Under the **Chat** tab, toggle the widget to enabled. You must also specify **allowed domains**—the widget only functions on URLs you explicitly whitelist. You can specify exact domains (e.g., `docs.example.com`), wildcard subdomains (e.g., `*.example.com`), or root domains (e.g., `example.com`).

## How to Add the Context7 Chat Widget to Your Site

After completing the prerequisites, integrate the widget by inserting a single script tag into your site's HTML. The script requires a `data-library` attribute containing your library identifier in the format `/owner/repo`.

### Standard HTML Integration

Place the following script tag in the `<head>` or at the end of the `<body>` of your HTML document:

```html
<script
  src="https://context7.com/widget.js"
  data-library="/owner/repo"
></script>

```

Replace `/owner/repo` with your actual library path (e.g., [`/vercel/next.js`](https://github.com/upstash/context7/blob/main//vercel/next.js) or `/upstash/redis-js`).

### Next.js Integration

For Next.js applications using the App Router, add the script to your root layout file (typically [`app/layout.tsx`](https://github.com/upstash/context7/blob/main/app/layout.tsx)) using the `next/script` component:

```tsx
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://context7.com/widget.js"
          data-library="/owner/repo"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

```

The `afterInteractive` strategy ensures the widget loads after the page becomes interactive, minimizing impact on initial page load performance.

### Docusaurus Integration

For Docusaurus sites, add the widget to your [`docusaurus.config.js`](https://github.com/upstash/context7/blob/main/docusaurus.config.js) file in the `scripts` array:

```js
export default {
  // ... other configuration
  scripts: [
    {
      src: "https://context7.com/widget.js",
      "data-library": "/owner/repo",
      async: true,
    },
  ],
};

```

Docusaurus automatically injects these scripts into every page during the build process.

### Customizing the Widget Appearance

You can customize the widget's appearance and behavior using additional `data-*` attributes on the script tag. As documented in `docs/howto/chat-widget.mdx`, the following options are available:

```html
<script
  src="https://context7.com/widget.js"
  data-library="/vercel/next.js"
  data-color="#0070F3"
  data-position="bottom-left"
  data-placeholder="Ask me anything about Next.js..."
></script>

```

- **`data-color`**: Sets the primary color of the chat button and interface (hex color code).
- **`data-position`**: Controls the placement of the chat button. Accepts `bottom-right` (default) or `bottom-left`.
- **`data-placeholder`**: Customizes the placeholder text in the chat input field.

## How the Context7 Chat Widget Works

When a visitor loads a page containing the widget script, the following process occurs:

1. **Script Loading**: The browser asynchronously loads [`public/widget.js`](https://github.com/upstash/context7/blob/main/public/widget.js) from the Context7 CDN.
2. **UI Rendering**: The script injects a floating chat button into the DOM at the specified position.
3. **Query Processing**: When a user submits a question, the widget sends the query to Context7's API along with your library identifier.
4. **Context Retrieval**: The backend retrieves relevant documentation chunks from your indexed library.
5. **Response Generation**: An LLM generates an answer using the retrieved context and streams the response back to the widget in real-time.

This architecture ensures that answers are always grounded in your actual documentation, reducing hallucinations while providing immediate assistance to your users.

## Summary

- **Claim and verify** your library ownership on Context7 before enabling the widget.
- **Whitelist specific domains** in the admin panel to control where the widget can operate.
- **Add a single script tag** pointing to `https://context7.com/widget.js` with your `data-library` identifier.
- **Customize appearance** using `data-color`, `data-position`, and `data-placeholder` attributes.
- The widget streams **real-time, documentation-grounded answers** from an LLM using your indexed content.

## Frequently Asked Questions

### Do I need to be the library owner to integrate the Context7 chat widget?

Yes, you must be a **verified owner** of the library to enable the chat widget. The verification process ensures that only authorized maintainers can embed AI assistants that represent the official documentation. You can initiate the claiming process from your library's page on Context7.

### Can I use the Context7 chat widget on multiple domains?

Yes, but you must explicitly **whitelist each domain** in your library's admin settings. The widget validates the current page's domain against your allowlist before initializing. You can specify exact domains (e.g., `docs.example.com`), wildcard subdomains (e.g., `*.example.com`), or root domains to cover all subpaths.

### Does the Context7 widget support server-side rendering (SSR)?

The widget is designed for **client-side execution** and loads asynchronously via the [`widget.js`](https://github.com/upstash/context7/blob/main/widget.js) script. For SSR frameworks like Next.js, you should use the `next/script` component with the `afterInteractive` strategy to ensure the widget loads only after hydration completes. This prevents server-client mismatches while maintaining performance.

### How do I update the appearance of the Context7 chat widget after deployment?

You can modify the widget's appearance by updating the `data-*` attributes on the script tag. Changes to `data-color`, `data-position`, or `data-placeholder` take effect immediately on the next page load without requiring redeployment of your application. For dynamic updates, you can remove and re-inject the script with new attributes, though a simple page refresh is typically sufficient.