The widget — Datalumo docs

Put search and chat on your site with one line of HTML. No build step. The widget loads from your own instance, so it's always in sync with your content.

Get a key for your site

The widget runs in the browser, so it uses a publishable key (pk_…) instead of your admin key. Create one in admin under your app's Deploy tab, and lock it to your domain. It can only mint short-lived tokens for the sites you allow, so it's safe to put in your page.

Add it to a page

Load the script once, then drop in an element where you want the widget.

Search box, inline:

<script src="https://your-domain/widget/datalumo-widget.iife.js" defer></script>

<div
  data-datalumo-search
  data-app="support-bot"
  data-base="https://your-domain"
  data-key="pk_your_publishable_key"
  data-layout="inline"
  style="min-height: 46px"
></div>

The min-height reserves the box's space so the page doesn't jump when the widget loads. The script is deferred (good for page speed), so it mounts a moment after the page renders; without a reserved height the slot starts at zero and pushes content down when the box appears. Set it to roughly the height of the search field (an inline box) or your trigger button (a modal layout).

Chat, as a floating bubble:

<div
  data-datalumo-chat
  data-app="support-bot"
  data-base="https://your-domain"
  data-key="pk_your_publishable_key"
  data-layout="bubble"
  data-accent="#0171e3"
></div>

Layouts

`data-layout`	What you get
`inline`	Fills the element it's in
`bubble`	Floating button with a popup
`sidebar`	Slide-in panel
`modal`	Search only: a Command-K palette

Make it yours

Add these attributes to match your site:

data-accent sets the accent color.
data-name and data-greeting set the title and opening line.
data-locale sets the interface language. Without it, the widget follows the visitor's browser. Supported: English (en), Dutch (nl), German (de), French (fr), Spanish (es), Portuguese (pt), Italian (it), Greek (el), Simplified Chinese (zh-Hans), Traditional Chinese (zh-Hant), Japanese (ja), Korean (ko), Thai (th), Hindi (hi), Nepali (ne).
data-voice adds microphone dictation to chat, where the browser supports it.
data-theme controls light and dark. By default the widget follows the visitor's system setting. Set it to light or dark to fix the mode, or to class to follow your own site's dark mode (a dark class on <html> or <body>, the Tailwind and Flux convention), updated live as your site toggles it.

data-locale sets only the widget's own text (buttons, labels, the default greeting). It does not limit answers: the assistant replies in whatever language the visitor writes in.

Other ways to authenticate

The publishable key is the right choice for most sites. Two alternatives:

Static token (data-token="dlt_…"): handy for a quick test.
Backend endpoint (data-token-endpoint="…"): your server mints tokens with the admin API and returns them. Use this when you want to tie widget access to your own logins.

See Keys and access for the full picture.

For developers

Building your own UI in React, Vue, or anything else? Use the headless client instead of the widget:

import { createClient } from "@datalumo/client";

const client = createClient({
  baseUrl: "https://your-domain",
  app: "support-bot",
  publishableKey: "pk_…",
});

const { results } = await client.search({ query: "refunds" });

for await (const event of client.chatStream({ message: "How do refunds work?" })) {
  if (event.type === "delta") process.stdout.write(event.text);
}

It covers search, chat (with streaming), summaries, and analytics events. The full method list and every option is in the API reference at /docs.

One gotcha: CORS

The widget calls your instance from your site's domain, so that domain has to be allowed. Add it to the publishable key's origin list (and to auth.cors.allowedOrigins if you've set one). If the widget loads but requests fail, this is almost always why.