Integrate Naoma AI demo sessions into your website. Add a demo button, embed the widget, or build a fully custom experience.
Add this snippet to every page where you want to start a demo session. Replace YOUR_CLIENT_ID with your unique client identifier.
<script>
window.NaomaConfig = {
clientId: 'YOUR_CLIENT_ID',
// recordingNotice: 'This session is being recorded' // optional
};
(function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];
if(d.getElementById(id))return;
js=d.createElement(s);js.id=id;
js.src='https://demo.naoma.dev/sdk/sdk.js';
fjs.parentNode.insertBefore(js,fjs);
})(document,'script','naoma-sdk');
</script>| Parameter | Type | Description |
|---|---|---|
clientIdrequired | string | Your unique client identifier. |
recordingNotice | string | Custom recording notice text to display in the demo session. |
Opens the demo agent in a modal overlay.
| Parameter | Type | Description |
|---|---|---|
config.sessionData | object | Data from the user session to pass to the demo (e.g., user ID, name, email, plan). |
config.language | string | Language code for the demo session (e.g., "en", "es", "de"). Defaults to the agent's default language. |
// Start demo with default settings
Naoma.startDemo();
// Start demo in Spanish
Naoma.startDemo({ language: 'es' });
// Start demo with session data
Naoma.startDemo({
sessionData: {
userId: '12345',
name: 'John Doe',
email: 'john@example.com',
plan: 'premium'
}
});
// Start demo with session data and language
Naoma.startDemo({
sessionData: { userId: '12345', name: 'John Doe' },
language: 'de'
});Tracks when a button becomes visible in the viewport.
| Parameter | Type | Description |
|---|---|---|
elementrequired | HTMLElement | The button element to track. |
const btn = document.getElementById("start-demo-btn");
Naoma.trackButtonView(btn);Returns the list of languages supported by the agent, sorted by the user's browser language preferences. Languages matching the user's preferences appear first.
Returns: Promise<string[]> — Array of language codes
const languages = await Naoma.getLanguages();
console.log(languages); // ["en", "es", "de"]
// Build a language selector
if (languages.length > 1) {
const select = document.createElement('select');
languages.forEach(lang => {
const option = document.createElement('option');
option.value = lang;
option.textContent = lang.toUpperCase();
select.appendChild(option);
});
select.onchange = () => Naoma.startDemo({ language: select.value });
}Performs pre-flight checks to determine if the client is eligible to run demo sessions. Use this to conditionally show or hide demo UI elements.
Returns: Promise<{allowed: boolean, reason: string|null}>
const { allowed, reason } = await Naoma.checkClient();
if (allowed) {
document.getElementById('demo-button').style.display = 'block';
} else {
console.log('Demo not available:', reason);
}The widget provides an interactive UI element that can be embedded on your site to offer demo experiences.
Configures the widget's position and data collection behavior.
| Parameter | Type | Description |
|---|---|---|
config.position | string | Widget position. Options: "top-left", "top-right", "bottom-left", "bottom-right", "top-center", "bottom-center", "left-center", "right-center". Default: "bottom-right". |
config.collectData | object | Configuration for collecting additional user data before starting the demo. |
collectData.dataKeyrequired | string | The key to use when adding collected data to sessionData. |
collectData.placeholder | string | Placeholder text for the input field. Default: "Enter your email". |
collectData.formTitle | string | Title text displayed above the input field. Default: "Start your demo". |
collectData.validator | function | Validation function that receives the input value and returns true if valid, or an error message string if invalid. |
// Position widget with email collection
Naoma.widget.configure({
position: 'bottom-left',
collectData: {
dataKey: 'email',
formTitle: 'Get started today',
placeholder: 'Enter your email',
validator: (value) => value && value.includes('@') || 'Valid email required'
}
});
// Position widget without data collection
Naoma.widget.configure({
position: 'top-right'
});Display or hide the widget on the page.
Naoma.widget.show();
Naoma.widget.hide();Expand the widget to show the full interface, or collapse it to its minimal state.
Naoma.widget.expand();
Naoma.widget.collapse();A full page example using both the demo button and the widget.
<!doctype html>
<html>
<head>
<script>
window.NaomaConfig = {
clientId: 'YOUR_CLIENT_ID'
};
(function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];
if(d.getElementById(id))return;
js=d.createElement(s);js.id=id;
js.src='https://demo.naoma.dev/sdk/sdk.js';
fjs.parentNode.insertBefore(js,fjs);
})(document,'script','naoma-sdk');
</script>
</head>
<body>
<button onclick="startDemo()" id="startDemoButton">
Get a demo now!
</button>
<script>
// Track button visibility
Naoma.trackButtonView(document.querySelector("#startDemoButton"));
// Start demo on click
function startDemo() {
Naoma.startDemo({
sessionData: {
name: "John Doe",
company: "Acme Inc",
userId: "12345"
}
});
}
// Configure widget
Naoma.widget.configure({
position: 'bottom-right',
collectData: {
dataKey: 'email',
formTitle: 'Get started today',
placeholder: 'Enter your email',
validator: (value) =>
value && value.includes('@') || 'Valid email required'
}
});
</script>
</body>
</html>TypeScript definitions are available for the SDK. Download the types file and add it to your project.
Save https://demo.naoma.dev/sdk/sdk.d.ts to your project (e.g. src/types/naoma-sdk.d.ts).
/// <reference path="./types/naoma-sdk.d.ts" />
Naoma.startDemo({
sessionData: { userId: "123", name: "John Doe" }
});Or import types directly:
import type { NaomaSDK, SessionData } from './types/naoma-sdk.d.ts';
const sessionData: SessionData = {
userId: "123",
name: "John Doe"
};
Naoma.startDemo({ sessionData });Our team can help you integrate Naoma into your website and get the most out of AI-powered demos.
Talk to Sales Team