Search embed

Mount a full-width AI search input bar inside any container element, with control over shape, overlay behavior, and open triggers.

The search embed placement renders a full-width search input bar directly inside a container element you specify. When a user interacts with it, the SDK opens a search overlay. You control the input shape, when the overlay opens, and how it appears (as a modal or a drawer). This placement is a good fit for prominent search areas like page headers, hero sections, or dedicated search pages.

Mounting the placement

Pass Placement.SearchEmbed as the first argument to mount(), a target as the second, and an options object as the third.

window.InlineAI.mount(
  window.InlineAI.Placement.SearchEmbed,
  'search-container',
  {
    placeholder: 'Search for answers...',
    shape: window.InlineAI.InputShape.RoundedRectangle,
    openOverlayOn: window.InlineAI.OpenOverlayOn.Focus,
  }
);

The target can be an element ID string, a CSS selector object, or a dynamic matcher. The call returns a placement ID string that you can pass to unmount() later.

The search embed placement requires a target. If you want a search button that floats over the page without a container, use the Search FAB placement instead.

Targeting the container

// By element ID (shorthand)
window.InlineAI.mount(window.InlineAI.Placement.SearchEmbed, 'header-search');
 
// By CSS selector
window.InlineAI.mount(window.InlineAI.Placement.SearchEmbed, {
  selector: '[data-role="search"]',
});
 
// By dynamic element matching
window.InlineAI.mount(window.InlineAI.Placement.SearchEmbed, {
  dynamic: { tagName: 'div', attributeName: 'class', attributeValue: 'search-area' },
});

Options

placeholderQuerystring

Placeholder text displayed inside the search input before the user types.

shapeQueryInputShape

Shape of the search input. Accepts window.InlineAI.InputShape.Pill ("pill") or window.InlineAI.InputShape.RoundedRectangle ("rounded-rectangle").

openOverlayOnQueryOpenOverlayOn

When to open the search overlay. Use window.InlineAI.OpenOverlayOn.Focus ("onFocus") to open as soon as the input receives focus, or window.InlineAI.OpenOverlayOn.QuerySubmit ("onQuerySubmit") to open only after the user submits a query.

overlayTypeQueryOverlayType

How the search overlay appears. window.InlineAI.OverlayType.Modal ("modal") centers it over the page; window.InlineAI.OverlayType.Drawer ("drawer") slides it in from the side.

backdropOpacityQuerynumber

Opacity of the backdrop behind the overlay, as a number between 0 and 1.

shouldShowSuggestedQuestionsQueryboolean

Whether to show suggested questions in the search overlay.

suggestedQuestionsModeQuerySuggestedQuestionsMode

Display mode for suggested questions. "animated" cycles through them; "static" shows them all at once.

typographySourceQueryTypographySource

Where the placement inherits its typography. "inherit-from-website" uses your site's fonts; "inherit-from-theme" uses the Inline AI theme fonts.

overlayBreakpointsQueryOverlayBreakpointConfig[]

Override overlay settings at specific viewport widths. Each entry can set overlayType, backdropOpacity, and openOverlayOn. The most specific (narrowest) matching breakpoint wins.

Full example

window.InlineAI.mount(
  window.InlineAI.Placement.SearchEmbed,
  'search-container',
  {
    placeholder: 'Search for answers...',
    shape: window.InlineAI.InputShape.RoundedRectangle,
    openOverlayOn: window.InlineAI.OpenOverlayOn.Focus,
    overlayType: window.InlineAI.OverlayType.Modal,
    backdropOpacity: 0.6,
    overlayBreakpoints: [
      {
        maxViewportWidth: 767,
        overlayType: window.InlineAI.OverlayType.Drawer,
        backdropOpacity: 1.0,
      },
    ],
  }
);

Use overlayBreakpoints to show a modal on desktop and a full-screen drawer on mobile. Set maxViewportWidth: 767 on the mobile breakpoint and minViewportWidth: 768 on the desktop breakpoint.

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

© 2026 Inline AI