---
title: "Recipe: Embed the AI Widget Anywhere"
description: "Add your docs' AI assistant to your marketing site, app, or support portal."
---

# Recipe: Embed the AI Widget Anywhere

Your doc site's AI assistant can live on any page you control — turn "Contact support" into "Ask the docs" on your marketing site, inside your app, or in your support portal.

## Basic Embed

Add one script tag:

```html
<script
  src="https://widget.syntext.dev/widget.js"
  data-project-id="prj_abc123"
  async
></script>
```

This renders a floating chat button. The widget:

- Fetches its name/persona from your project's [widget config](/api-reference/chat/config)
- Streams answers from the [chat endpoint](/api-reference/chat/ask) with citations linking back to your docs
- Applies per-visitor [rate limits](/api-reference/rate-limits) automatically

## Passing Page Context

If the widget is embedded in your app, tell it what the user is looking at for more relevant retrieval:

```html
<script
  src="https://widget.syntext.dev/widget.js"
  data-project-id="prj_abc123"
  data-page-context="/dashboard/billing"
  async
></script>
```

## Building a Custom UI

Skip the widget entirely and call the API from your own frontend:

```typescript
const res = await fetch(
  `https://api.syntext.dev/v1/projects/${PROJECT_ID}/chat`,
  {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      question,
      visitorId,               // stable anonymous ID you generate
      sessionId,               // from previous X-Session-Id header, for follow-ups
    }),
  }
)

const sessionId = res.headers.get('X-Session-Id')
const reader = res.body!.getReader()
// ...consume the SSE stream
```

Add feedback buttons that call the [feedback endpoint](/api-reference/chat/feedback) — thumbs-down answers feed your [documentation gaps report](/platform/analytics).

## Things to Know

- The chat endpoint is public by design (it's what your doc site uses) — abuse is contained by visitor rate limits and your org's monthly AI quota
- Answers only draw from **your** indexed documentation
- Handle the `429` and `403 USAGE_LIMIT_EXCEEDED` responses gracefully in custom UIs — show a cooldown message rather than an error