🚀 Plain HTML Example

🎉 Custom Element Implementation!

This demonstrates how customers would implement the chat widget on individual HTML pages using the custom element approach.

✨ Custom Element Usage

For plain HTML pages, customers need to add the chat widget to each page individually. This uses the custom element approach with the <spectrum-chat> tag.

<!-- Include the script once per page --> <script src="dist/spectrum-chat.js"></script> <!-- Add the chat widget with configuration --> <spectrum-chat api-url="http://localhost:8001/api/v1/conversations" tenant-id="your-tenant-id" title="AI Assistant" intro-text="Hello! How can I help you today?" primary-color="hsl(220 15% 25%)" user-color="hsl(220 15% 45%)" ai-color="hsl(220 15% 25%)" position="bottom-right" width="320px" height="350px" show-intro="true" citations="false" ></spectrum-chat>

🎉 Success Criteria

  • Chat widget appears in bottom-right corner
  • Customizable via HTML attributes
  • Works on individual pages
  • No global configuration needed
  • Easy to integrate per page

🔧 Configuration Options

The custom element supports many configuration options via HTML attributes. All attributes are optional and have sensible defaults.

<spectrum-chat api-url="http://localhost:8001/api/v1/conversations" tenant-id="your-tenant-id" title="AI Assistant" intro-text="Hello! How can I help?" primary-color="hsl(220 15% 25%)" user-color="hsl(220 15% 45%)" ai-color="hsl(220 15% 25%)" position="bottom-right" width="320px" height="350px" show-intro="true" citations="false" max-messages="100" browser-storage="true" fab-icon="✦" fab-color="hsl(220 15% 25%)" panel-border-radius="1rem" panel-shadow="0 8px 32px -8px rgba(0,0,0,0.2)" ></spectrum-chat>