Injection targets

Learn the three ways to tell the Inline AI SDK where to inject a placement: by element ID, CSS selector, or dynamic tag and attribute matching.

The target parameter in mount() tells the SDK which DOM element to inject a placement into. You have three methods to choose from: a plain string shorthand for element IDs, a CSS selector for flexible matching, or dynamic tag-and-attribute rules for when stable IDs and classes aren't available. All three methods can be combined with positioning and sizing options to control exactly how the placement container appears on the page.

Targeting methods

The simplest way to specify a target is to pass the element's id attribute as a plain string. The SDK treats any string target as a containerId lookup; both forms below are equivalent.

// String shorthand (most common)
window.InlineAI.mount(window.InlineAI.Placement.SearchEmbed, 'header-search');
 
// Explicit containerId object, identical behavior
window.InlineAI.mount(window.InlineAI.Placement.SearchEmbed, { containerId: 'header-search' });
<div id="header-search"></div>
Use the string shorthand when you have a stable, unique element ID. It is the most concise option and is equivalent to passing { containerId: 'id' }.

Positioning with location

By default, the SDK appends the placement container as a child of the target element. You can change this with the location field using the InjectionLocation enum.

var { Placement, InjectionLocation } = window.InlineAI;
 
window.InlineAI.mount(Placement.KeyTakeaways, {
  selector: '.sidebar',
  location: InjectionLocation.Prepend,
});
ValueBehavior
InjectionLocation.AboveInsert as a sibling immediately before the target element
InjectionLocation.BelowInsert as a sibling immediately after the target element
InjectionLocation.PrependInsert as the first child inside the target element
InjectionLocation.AppendInsert as the last child inside the target element (default)

You can also use the raw string values ('above', 'below', 'prepend', 'append') in place of the enum.

Sizing the placement container

Control the dimensions of the injected container with width, height, maxWidth, and maxHeight. These accept any valid CSS size value.

window.InlineAI.mount(window.InlineAI.Placement.BasicEmbed, {
  selector: '.sidebar',
  width: '100%',
  maxWidth: '600px',
  height: 'auto',
  maxHeight: '400px',
});
Sizing fields on the injection target control the placement container element. To size the placement contents themselves, see the width and height options available on individual placement types.

Full example

The example below combines all three targeting approaches with positioning:

var { Placement, InjectionLocation } = window.InlineAI;
 
// Element ID: search bar in the header
window.InlineAI.mount(Placement.SearchEmbed, 'header-search');
 
// CSS selector: key takeaways above the sidebar
window.InlineAI.mount(Placement.KeyTakeaways, {
  selector: '.article-sidebar',
  location: InjectionLocation.Prepend,
});
 
// Dynamic matching: first div with class "content-area"
window.InlineAI.mount(Placement.BasicEmbed, {
  dynamic: {
    tagName: 'div',
    attributeName: 'class',
    attributeValue: 'content-area',
    elementIndex: 0,
  },
});
© 2026 Inline AI