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:

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

<!-- 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

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

Advanced: Programmatic Control

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

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