> For the complete documentation index, see [llms.txt](https://docs.iotex.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.iotex.io/quicksilver/developers/ui-integrations/widget.md).

# Widget

## Widget Integration

Easily embed an AI-powered chat widget on your website with just a single script tag. The QuickSilver chat widget delivers a seamless, real-time conversational experience and is fully responsive on desktop and mobile devices.

### Basic Integration

To get started, add the following script tag to your HTML page, just before the closing tag:

```html
<!-- Basic Integration -->
<script 
  src="https://api-quicksilver.iotex.ai/chat-widget-embed.js"
  data-project-id="your-project-id"
  data-title="AI Assistant">
</script>
```

### Customization & Configuration

You can customize the widget’s appearance and behavior using additional data- attributes:

```html
<!-- Customized Integration -->
<script 
  src="https://api-quicksilver.iotex.ai/chat-widget-embed.js"
  data-project-id="your-project-id"
  data-title="Support Assistant"
  data-initial-message="Hello! How can I help you today?"
  data-position="bottom-left"
  data-button-color="#3B82F6"
  data-button-size="lg">
</script>
```

### Configuration Options

<table><thead><tr><th width="181.953125">Parameter</th><th width="238.4437255859375">Description</th><th width="218.2718505859375">Example</th></tr></thead><tbody><tr><td><code>data-project-id</code></td><td><strong>Required</strong> - Your Project ID for authentication</td><td><code>your-project-id</code></td></tr><tr><td><code>data-position</code></td><td>Widget position on screen</td><td><code>bottom-right</code>, <code>bottom-left</code>, <code>top-right</code>, <code>top-left</code></td></tr><tr><td><code>data-button-color</code></td><td>Hex color code for the chat button</td><td><code>#3B82F6</code></td></tr><tr><td><code>data-button-size</code></td><td>Size of the chat button</td><td><code>sm</code> (48px), <code>md</code> (56px), <code>lg</code> (64px)</td></tr><tr><td><code>data-title</code></td><td>Title displayed in the chat window header</td><td><code>AI Assistant</code></td></tr><tr><td><code>data-initial-message</code></td><td>Pre-filled message to start conversation</td><td><code>How can I help you today?</code></td></tr></tbody></table>

### Advanced: Programmatic Control

For more control, you can initialize and interact with the widget via JavaScript:

```html
<!-- Load the widget script -->
<script src="https://api-quicksilver.iotex.ai/chat-widget-embed.js"></script>

<script>
// Initialize with custom options
ChatWidget.init({
  projectId: "your-project-id",
  position: "bottom-right",
  buttonColor: "#10b981",
  buttonSize: "md",
  title: "AI Assistant",
  initialMessage: "Welcome! How can I help you?"
});

// Optional controls
ChatWidget.open();                      // Opens the chat widget
ChatWidget.close();                     // Closes the chat widget
ChatWidget.sendMessage("Hi there!");    // Sends a message into the chat
</script>
```

### Tips

* Always place the script before the closing \</body> tag for optimal performance.
* The widget is mobile-friendly and adapts automatically to small screens.
* Session-based conversation history is preserved while the browser tab remains open.
* All communication is encrypted and secured.
* data-project-id is required for the widget to function.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.iotex.io/quicksilver/developers/ui-integrations/widget.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.