Add AI chat to your website

Website Chat Widget

Add an AI-powered chat widget to your website in minutes.

Overview

The Vindex Ai chat widget provides a drop-in solution for adding conversational AI to any website. It handles all the complexity of API integration, session management, and UI rendering.

Quick Embed

Step 1: Get Your Channel ID

Go to Channels in the dashboard
Open your channel
Copy the Channel ID from the channel overview card

Step 2: Add to Your Website

Add this code to your website's HTML, preferably before the closing

text

</body>

tag:


html
<script>
  window.Vindex AiConfig = {
    siteId: 'your-channel-id-here',
    baseUrl: 'https://ai.vindex.ai', // Your AI Gateway domain
    position: 'bottom-right',
    theme: 'auto'
  };
</script>
<script src="https://ai.vindex.ai/build/assets/widget.js"></script>

That's it! The chat widget will appear on your website.

Customization

Position

Change where the widget appears:


javascript
window.Vindex AiConfig = {
  siteId: 'your-channel-id',
  position: 'bottom-right' // Options: bottom-right, bottom-left, top-right, top-left
};

Theme

Choose a visual theme:


javascript
window.Vindex AiConfig = {
  siteId: 'your-channel-id',
  theme: 'dark' // Options: light, dark, auto
};

Custom Greeting

Set a custom welcome message:


javascript
window.Vindex AiConfig = {
  siteId: 'your-channel-id',
  greeting: 'Hi! How can I help you today?'
};

Configuration Options

Option	Type	Default	Description
text `siteId`	string	required	Your channel's unique identifier
text `baseUrl`	string	text `null`	Absolute URL to your AI Gateway hosting
text `position`	string	text `'bottom-right'`	Widget position
text `theme`	string	text `'auto'`	Visual theme
text `greeting`	string	text `null`	Custom greeting message
text `poweredBy`	boolean	text `true`	Show "Powered by Vindex Ai"
text `height`	string	text `'500px'`	Chat window height
text `width`	string	text `'350px'`	Chat window width

Advanced: API Integration

For custom implementations, see our API Reference.