Datalumo

Embedding

Embedding

Adding a Datalumo chatbot or search box integration to your website is incredibly simple and can be achieved by a single script tag and a few lines of JavaScript.

When you create an integration via the Datalumo interface, the embed code is already displayed to you. Further optimizations are available if you click on the Embed options button.

However, on this page you'll find comprehensive information about embedding, including some advanced features that are not (yet) available within the Datalumo interface.

Installation

Add the embed script to your page:

<script src="https://cdn.datalumo.app/embed.v1.js"></script>

Then initialize a widget using the fluent builder API. Your integration's public ID can be found on the integration's embed tab in the dashboard.

Chatbot

A floating button in the corner of the page that opens a chat window when clicked.

<script src="https://cdn.datalumo.app/embed.v1.js"></script>

<script>
Datalumo.chat('your-integration-id')
  .popup('bottom-right')
  .mount()
</script>

Position options: bottom-right (default), bottom-left.

A full-height panel that slides in from the side of the page.

<script>
Datalumo.chat('your-integration-id')
  .sidebar('right')
  .mount()
</script>

Side options: right (default), left.

Use .push() to push the page content aside instead of overlaying it:

<script>
Datalumo.chat('your-integration-id')
  .sidebar('right')
  .push()
  .mount()
</script>

Inline

Render the chat directly inside an existing element on your page.

<div id="chat-container" style="height: 600px;"></div>

<script>
Datalumo.chat('your-integration-id')
  .inline('#chat-container')
  .mount()
</script>

Chatbot options

Chain any of these methods before .mount():

Method Description
.popup(position) Floating button mode. Position: bottom-right, bottom-left
.sidebar(side) Sidebar drawer mode. Side: right, left
.inline(selector) Render inside a container element
.theme(value) Color theme: light, dark, or auto (default)
.color(value) Accent color as hex string (e.g. '#3b82f6') or { light, dark } object
.locale(code) Override widget language (e.g. 'de', 'ja', 'zh-tw')
.avatar(false) Hide the integration avatar in the header
.feedback(false) Hide thumbs up/down buttons on responses
.copy(false) Hide the copy button on responses
.branding() Show "Powered by Datalumo" branding
.icon(svg) Custom SVG markup for the launcher button
.trigger(selector) Use an existing element as the open/close trigger instead of the default launcher
.push() Push page content aside when sidebar opens (sidebar mode only)

A full-screen search modal that opens with Cmd+K / Ctrl+K.

<script src="https://cdn.datalumo.app/embed.v1.js"></script>

<script>
Datalumo.search('your-integration-id')
  .modal()
  .mount()
</script>

Optionally pass a CSS selector to render a trigger button:

<div id="search-trigger"></div>

<script>
Datalumo.search('your-integration-id')
  .modal('#search-trigger')
  .mount()
</script>

Inline

Render the search interface inside an existing element.

<div id="search-container"></div>

<script>
Datalumo.search('your-integration-id')
  .inline('#search-container')
  .mount()
</script>

Search box options

Method Description
.modal(selector?) Modal mode with Cmd+K shortcut. Optional trigger element selector
.inline(selector) Render inside a container element
.theme(value) Color theme: light, dark, or auto (default)
.color(value) Accent color as hex string or { light, dark } object
.locale(code) Override widget language
.placeholder(text) Custom placeholder text for the search input
.summary() Show an AI-generated summary above the search results
.branding() Show "Powered by Datalumo" branding

Theming

Color theme

The widget follows the user's system preference by default. Override with .theme():

<script>
Datalumo.chat('your-integration-id')
  .popup()
  .theme('dark')
  .mount()
</script>

Accent color

Set a custom accent color using a hex value:

<script>
Datalumo.chat('your-integration-id')
  .popup()
  .color('#3b82f6')
  .mount()
</script>

For different colors in light and dark mode, pass an object:

<script>
Datalumo.chat('your-integration-id')
  .popup()
  .color({ light: '#1d4ed8', dark: '#93c5fd' })
  .mount()
</script>

Localization

The widget automatically detects the browser language. You can override it with .locale():

<script>
Datalumo.chat('your-integration-id')
  .popup()
  .locale('de')
  .mount()
</script>

Supported locales:

Code Language
en English
zh-cn Chinese (Simplified)
zh-tw Chinese (Traditional)
nl Dutch
fr French
de German
hi Hindi
id Indonesian
it Italian
ja Japanese
ko Korean
pl Polish
pt Portuguese
ru Russian
es Spanish
th Thai
tr Turkish
vi Vietnamese

Chinese (zh) without a region defaults to Simplified. Hong Kong (zh-hk) and Macau (zh-mo) default to Traditional.

Instance API

.mount() returns a promise that resolves to a widget instance with the following methods:

Chatbot instance

const chat = await Datalumo.chat('id').popup().mount()

chat.open()      // Open the chat window
chat.close()     // Close the chat window
chat.newChat()   // Clear the conversation and start fresh
chat.destroy()   // Remove the widget from the page

Search instance

const search = await Datalumo.search('id').modal().mount()

search.open()           // Open the search modal
search.close()          // Close the search modal
search.search('query')  // Trigger a search programmatically
search.destroy()        // Remove the widget from the page

Custom trigger

Use your own button to open the widget instead of the built-in launcher:

<button id="help-btn">Need help?</button>

<script>
Datalumo.chat('your-integration-id')
  .popup()
  .trigger('#help-btn')
  .mount()
</script>

When using .trigger(), no floating launcher button is rendered. The specified element toggles the widget open and closed on click.