Critical Context

Overview

The embeddable chat widget allows you to add a Claude Code-powered chat interface to any website. Your users can ask questions about your codebase directly from your documentation, support pages, or internal tools.

Quick Start

Create a Chat Agent

Go to Chat Agents and click "New Chat Agent". Give it a name and configure the system prompt that defines how the assistant should respond.

Get Your Embed Code

Click the "Embed" button on your chat agent to view the embed code. You'll see a JavaScript snippet that looks like this:

<script
  src="https://critical.cx/embed/YOUR_TOKEN/loader.js"
  async
  data-position="bottom-right"
></script>

Add to Your Website

Paste the script tag into your HTML just before the closing </body> tag. The chat widget will appear automatically.

Configuration Options

Customize the widget behavior using data attributes:

<script
  src="https://critical.cx/embed/YOUR_TOKEN/loader.js"
  async
  data-position="bottom-right"
  data-theme="dark"
  data-button-text="Ask AI"
  data-customer-id="12345"
  data-account-tier="enterprise"
></script>

Available Options

data-position - Widget position: bottom-right, bottom-left
data-theme - Color theme: light, dark, auto
data-button-text - Custom text for the chat button
data-customer-* - Pass customer context to enhance responses

Passing Context

Make your chat responses smarter by passing context data attributes. This information is included with each message to help the AI provide more relevant answers.

<script
  src="https://critical.cx/embed/YOUR_TOKEN/loader.js"
  data-user-name="John Smith"
  data-user-email="john@company.com"
  data-account-plan="enterprise"
  data-current-page="/docs/api"
></script>

Tip

Dynamic data attributes can be rendered server-side to include user-specific information like account status, feature flags, or transaction history.