Where the widget sits and how it looks decide how many readers ever ask it anything. These are the choices that make the most difference. A well-used assistant:
  1. Is front and center: readers see it before they go looking for it.
  2. Has more than one way in: it is reachable from wherever the reader is.
  3. Goes beyond the docs: it is on every site where your users have questions.
  4. Feels native: it looks like part of your product.
  5. Stands out: its colors contrast with the page.
  6. Sits in the search flow: answers appear where readers already search.

​
1. Front and center

Put Ask AI where the reader’s eye already is, not only in a small corner button. Open the widget from any button of your own: 
<button onclick="window.KeluWidget.open()">Ask our AI assistant</button>
For a hero input that asks straight away, name the button and the field it reads: 
<input id="hero-question" placeholder="Ask anything about Acme" />
<button id="hero-ask">Ask</button>

<script async src="https://widget.kelu.dev/kelu-widget.js"
  data-knowledge-base-id="YOUR_KNOWLEDGE_BASE_ID"
  data-client-key="kl_pk_..."
  data-modal-override-open-selector-ask-ai="#hero-ask"
  data-open-query-from="#hero-question"></script>
Clicking Ask opens the chat and sends what the reader typed. See Functions for everything you can call.

​
2. Multiple entry points

A pattern that works: a prominent element on the landing page, an Ask AI button beside the search box in the header, and the corner button everywhere else. The header button needs no markup of yours: 
<script async src="https://widget.kelu.dev/kelu-widget.js"
  data-knowledge-base-id="YOUR_KNOWLEDGE_BASE_ID"
  data-client-key="kl_pk_..."
  data-launcher-button-anchor-selector="#search-bar-entry"
  data-launcher-button-floating="true"></script>
Every entry point opens the same panel. See Your own button in the header.

​
3. Beyond the docs

Add the same script tag to your marketing site, pricing page or community forum. Before you do:
  • Allow each site’s origin. A public client key’s Allowed origins is fixed when you create the key. An empty list allows any origin; a site not on the list gets 403, so create a new key to add one. A data-widget-id embed also checks the widget’s own Allowed origins (Integrations → Website widget), which you can edit.
  • Consider one widget per site. Each widget has its own name, welcome message, starter questions and voice, and you change them in the dashboard without touching the site.

​
4. Feels native

  • Name, logo and color: data-product-name, data-product-logo, data-brand-color.
  • Your site’s dark mode: data-color-scheme-selector="html.dark" follows your theme toggle. See Theming.
  • Your fonts and size: data-font-family, and data-scale-factor to make the whole panel larger or smaller (default 1).
  • A voice: pick a customization under Voice on the widget for its assistant name, tone and guardrails.
  • One part restyled: Component styles.
For full control, build your own interface with the Web SDK or the React component.

​
5. High-contrast colors

Make the Ask AI button stand apart from the page, with a contrasting color or a larger size.
AttributeWhat it controls
data-brand-colorThe accent: launcher, send button, links. Text on it is picked for contrast automatically
data-launcher-button-background-colorThe launcher’s background, separately from the accent
data-launcher-button-label-colorThe launcher’s label
data-launcher-button-sizeThe corner button’s size. Default 60px
data-surface-colorThe panel background
data-text-colorThe main text color
data-color-schemelight (default), dark or auto
Add -dark for the dark-mode value, for example data-surface-color-dark. In dark mode, surface, text and border colors fall back to the widget’s own dark defaults, while data-brand-color and component styles such as data-launcher-button-background-color keep their light value until you set the -dark one. Keyword search returns pages to read; the assistant returns the answer. Three ways to put them side by side:
  1. The built-in Search tab. data-search-mode-enabled="true" adds page search beside the chat. See Search mode.
  2. Your search box, carried into the chat. An Ask AI button next to your search box, with data-open-query-from pointing at the box, sends what the reader already typed. See Your own button in the header.
  3. The search view mode. data-view-mode="search" with data-search-input="#your-search-box": pressing Enter in your search box opens the panel and asks. There is no launcher in this mode, and the field must be on the page when the widget loads.

​
Monitor and iterate

  • The knowledge base’s analytics: questions per day, feedback, and the questions the assistant could not answer.
  • Your own analytics, fed by the widget’s events: opens, starter questions clicked, answers rated.
Move the entry points readers do not find, and fill the gaps their questions show.