Search documentation

Search documentation

Web Widget

The web widget embeds the AI copilot directly in your application. Users interact with it through a floating panel, and the SDK handles context, identity, and tool execution in the browser.

Setup

Install the SDK and wrap your app with the provider. See Quickstart for full installation instructions.

typescript
import { PillarProvider } from '@pillar-ai/react';


function App() {
  return (
    <PillarProvider agentSlug="your-agent-slug">
      {/* your app */}
    </PillarProvider>
  );
}

Channel settings

These settings are configured in the dashboard under Agents > [your agent] > Channel Settings.

SettingDescriptionDefault
Assistant NameDisplay name shown in the panel headerAgent name
Welcome MessageFirst message shown when the panel opensNone
Input PlaceholderPlaceholder text in the message input"Ask a question..."
Open on Page LoadAutomatically open the panel when the page loadsOff
Panel PositionLeft or right side of the screenRight
Panel WidthWidth of the panel in pixels400
Button PositionCorner placement of the floating buttonBottom right
Button LabelText label on the floating buttonNone (icon only)

Identity

Web widget users are identified through the identify() method in the SDK. Call it after your user logs in:

typescript
pillar.identify('user_7842', {
  email: 'sarah@acme.com',
  name: 'Sarah Chen',
});

On logout, call pillar.logout() to clear the identity.

If your app uses API tool sources (OpenAPI), you can pass apiToken in identify() to forward the user's auth token — Pillar calls the APIs on their behalf without a separate OAuth step.

See Adding User Context for setContext, apiToken, and the full identify API.

Theming

The widget appearance can be customized to match your brand. See Theming & Branding for color, font, and layout options.

Next steps