Basic embed

Embed an AI-powered content block into any container element on your page using a simple element ID, CSS selector, or dynamic matcher.

The basic embed placement renders an AI-powered content block inside a container element you specify. It is the most straightforward targeted placement: point it at a div, pass any sizing options you need, and the SDK handles the rest. Use it when you want to surface contextually relevant AI content in a sidebar, below an article, or anywhere else on your page.

Mounting the placement

Pass Placement.BasicEmbed and a target to mount(). The target can be a string element ID for the simplest case:

window.InlineAI.mount(window.InlineAI.Placement.BasicEmbed, 'content-sidebar');

The call returns a placement ID string you can later pass to unmount().

The basic embed placement requires a target. Make sure the target element exists in the DOM before calling mount(). If you are mounting after a dynamic page load, wait for the element to appear before mounting.

Targeting the container

You have three options for specifying the target element.

// Shorthand string: looks up by element ID
window.InlineAI.mount(window.InlineAI.Placement.BasicEmbed, 'content-sidebar');
 
// Equivalent using the object form
window.InlineAI.mount(window.InlineAI.Placement.BasicEmbed, {
  containerId: 'content-sidebar',
});

Positioning and sizing

Use the injection target object to control where the placement renders relative to its container and how large it should be.

locationQueryInjectionLocation

Where to insert the placement relative to the target element. Options:

  • "above": sibling before the target
  • "below": sibling after the target
  • "prepend": first child of the target
  • "append": last child of the target

Use window.InlineAI.InjectionLocation enum values (e.g. InjectionLocation.Prepend).

widthQuerystring

Width of the placement container as a CSS value (e.g. "100%", "320px").

maxWidthQuerystring

Maximum width of the placement container as a CSS value.

heightQuerystring

Height of the placement container as a CSS value.

maxHeightQuerystring

Maximum height of the placement container as a CSS value.

breakpointsQueryBreakpointConfig[]

Responsive breakpoints. Each entry can set minViewportWidth, maxViewportWidth, width, and height. The placement only renders when a breakpoint matches the current viewport.

Examples

window.InlineAI.mount(window.InlineAI.Placement.BasicEmbed, 'content-sidebar');

For unmounting, SPA routing, and command-queue usage, see the programmatic control guide.

© 2026 Inline AI