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:

<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
• Streams answers from the chat endpoint with citations linking back to your docs
• Applies per-visitor 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:

<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:

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 — thumbs-down answers feed your documentation gaps report.

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