Events overview | Inline AI

The Inline AI SDK emits events throughout its lifecycle: when it initializes, when a search overlay opens, when a placement mounts, and more. By subscribing to these events you can connect Inline AI to your own analytics pipeline, react to user interactions, synchronize UI state, or trigger custom behavior without polling or modifying SDK internals.

Subscribing with `on()`

Call window.InlineAI.on(event, handler) to register a listener. The method returns an unsubscribe function. Call it when you no longer need the listener.

var unsubscribe = window.InlineAI.on(window.InlineAI.Events.SearchOpen, function(data) {
  console.log('Search opened:', data.query);
});
 
// Stop listening later
unsubscribe();

You can register as many handlers as you like for the same event, and each returns its own independent unsubscribe function.

Unsubscribing with `off()`

If you prefer to manage subscriptions by handler reference rather than capturing the return value, use window.InlineAI.off(event, handler). You must pass the same function reference that was passed to on().

var { Events } = window.InlineAI;
 
function handleSearchOpen(data) {
  console.log('Search opened:', data.query);
}
 
window.InlineAI.on(Events.SearchOpen, handleSearchOpen);
 
// Later: must use the same reference
window.InlineAI.off(Events.SearchOpen, handleSearchOpen);

Using enum constants vs. raw strings

Every event has both an enum constant on window.InlineAI.Events and a raw string value. Both forms work everywhere; choose whichever is clearer in your codebase.

// These are equivalent:
window.InlineAI.on(window.InlineAI.Events.Ready, handler);
window.InlineAI.on('ready', handler);

Prefer the enum constants (Events.Ready, Events.SearchOpen, etc.) when writing code you'll maintain over time. They're less error-prone and make typos obvious at a glance.

Using `on()` with the command queue

If you need to subscribe before the SDK script has loaded, push an 'on' command to the command queue. Commands are buffered and replayed in order once the SDK is ready.

window.InlineAI = window.InlineAI || {};
window.InlineAI.cmd = window.InlineAI.cmd || [];
 
window.InlineAI.cmd.push(['on', window.InlineAI.Events.SearchOpen, function(data) {
  console.log('Search opened:', data.query);
}]);

You can also use the callback form to access the SDK instance directly:

window.InlineAI.cmd.push(function(sdk) {
  sdk.on(sdk.Events.SearchOpen, function(data) {
    analytics.track('search_opened', { query: data.query });
  });
});

Practical use cases

Analytics tracking. Send search queries and widget interactions to your analytics provider:

var { Events } = window.InlineAI;
 
window.InlineAI.on(Events.SearchOpen, function(data) {
  analytics.track('inline_search_opened', { query: data.query });
});
 
window.InlineAI.on(Events.SearchClose, function(data) {
  analytics.track('inline_search_closed', { method: data.method });
});
 
window.InlineAI.on(Events.WidgetOpen, function() {
  analytics.track('inline_widget_opened');
});

UI integration. Show or hide your own page elements in response to SDK state:

var { Events } = window.InlineAI;
 
window.InlineAI.on(Events.SearchOpen, function() {
  document.getElementById('site-header').classList.add('search-active');
});
 
window.InlineAI.on(Events.SearchClose, function() {
  document.getElementById('site-header').classList.remove('search-active');
});

Lifecycle management. Wait for the SDK or config to be ready before calling other methods:

var { Events } = window.InlineAI;
 
window.InlineAI.on(Events.Ready, function() {
  // Safe to call mount() now
  window.InlineAI.mount(window.InlineAI.Placement.KeyTakeaways, 'sidebar');
});
 
window.InlineAI.on(Events.ConfigLoad, function() {
  console.log('Publisher config loaded; placements may now reflect dashboard settings');
});

Placement tracking. Observe which placements are mounting and where:

var { Events } = window.InlineAI;
 
window.InlineAI.on(Events.PlacementMount, function(info) {
  console.log('Mounted:', info.type, '(id:', info.id + ') in', info.container);
});
 
window.InlineAI.on(Events.PlacementUnmount, function(info) {
  console.log('Unmounted:', info.type, '(id:', info.id + ')');
});

Complete example

The following snippet registers listeners for all event categories. Each handler is independent. Unsubscribe any one of them without affecting the others.

var { Events } = window.InlineAI;
 
// Lifecycle
window.InlineAI.on(Events.Ready, function() {
  console.log('SDK ready');
});
 
window.InlineAI.on(Events.ConfigLoad, function() {
  console.log('Config loaded');
});
 
// Search
window.InlineAI.on(Events.SearchOpen, function(data) {
  console.log('User searched:', data.query);
});
 
window.InlineAI.on(Events.SearchClose, function(data) {
  console.log('Search closed:', data.method);
});
 
// Widget
window.InlineAI.on(Events.WidgetOpen, function() {
  console.log('Widget opened');
});
 
window.InlineAI.on(Events.WidgetClose, function() {
  console.log('Widget closed');
});
 
// Placements
window.InlineAI.on(Events.PlacementMount, function(info) {
  console.log('Mounted:', info.type, info.id);
});
 
window.InlineAI.on(Events.PlacementUnmount, function(info) {
  console.log('Unmounted:', info.type, info.id);
});

Events.Ready fires when the SDK is initialized and ready to accept mount() calls. Publisher page configuration may still be loading at that point. If your code depends on dashboard config being present, wait for Events.ConfigLoad instead.

Subscribing with on()#

Unsubscribing with off()#

Using enum constants vs. raw strings#

Using on() with the command queue#

Practical use cases#