# 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.