This demo page shows how to embed the Snackz Chat Widget into any website using a simple script tag.
The widget appears as a floating chat bubble that users can click to open a conversation with our literary assistant.
<!-- For production websites -->
<script src="https://cdn.snackz.ai/snackz-chat-loader.iife.js"></script>
<!-- For local testing (this demo page uses this) -->
<!-- <script src="./snackz-chat-loader.iife.js"></script> -->
<!-- Configure before loading the script -->
<script>
window.SnackzChatConfig = {
position: 'bottom-right', // 'bottom-left', 'top-right', 'top-left'
theme: 'light', // 'dark', 'auto'
primaryColor: '#667eea',
// For production, specify full CDN URLs:
widgetScript: 'https://cdn.snackz.ai/snackz-chat.umd.cjs',
widgetStyles: 'https://cdn.snackz.ai/style.css'
};
</script>
<script src="https://cdn.snackz.ai/snackz-chat-loader.iife.js"></script>
Note: The loader script automatically handles React dependency loading. If the host page
already uses React 18, it will use the existing instance instead of loading from CDN.
🚀 Production vs Local Testing: Use https://cdn.snackz.ai/ URLs for production websites.
This demo page uses local files (./) so it works when opened directly or with a local server.
⚠️ CDN Not Available Yet: The cdn.snackz.ai domain is not active yet.
For now, use local files or configure your own CDN URLs in the advanced configuration below.
🔧 CORS Configuration: When deploying to production, include the _headers file
in your CDN directory to allow cross-origin requests from any website.
Features
- 🎯 Floating chat bubble that starts collapsed
- 💬 Interactive chat interface with sample literary conversations
- 📱 Responsive design that works on all devices
- 🎨 Beautiful gradient styling with smooth animations
- 🔧 Easy to integrate with just a few script tags
- 📚 Pre-loaded with sample book recommendations and discussions
Manual Initialization
If you need more control over when the widget initializes, you can use the manual API:
// Initialize manually
window.SnackzChat.initChatWidget();
// Or use the exported functions
import { ChatWidget, initChatWidget } from 'snackz-chat';