Key takeaways

Render an AI-generated summary block inside a target element to give readers a quick overview of your article or long-form content.

The key takeaways placement renders an AI-generated summary of your page content inside a target element. It reads the article or long-form content on the page and produces a concise list of key points, giving readers a quick overview before they dive in. This placement is well suited for sidebars, article introductions, or any position near the top of your content where a summary adds value.

Mounting the placement

Pass Placement.KeyTakeaways and a target to mount(). The target is typically a CSS selector or an element ID.

window.InlineAI.mount(
  window.InlineAI.Placement.KeyTakeaways,
  {
    selector: '.article-sidebar',
    location: window.InlineAI.InjectionLocation.Prepend,
    maxWidth: '400px',
  }
);

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

The key takeaways placement requires a target. The SDK generates the summary based on the page's content, so the placement works best on pages with substantial readable text.

Targeting the container

window.InlineAI.mount(window.InlineAI.Placement.KeyTakeaways, 'article-summary');

Positioning and sizing

locationQueryInjectionLocation

Where to insert the placement relative to the target element:

  • window.InlineAI.InjectionLocation.Above: sibling before the target
  • window.InlineAI.InjectionLocation.Below: sibling after the target
  • window.InlineAI.InjectionLocation.Prepend: first child of the target
  • window.InlineAI.InjectionLocation.Append: last child of the target
widthQuerystring

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

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 with minViewportWidth, maxViewportWidth, width, and height per entry.

Examples

window.InlineAI.mount(window.InlineAI.Placement.KeyTakeaways, 'article-summary');

Prepending the key takeaways block to your article container (using InjectionLocation.Prepend) places it above your content automatically, without needing a dedicated element in your HTML.

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

© 2026 Inline AI