@spectrumsense/spectrum-chat-dev
Version:
Embeddable AI Widget - Add trusted, evidence-based answers directly to your website. Simple installation, enterprise-grade security.
176 lines (161 loc) • 6.59 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single-Line Installation Demo</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
.demo-section {
margin: 30px 0;
padding: 20px;
border: 2px dashed #ddd;
border-radius: 8px;
background-color: #fafafa;
}
.demo-section h2 {
color: #666;
margin-top: 0;
}
.code-block {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 4px;
padding: 15px;
margin: 10px 0;
font-family: 'Courier New', monospace;
font-size: 14px;
overflow-x: auto;
}
.highlight {
background-color: #fff3cd;
padding: 2px 4px;
border-radius: 3px;
}
.note {
background-color: #d1ecf1;
border: 1px solid #bee5eb;
border-radius: 4px;
padding: 15px;
margin: 15px 0;
}
.note strong {
color: #0c5460;
}
</style>
</head>
<body>
<div class="container">
<h1>🚀 Spectrum Chat - Single-Line Installation Demo</h1>
<div class="note">
<strong>✨ Zero Configuration Required!</strong><br>
The widget automatically uses the correct API endpoint and sensible defaults.
</div>
<div class="demo-section">
<h2>📦 Production Version</h2>
<p>Automatically uses production API: <code>https://api.spectrumsense.co</code></p>
<div class="code-block">
<!-- Single-line installation - no configuration required! -->
<script src="https://unpkg.com/@spectrumsense/spectrum-chat@latest/dist/spectrum-chat.js"></script>
<spectrum-chat></spectrum-chat>
</div>
</div>
<div class="demo-section">
<h2>🔧 Development Version</h2>
<p>Automatically uses development API: <code>https://dev-api.spectrumsense.co</code></p>
<div class="code-block">
<!-- Development version for internal testing -->
<script src="https://unpkg.com/@spectrumsense/spectrum-chat-dev@latest/dist/spectrum-chat.js"></script>
<spectrum-chat></spectrum-chat>
</div>
</div>
<div class="demo-section">
<h2>🎨 Custom Configuration (Optional)</h2>
<p>Override any settings if you want to customize the appearance or behavior:</p>
<div class="code-block">
<script src="https://unpkg.com/@spectrumsense/spectrum-chat@latest/dist/spectrum-chat.js"></script>
<spectrum-chat
api-url="https://your-custom-api.com/chat"
tenant-id="your-tenant-id"
title="Your AI Assistant"
intro-text="Hello! How can I help you today?"
primary-color="#007bff"
position="bottom-left"
></spectrum-chat>
</div>
</div>
<div class="demo-section">
<h2>🌐 Live Demo</h2>
<p>Here's the actual widget running on this page:</p>
<!-- This is the actual widget - single line installation! -->
<script src="/dist/spectrum-chat.js"></script>
<spectrum-chat></spectrum-chat>
<script>
// Debug the widget
setTimeout(() => {
console.log('=== SINGLE LINE INSTALLATION DEBUG ===');
const chatElement = document.querySelector('spectrum-chat');
console.log('Chat element:', chatElement);
if (chatElement && chatElement.shadowRoot) {
const fab = chatElement.shadowRoot.querySelector('.spectrum-chat-fab');
console.log('FAB element:', fab);
console.log('Widget config:', chatElement.getConfig());
if (fab) {
console.log('✅ Widget loaded successfully!');
} else {
console.error('❌ FAB element not found!');
}
} else {
console.error('❌ Chat element or shadow root not found!');
}
}, 2000);
</script>
<div class="note">
<strong>Note:</strong> This demo uses the local dist/spectrum-chat.js file.
Make sure you've run <code>npm run build:local</code> first.
In production, you would use the unpkg CDN URLs shown above.
</div>
</div>
<div class="demo-section">
<h2>📋 What Happens Automatically</h2>
<ul>
<li><span class="highlight">API Endpoint</span>: Automatically uses the correct API based on package version</li>
<li><span class="highlight">Tenant ID</span>: Derived from your website domain (handled by API)</li>
<li><span class="highlight">Styling</span>: Sensible defaults for colors, positioning, and appearance</li>
<li><span class="highlight">Functionality</span>: Full chat capabilities with proper error handling</li>
<li><span class="highlight">Responsiveness</span>: Works on desktop and mobile devices</li>
</ul>
</div>
<div class="demo-section">
<h2>🔗 CDN Links</h2>
<p>Use these URLs in your production websites:</p>
<div class="code-block">
<!-- Production -->
https://unpkg.com/@spectrumsense/spectrum-chat@latest/dist/spectrum-chat.js
<!-- Development -->
https://unpkg.com/@spectrumsense/spectrum-chat-dev@latest/dist/spectrum-chat.js
<!-- Specific Version -->
https://unpkg.com/@spectrumsense/spectrum-chat@1.0.0/dist/spectrum-chat.js
</div>
</div>
</div>
</body>
</html>