Embed the widget with minimal code

Embedding

Embed the widget in static sites or frameworks with minimal code.

Basic embed


html
<script>
  window.Vindex AiConfig = {
    siteId: 'YOUR_SITE_ID',
    position: 'bottom-right',
    brandColor: '#0ea5e9', // Optional: Custom brand color
    width: 400,            // Optional: Width in pixels or string (e.g. '100%')
    title: 'My Assistant', // Optional: Custom header title
    suggestions: [         // Optional: Custom suggestion chips
      'How do I buy?',
      'Pricing'
    ]
  };
</script>
<script src="https://ai.vindex.ai/build/assets/widget.js"></script>

Configuration Options

Option	Type	Default	Description
text `siteId`	text `string`	Required	Your unique Channel API Key.
text `position`	text `string`	text `'bottom-right'`	Position of the widget: text `bottom-right` , text `bottom-left` , text `top-right` , text `top-left` .
text `brandColor`	text `string`	text `'#0ea5e9'`	Hex or CSS color for the primary brand elements.
text `width`	text `number \| string`	text `400`	Width of the chat panel.
text `title`	text `string`	text `'AI Assistant'`	Title shown in the header.
text `welcomeMessage`	text `string`	text `'Active now'`	Sub-text shown in the header.
text `suggestions`	text `string[]`	text `[]`	List of quick-action message chips to show in new chats.

Notes

Load the script once per page
Place before
text
```
</body>
```
Use a server-side proxy for any sensitive logic

Live Demo

You can see a live version of the chat widget in the bottom-right corner of this page! This is the standalone widget your users will see when you embed it on your site.

See it in action

Interact with our floating assistant directly on this page.