Quick Start
Add your AI persona to any website with a single embed code. Replace YOUR_PERSONA_ID with your persona ID from the dashboard.
<div id="my-persona" style="width:400px;height:600px;"></div>
<script src="https://cdn.personaizer.com/widget.js#loader#YOUR_PERSONA_ID#my-persona"></script>The div is required — the widget renders into it. Style with CSS to set size.
Global State
These globals are set by widget.js and can be read at any time.
| Variable | Type | Description |
|---|---|---|
| window.PersonAIzerLoadProgress | number | Loading progress from 0 to 1. |
| window.PersonAIzerIsLoaded | boolean | Whether the Unity instance has loaded. |
| window.PersonAIzerLoadError | string | null | Error message if loading failed. |
| window.PersonAIzerUnityInstance | UnityInstance | The Unity WebGL instance (advanced use). |
Setup
Set callbacks on window.PersonAIzer before loading widget.js. After the widget loads, call methods on the same object.
// Set callbacks before loading the widget
window.PersonAIzer = {
onAppStateChanged: (state) => {
console.log("State:", state);
if (state === "live") {
// Persona is ready for conversation
}
},
onChatUpdated: (msg) => {
console.log(msg.Author + ": " + msg.Message);
}
};
// After widget loads, call methods:
// PersonAIzer.sendSystemMessage("Hello!");
// PersonAIzer.setTheme("dark");End User ID: widget.js automatically generates and persists a stable user ID in localStorage. To provide your own, set window.PERSONAIZER_END_USER_ID before loading widget.js.
Methods
All methods are available on window.PersonAIzer after the widget loads. Check getAppState() is "live" before calling interaction methods.
Returns the current lifecycle state of the widget.
Kick off the backend session from a user gesture (click/tap). Fires POST /api/sessions/start, opens the WebSocket, and unlocks audio in the same gesture. Required first call once appState === "loading" and the engine is ready — until then no backend traffic happens.
Resume from a mid-session standby (SPA navigate-away pause). On WebGL the conversation memory is preserved; on native targets it remains a hard reset. Not the way to bootstrap the first session — use startSession() for that.
Pause the session (e.g. user navigated to another page on the host site). Soft pause on WebGL — memory preserved; hard reset on native. Optional standby text.
Switch between dark and light theme.
Get the current theme.
Toggle fullscreen mode.
Check if widget is fullscreen.
Set avatar speech volume (0 to 1).
Get the current volume level.
Show or hide the debug overlay.
Check if debug overlay is visible.
Request the widget to close.
Send a system message. If triggerResponse is true (default), the persona will respond. If false, the message is added to memory only.
Retrieve recent chat messages. Pass count to limit results.
Request browser permission for a device.
Check if a device permission is granted.
List available devices of the given type.
Select a specific device by name, or null for default.
Get the currently selected device name.
Update the avatar's environment (background, lighting).
Get the current environment settings.
Check if the hologram dashboard is currently open.
Event Callbacks
Assign these on window.PersonAIzer before loading widget.js to receive events.
Fires when the widget lifecycle state changes.
Fires when queue position updates.
Fires when the consent animation begins.
Fires when the persona goes live.
Fires when a new chat message arrives.
Fires when a device permission changes.
Fires when a device is selected.
Fires when the hologram dashboard opens or closes.
Types
AppStateWidget lifecycle states
ChatMessageChat message object
ChatMessageTypeMessage author types
EnvironmentSettingsAvatar environment configuration