💬 BiteBolt Bubble Chat

Experience the easiest way to add AI chat to your website. Just one line of code!

✨ Simple Integration

How to Embed

Add this single line to your HTML before the closing </body> tag:

                <!-- Method 1: Auto-initialize with data attributes -->
<script
  src="./bubble/bubble-widget.js"
  data-api-url="YOUR_API_URL"
  data-chat-endpoint="/api/v1/assistant/chat"
  data-document-endpoint="/api/v1/documents"
  data-position="bottom-right"
  data-bubble-color="#007bff"
  data-bubble-size="60"
></script>
<link rel="stylesheet" href="./bubble/bubble-widget.css">
            

OR use JavaScript initialization:

                <script src="http://localhost:5173/bubble-widget.js"></script>
<script>
  SmartPosAgentChat.init({
    apiUrl: 'http://localhost:3007',
    chatEndpoint: '/api/v1/assistant/chat',
    documentEndpoint: '/api/v1/documents',
    position: 'bottom-right',
    bubbleColor: '#007bff',
    bubbleSize: 60
  });
</script>
            

⚙️ Configuration

Available Options

position

Bubble position: bottom-right, bottom-left, top-right, top-left

bubbleColor

Hex color code for the chat bubble (e.g., #007bff)

bubbleSize

Size of the chat bubble in pixels (default: 60)

apiUrl

Base URL of your backend API server

chatEndpoint

Chat API endpoint path

documentEndpoint

Document API endpoint path

🎯 Features

What You Get

🚀 Zero Configuration

Works out of the box with sensible defaults

📱 Responsive

Perfect on desktop, tablet, and mobile

⚡ Fast Loading

Optimized bundle size and lazy loading

🎨 Customizable

Match your brand with custom colors

💬 Real-time Chat

Streaming responses for instant feedback

🌐 Universal

Works with any website or framework

👉 Look at the bottom-right corner!

Click the chat bubble to start a conversation with BiteBolt AI