Embeddable Widget

Add IntelliRepo's AI-powered chat directly to your website, intranet, or application. Users can ask questions without leaving your platform.

Quick Start

Add these lines to your HTML:

<script src="https://api.intellirepo.ai/widget/intellirepo-chat.js"></script>
<script>
  IntelliRepoChat.init({
    apiKey: 'rh_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
  });
</script>

A chat button appears in the bottom-right corner. Click it to open the chat interface.

Configuration

Customize the widget with these options:

IntelliRepoChat.init({
  // Required
  apiKey: 'rh_live_xxx',
 
  // Optional: Limit to specific collection
  collectionId: 'uuid-of-collection',
 
  // Optional: Customize appearance
  primaryColor: '#4F46E5',
  position: 'right',  // 'left' or 'right'
 
  // Optional: Customize text
  title: 'Ask a Question',
  placeholder: 'Type your question...',
  welcomeMessage: 'Hi! How can I help you today?'
});

All Options

Option	Type	Default	Description
`apiKey`	string	required	API key with `chat` scope
`collectionId`	string	null	Limit to one collection
`primaryColor`	string	`#4F46E5`	Theme color (hex)
`position`	string	`right`	Button position
`title`	string	`Ask a Question`	Chat window title
`placeholder`	string	`Type your question...`	Input placeholder
`welcomeMessage`	string	null	Initial assistant message

Customization

Colors

IntelliRepoChat.init({
  apiKey: 'rh_live_xxx',
  primaryColor: '#10B981'  // Emerald green
});

The primary color affects the chat button, header, and send button.

Position

IntelliRepoChat.init({
  apiKey: 'rh_live_xxx',
  position: 'left'  // Button on bottom-left
});

Programmatic Control

Open/Close

// Open the chat
IntelliRepoChat.open();
 
// Close the chat
IntelliRepoChat.close();
 
// Toggle open/closed
IntelliRepoChat.toggle();

Send a Message

// Pre-fill and send a question
IntelliRepoChat.ask('What is the return policy?');

Remove Widget

// Remove widget from page
IntelliRepoChat.destroy();

Collection Scoping

Single Collection

Limit the widget to search only one collection:

IntelliRepoChat.init({
  apiKey: 'rh_live_xxx',
  collectionId: 'your-collection-uuid'
});

All Collections

Omit collectionId to search all collections the API key can access.

Use Case Examples

Customer Support Portal

<script src="https://api.intellirepo.ai/widget/intellirepo-chat.js"></script>
<script>
  IntelliRepoChat.init({
    apiKey: 'rh_live_support_key',
    collectionId: 'faq-collection-id',
    title: 'Need Help?',
    welcomeMessage: 'Hi! Ask me anything about our products.',
    primaryColor: '#2563EB'
  });
</script>

Internal Knowledge Base

<script src="https://intranet.company.com/widget/intellirepo-chat.js"></script>
<script>
  IntelliRepoChat.init({
    apiKey: 'rh_live_internal_key',
    title: 'Company Wiki',
    welcomeMessage: 'Ask about policies, procedures, or benefits.'
  });
</script>

Learning Platform

<script src="https://lms.company.com/widget/intellirepo-chat.js"></script>
<script>
  IntelliRepoChat.init({
    apiKey: 'rh_live_training_key',
    collectionId: 'training-materials-uuid',
    title: 'Course Assistant',
    primaryColor: '#7C3AED'
  });
</script>

Security

API Key Scopes

The widget API key should have:

read scope (to search documents)
chat scope (to use chat endpoints)

Never use a key with write scope in a public widget.

Collection Restrictions

For public-facing widgets, create an API key restricted to specific collections:

Go to Settings > API Keys
Create a key with read and chat scopes
Restrict to only public/safe collections

Rate Limiting

Widget queries count toward your plan's query limit. Monitor usage in Settings > Usage.

Troubleshooting

Widget Not Appearing

Check browser console for JavaScript errors
Verify the API key is valid
Ensure the script URL is correct
Check for JavaScript conflicts

"Unauthorized" Errors

Verify API key has chat scope
Check if key was revoked
Ensure collection access is correct (if restricted)

Slow Responses

Response time depends on document count
Consider scoping to a specific collection
Check your internet connection

CORS Errors

If you see CORS errors, contact support to add your domain to the allowed origins.

CSS Customization

The widget uses shadow DOM for isolation. Override styles with CSS:

.intellirepo-chat-button {
  /* Customize the floating button */
}
 
.intellirepo-chat-window {
  /* Customize the chat window */
}

Single Page Applications

For SPAs (React, Vue, Angular), initialize after the page loads:

// React example
useEffect(() => {
  IntelliRepoChat.init({ apiKey: 'rh_live_xxx' });
 
  return () => {
    IntelliRepoChat.destroy();
  };
}, []);

Need Help?

Contact our support team if you need help with the widget.

Python SDK Pricing Plans