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