​
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

ParameterDescriptionExample
data-project-idRequired - Your Project ID for authenticationyour-project-id
data-positionWidget position on screenbottom-right, bottom-left, top-right, top-left
data-button-colorHex color code for the chat button#3B82F6
data-button-sizeSize of the chat buttonsm (48px), md (56px), lg (64px)
data-titleTitle displayed in the chat window headerAI Assistant
data-initial-messagePre-filled message to start conversationHow 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.