Embedded chat interface powered by AI & document search
Follow these simple steps to add the Distillery Chat Widget to your website:
Copy this script tag and paste it into your HTML file, preferably just before the closing </body> tag:
<script src="https://cloudflare-ai-worker-with-la.distillery-chatbot-chat-widget-preview.pages.dev/distillery-chat-widget.iife.js"></script>
The chat widget will automatically initialize and appear as a floating orange bubble in the bottom-right corner of your website. It's completely self-contained and works out of the box.
Here's a minimal HTML example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website with Chat Widget</title>
</head>
<body>
<h1>Welcome to My Site</h1>
<p>Your website content here...</p>
<!-- Embed the Distillery Chat Widget -->
<script src="https://cloudflare-ai-worker-with-la.distillery-chatbot-chat-widget-preview.pages.dev/distillery-chat-widget.iife.js"></script>
</body>
</html>
Full-page Chat:
Embedded Script:
API Worker:
Admin Panel:
The chat widget uses the following endpoints to communicate with the backend:
All origins are allowed, enabling the widget to work on any external website without CORS restrictions.
// In your _app.tsx or _document.tsx
import Script from 'next/script'
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Script
src="https://cloudflare-ai-worker-with-la.distillery-chatbot-chat-widget-preview.pages.dev/distillery-chat-widget.iife.js"
strategy="afterInteractive"
/>
</>
)
}
// In your main.ts or main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// Load chat widget
const script = document.createElement('script')
script.src = 'https://cloudflare-ai-worker-with-la.distillery-chatbot-chat-widget-preview.pages.dev/distillery-chat-widget.iife.js'
document.body.appendChild(script)
app.mount('#app')
// In your index.html, before closing </body> tag
<script src="https://cloudflare-ai-worker-with-la.distillery-chatbot-chat-widget-preview.pages.dev/distillery-chat-widget.iife.js"></script>
<script src="https://cloudflare-ai-worker-with-la.distillery-chatbot-chat-widget-preview.pages.dev/distillery-chat-widget.iife.js"></script>
Look for the orange chat bubble in the bottom-right corner of this page. Click it to open the chat window and start chatting with our AI assistant. Try asking questions about documents in the knowledge base.
1. Ensure the script tag is placed in your HTML
2. Verify JavaScript is enabled in your browser
3. Check the browser console for any errors (F12 → Console tab)
4. Make sure you're using the correct script URL
5. Check that your website allows external scripts
1. API backend may be down (check API status)
2. Check browser console for CORS errors
3. Verify your network connection
4. Try refreshing the page
The chat widget is fully responsive and automatically adjusts for mobile, tablet, and desktop screens. On mobile, it opens as a full-screen chat interface for better UX.
For questions or issues with integrating the chat widget, please contact the development team or check the documentation on this page. The widget is designed to be simple to integrate and requires no additional configuration.