Chat Widget

Add an intelligent AI chat assistant to any website with just one line of code. Lightweight (~4KB gzipped), fully customizable, and works with any framework.

Features

• Lightweight — Under 5KB gzipped, won't slow down your site
• Customizable — Match your brand with themes, colors, and positions
• Isolated — Shadow DOM prevents style conflicts with your site
• Real-time — WebSocket streaming for instant responses
• Responsive — Works beautifully on all devices
• Persistent — Conversation history saved across sessions

Quick Start

The fastest way to add the widget is with a script tag. Add this code just before the closing </body> tag:

<script
  src=500">class="text-green-500">"https:500">class="text-muted-foreground500">class="text-green-500">">//widget.ragchats.ai/embed.js"
  data-bot-id=500">class="text-green-500">"YOUR_BOT_ID"
  data-api-key=500">class="text-green-500">"YOUR_API_KEY"
  500">async
></script>

Try It Live

Here's what the widget looks like with default settings. Click the chat button in the bottom-right corner of this page to try it!

Installation Methods

Customization

Make the widget feel like a natural part of your site with extensive customization options:

• Configuration — All available options and settings
• Theming — Colors, fonts, and visual customization
• Events — React to widget events in your application

API Methods

Control the widget programmatically:

500">class=500">class="text-green-500">"text-muted-foreground">// Open the chat window
RagChatsWidget.open();

500">class=500">class="text-green-500">"text-muted-foreground">// Close the chat window
RagChatsWidget.close();

500">class=500">class="text-green-500">"text-muted-foreground">// Check 500">if open
500">if (RagChatsWidget.isOpen()) {
  console.log(500">class="text-green-500">'Chat is visible');
}

500">class=500">class="text-green-500">"text-muted-foreground">// Update configuration
RagChatsWidget.updateConfig({
  theme: { primaryColor: 500">class="text-green-500">'#10b981' }
});

500">class=500">class="text-green-500">"text-muted-foreground">// Remove the widget
RagChatsWidget.destroy();

Browser Support

The widget supports all modern browsers:

• Chrome 80+
• Firefox 75+
• Safari 14+
• Edge 80+

Next Steps