Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion deployment/configuration/website_widget.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@

Features include:

- Lightweight ~100-150kb gzipped bundle

Check warning on line 11 in deployment/configuration/website_widget.mdx

View check run for this annotation

Mintlify / Mintlify Validation (danswer) - vale-spellcheck

deployment/configuration/website_widget.mdx#L11

Did you really mean 'gzipped'?
- Fully customizable colors and branding
- Responsive design (desktop popup, mobile fullscreen)

Check warning on line 13 in deployment/configuration/website_widget.mdx

View check run for this annotation

Mintlify / Mintlify Validation (danswer) - vale-spellcheck

deployment/configuration/website_widget.mdx#L13

Did you really mean 'fullscreen'?
- Real-time streaming responses via SSE
- Session persistence across page reloads

Expand All @@ -22,7 +22,7 @@

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

<!-- Configure and display -->
<onyx-chat-widget
Expand Down Expand Up @@ -180,11 +180,35 @@
| `background-color` | string | `#e9e9e9` | Widget background color |
| `text-color` | string | `#000000bf` | Text color (75% opacity black) |
| `mode` | string | `"launcher"` | Display mode: `"launcher"` or `"inline"` |
| `include-citations`| boolean| `false` | Show citation badges linking to source documents |

#### `include-citations`

When enabled, assistant messages display clickable citation badges below the response text.
Each badge shows a sequential number and the source document title, linking directly to the original document.

```html
<onyx-chat-widget
backend-url="https://cloud.onyx.app/api"
api-key="on_abc123"
include-citations="true"
>
</onyx-chat-widget>
```

<Warning>
**Be mindful of document access when enabling citations.** The widget will cite any documents accessible to the
configured agent or API key. If the agent has access to private or internal documents,
citation links may point to resources that end users do not have permission to view.

To avoid exposing private document links, either scope the agent's document access to only public-facing sources,
or disable citations for public-facing widget deployments.
</Warning>

## API Key Security

<Warning>
The widget's API key is exposed in client-side code. Always create a dedicated API key with:

Check warning on line 211 in deployment/configuration/website_widget.mdx

View check run for this annotation

Mintlify / Mintlify Validation (danswer) - vale-spellcheck

deployment/configuration/website_widget.mdx#L211

Did you really mean 'widget's'?

- **Limited permissions** - Only chat access, no admin features
- **Rate limiting** - Prevent abuse from malicious actors
Expand Down
13 changes: 12 additions & 1 deletion overview/onyx_anywhere/website_widget.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

## Overview

Bring Onyx's AI capabilities directly to your website with an embeddable chat widget. Built with [Lit](https://lit.dev/)

Check warning on line 9 in overview/onyx_anywhere/website_widget.mdx

View check run for this annotation

Mintlify / Mintlify Validation (danswer) - vale-spellcheck

overview/onyx_anywhere/website_widget.mdx#L9

Did you really mean 'embeddable'?
web components for maximum compatibility and minimal bundle size.

The widget integrates seamlessly with any website,
Expand All @@ -14,21 +14,22 @@

## Features

- **Lightweight** - ~100-150kb gzipped bundle

Check warning on line 17 in overview/onyx_anywhere/website_widget.mdx

View check run for this annotation

Mintlify / Mintlify Validation (danswer) - vale-spellcheck

overview/onyx_anywhere/website_widget.mdx#L17

Did you really mean 'gzipped'?
- **Fully Customizable** - Colors, branding, and styling to match your site
- **Responsive** - Desktop popup, mobile fullscreen

Check warning on line 19 in overview/onyx_anywhere/website_widget.mdx

View check run for this annotation

Mintlify / Mintlify Validation (danswer) - vale-spellcheck

overview/onyx_anywhere/website_widget.mdx#L19

Did you really mean '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
- **Source Citations** - Optional citation badges linking to source documents

## Quick Start

Add these few lines to your website:

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

<!-- Configure and display -->
<onyx-chat-widget
Expand Down Expand Up @@ -97,6 +98,15 @@
| `background-color` | string | `#e9e9e9` | Widget background color |
| `text-color` | string | `#000000bf` | Text color (75% opacity black) |
| `mode` | string | `"launcher"` | Display mode: `"launcher"` or `"inline"` |
| `include-citations`| boolean| `false` | Show citation badges linking to source documents |

<Warning>
**Citations and private documents:** When `include-citations` is enabled,
the widget will cite any documents accessible to the configured agent or API key.
If the agent has access to private or internal documents,
citation links may point to resources that end users cannot view. Scope the agent's document access appropriately,
or disable citations for public-facing deployments with sensitive sources.
</Warning>

### Configuration Examples

Expand All @@ -122,6 +132,7 @@
background-color="#FFFFFF"
text-color="#1A1A1A"
mode="launcher"
include-citations="true"
>
</onyx-chat-widget>
```
Expand Down