Embeddable Widget

The DokuBrain widget lets you embed document search and AI chat into any website. Your users can search your document corpus and ask questions — all within a chat interface on your site.

Quick setup

Add the widget to your site with a single script tag:

Add to your HTML

<script
  src="https://api.dokubrain.com/js/widget.js"
  data-corpus-id="corp_abc123"
  data-api-key="dk_live_..."
  data-theme="light"
  async
></script>

The widget appears as a floating chat button in the bottom-right corner.

Configuration

Attribute	Type	Default	Description
`data-corpus-id`	string	required	Corpus to search against
`data-api-key`	string	required	Your API key
`data-theme`	string	`"light"`	`"light"` or `"dark"`
`data-position`	string	`"bottom-right"`	Widget position
`data-title`	string	`"Ask anything"`	Chat window title
`data-placeholder`	string	`"Type a question..."`	Input placeholder
`data-primary-color`	string	`"#0a0a0c"`	Accent color

JavaScript API

Control the widget programmatically:

Widget API

// Open the widget
window.DokuBrain.open();
 
// Close the widget
window.DokuBrain.close();
 
// Send a query programmatically
window.DokuBrain.query("What are the payment terms?");
 
// Listen for events
window.DokuBrain.on('message', (data) => {
  console.log('Answer:', data.answer);
  console.log('Sources:', data.sources);
});

Styling

The widget respects your data-theme and data-primary-color settings. For deeper customization, override CSS variables:

:root {
  --dokubrain-radius: 12px;
  --dokubrain-font: "Inter", sans-serif;
}

Embeddable Widget

Quick setup

Configuration

JavaScript API

Styling

On this page