RAG ChatsRAG Chats

Widget Installation

Choose the installation method that works best for your project. All methods provide the same functionality.

Method 1: Script Tag (Simplest)

The quickest way to add the widget. Just add this script tag before the closing </body> tag:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your content -->
  
  <!-- RAG Chats Widget -->
  <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>
</body>
</html>

Configuration via Data Attributes

You can configure the widget using data attributes:

<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"
  data-position=500">class="text-green-500">"bottom-left"
  data-primary-color=500">class="text-green-500">"#6366f1"
  data-welcome-message=500">class="text-green-500">"Hi! How can I help?"
  data-title=500">class="text-green-500">"Support Chat"
  500">async
></script>

Async Loading

The async attribute ensures the widget doesn't block your page from loading. The widget will initialize automatically when ready.

Method 2: NPM Package

For JavaScript/TypeScript projects with a build system:

-purple-500">npm install @rag-chats/widget

Then initialize the widget in your code:

500">import RagChatsWidget 500">from 500">class="text-green-500">'@rag-chats/widget';

RagChatsWidget.init({
  botId: 500">class="text-green-500">'YOUR_BOT_ID',
  apiKey: 500">class="text-green-500">'YOUR_API_KEY',
  theme: {
    primaryColor: 500">class="text-green-500">'#6366f1'
  }
});

TypeScript Support

The package includes TypeScript definitions. You get full type safety and autocomplete:

500">import RagChatsWidget, { WidgetConfig } 500">from 500">class="text-green-500">'@rag-chats/widget';

500">const config: WidgetConfig = {
  botId: 500">class="text-green-500">'YOUR_BOT_ID',
  apiKey: 500">class="text-green-500">'YOUR_API_KEY',
  theme: {
    primaryColor: 500">class="text-green-500">'#6366f1',
    backgroundColor: 500">class="text-green-500">'#ffffff',
  },
  onMessage: (message) => {
    console.log(500">class="text-green-500">'New message:', message.content);
  }
};

RagChatsWidget.init(config);

Method 3: iframe Embed

For complete style isolation or embedding in specific areas of your page:

<iframe
  src=500">class="text-green-500">"https:500">class="text-muted-foreground500">class="text-green-500">">//widget.ragchats.ai/embed?botId=YOUR_BOT_ID&apiKey=YOUR_API_KEY"
  width=500">class="text-green-500">"400"
  height=500">class="text-green-500">"600"
  frameborder=500">class="text-green-500">"0"
  allow=500">class="text-green-500">"clipboard-write"
></iframe>

Limited Features

The iframe embed doesn't support programmatic control or event handlers. Use the script tag or NPM package for full functionality.

Verifying Installation

After installation, verify the widget is working:

  1. Refresh your page
  2. Look for the chat button (default: bottom-right corner)
  3. Click to open and send a test message
  4. Check browser console for any errors

Common Issues

Widget not appearing?

  • Check that Bot ID and API Key are correct
  • Verify your domain is whitelisted in bot settings
  • Check browser console for errors
  • Ensure the script is loading (Network tab in DevTools)

CORS errors?

  • Add your domain to the allowed domains list in bot settings
  • localhost is automatically allowed for development

Style conflicts?

  • The widget uses Shadow DOM to isolate its styles
  • If you see issues, check for global CSS resets that might affect the widget container

Content Security Policy

If your site uses CSP, add these directives:

script-src 500">class="text-green-500">'self' https:500">class=500">class="text-green-500">"text-muted-foreground">//widget.ragchats.ai;
connect-src 500">class="text-green-500">'self' https:500">class=500">class="text-green-500">"text-muted-foreground">//api.ragchats.ai wss://api.ragchats.ai;
frame-src 500">class="text-green-500">'self' https:500">class=500">class="text-green-500">"text-muted-foreground">//widget.ragchats.ai;

Next Steps