@spectrumsense/spectrum-chat-dev
Version:
Embeddable AI Widget - Add trusted, evidence-based answers directly to your website. Simple installation, enterprise-grade security.
110 lines (101 loc) • 2.98 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spectrum Chat - Simple Integration Example</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 2rem;
background: #f9fafb;
}
.container {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
h1 {
color: #111827;
margin: 0 0 0.5rem 0;
}
p {
color: #6b7280;
line-height: 1.6;
}
.highlight {
background: #f0fdf4;
border: 1px solid #86efac;
border-radius: 6px;
padding: 1rem;
margin: 1.5rem 0;
}
.highlight-title {
color: #166534;
font-weight: 600;
margin-bottom: 0.5rem;
}
code {
background: #f3f4f6;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 0.875rem;
}
</style>
</head>
<body>
<div class="container">
<h1>🎉 Spectrum Chat Integration Example</h1>
<p>This page demonstrates the simplest way to add AI chat to your website.</p>
<div class="highlight">
<div class="highlight-title">✅ Chat Widget Loaded</div>
<p style="margin: 0; color: #166534;">
Look for the floating chat button in the bottom-right corner. Click it to start chatting!
</p>
</div>
<h2>How It Works</h2>
<p>
The chat widget is added with just a few lines of code before the closing <code></body></code> tag:
</p>
<h3>Step 1: Configure</h3>
<p>
Set your <code>apiUrl</code> and <code>siteKey</code> in the configuration object.
</p>
<h3>Step 2: Load Script</h3>
<p>
Include the Spectrum Chat script from unpkg CDN.
</p>
<h3>Step 3: Done!</h3>
<p>
The widget automatically appears and handles all security, session management, and token refresh.
</p>
<div class="highlight">
<div class="highlight-title">🔒 Security Features (Automatic)</div>
<ul style="color: #166534; margin: 0.5rem 0 0 0;">
<li>Site-key authentication</li>
<li>Origin validation</li>
<li>JWT session tokens</li>
<li>Automatic token refresh</li>
<li>Conversation protection</li>
</ul>
</div>
</div>
<!-- Spectrum Chat Widget Integration -->
<script>
// Configure the widget
window.SpectrumChatConfig = {
apiUrl: 'http://localhost:8000/api/v1/conversations',
siteKey: 'pub_bright_spectrum_htlzbncn',
title: 'Help Center',
enableCitations: true,
primaryColor: '#2563eb',
fabIcon: '💬'
};
</script>
<script src="https://unpkg.com/@spectrumsense/spectrum-chat@latest/dist/spectrum-chat.js"></script>
</body>
</html>