Website Widget - Gorbit Documentation

Overview

Bring Gorbit’s AI capabilities directly to your website with an embeddable chat widget. Built with Lit web components for maximum compatibility and minimal bundle size. The widget integrates seamlessly with any website, providing your visitors instant access to AI-powered conversations without leaving your page.

Features

Lightweight - ~100-150kb gzipped bundle
Fully Customizable - Colors, branding, and styling to match your site
Responsive - Desktop popup, mobile fullscreen
Shadow DOM Isolation - No style conflicts with your existing CSS
Real-time Streaming - Server-sent events (SSE) for fast responses
Session Persistence - Conversations survive page reloads
Two Display Modes - Floating launcher or inline embed

Quick Start

Add these few lines to your website:

<!-- Load the widget -->
<script type="module" src="https://cdn.gorbit.app/widget/1.0/dist/gorbit-widget.js"></script>

<!-- Configure and display -->
<gorbit-chat-widget
  backend-url="https://cloud.gorbit.app/api"
  api-key="your_api_key_here"
  mode="launcher"
>
</gorbit-chat-widget>

That’s it! The widget will appear as a floating button in the bottom-right corner of your page.

Always use a limited-scope API key for the widget. The API key is visible in client-side code, so it should have restricted permissions and rate limits. Never use admin or full-access keys.

Display Modes

Launcher Mode (Default)

A floating button appears in the bottom-right corner. Clicking it opens a chat popup.

Desktop: 400x600px popup above the button
Mobile: Full-screen overlay for optimal mobile experience

<gorbit-chat-widget mode="launcher"></gorbit-chat-widget>

Inline Mode

The widget embeds directly in your page layout. Perfect for dedicated support pages or knowledge bases.

<div style="width: 400px; height: 600px;">
  <gorbit-chat-widget mode="inline"></gorbit-chat-widget>
</div>

The widget will fill its container’s dimensions in inline mode. Set the container size to control the widget size.

Configuration Options

Required Attributes

Attribute	Type	Description
`backend-url`	string	Your Gorbit backend API URL
`api-key`	string	API key for authentication

Optional Attributes

Attribute	Type	Default	Description
`agent-id`	number	`undefined`	Specific agent/persona to use
`agent-name`	string	`"Assistant"`	Display name in header
`logo`	string	Gorbit logo	URL to custom logo image
`primary-color`	string	`#1c1c1c`	Primary brand color (buttons, accents)
`background-color`	string	`#e9e9e9`	Widget background color
`text-color`	string	`#000000bf`	Text color (75% opacity black)
`mode`	string	`"launcher"`	Display mode: `"launcher"` or `"inline"`

Configuration Examples

Basic Setup:

<gorbit-chat-widget
  backend-url="https://cloud.gorbit.app/api"
  api-key="on_abc123">
</gorbit-chat-widget>

Full Customization:

<gorbit-chat-widget
  backend-url="https://cloud.gorbit.app/api"
  api-key="on_abc123"
  agent-id="42"
  agent-name="Support Bot"
  logo="https://yoursite.com/logo.png"
  primary-color="#FF6B35"
  background-color="#FFFFFF"
  text-color="#1A1A1A"
  mode="launcher"
>
</gorbit-chat-widget>

Customization

Styling

The widget uses CSS custom properties for theming. All styles are scoped within Shadow DOM to prevent conflicts with your site’s CSS. Default Colors:

CSS Variable	Default	Description
`--gorbit-primary`	`#1c1c1c`	Buttons, accents
`--gorbit-primary-hover`	`#000000`	Hover state
`--gorbit-background`	`#e9e9e9`	Widget background
`--gorbit-text`	`#000000bf`	Text (75% opacity)
`--gorbit-text-light`	`#ffffff`	White text on dark
`--gorbit-border`	`#00000033`	Borders (20% opacity)

Override via attributes:

<gorbit-chat-widget
  primary-color="#FF6B35"
  background-color="#FFFFFF"
  text-color="#1A1A1A"
>
</gorbit-chat-widget>

Architecture

The widget communicates directly with your Gorbit backend using Server-Sent Events (SSE) for real-time streaming responses: Widget loads - Lightweight JavaScript bundle initializes the web component Session created - Widget creates a chat session via the Gorbit API User sends message - Request is sent to your Gorbit backend Streaming response - AI response streams back in real-time via SSE Markdown rendered - Responses are formatted with full markdown support

Browser Support

Chrome/Edge 90+ (Chromium)
Firefox 90+
Safari 15+
Mobile Safari (iOS 15+)
Mobile Chrome (Android)

Deployment

For detailed deployment instructions, including self-hosted setup and API key security best practices, see the Website Widget Deployment Guide.

Need help with setup? Contact your Gorbit administrator for API key configuration or deployment assistance.

​Overview

​Features

​Quick Start

​Display Modes

​Launcher Mode (Default)

​Inline Mode

​Configuration Options

​Required Attributes

​Optional Attributes

​Configuration Examples

​Customization

​Styling

​Architecture

​Browser Support

​Deployment

Overview

Features

Quick Start

Display Modes

Launcher Mode (Default)

Inline Mode

Configuration Options

Required Attributes

Optional Attributes

Configuration Examples

Customization

Styling

Architecture

Browser Support

Deployment