Mount options

Reference for mount() options: configure search input shape, overlay behavior, FAB position, suggested questions, and per-viewport overlay breakpoints.

The optional third argument to mount() is a MountOptions object that controls how a placement looks and behaves. Options are grouped by placement type: some apply to all search placements, others are exclusive to the search icon or floating action button. You can also configure how the search overlay opens and define per-viewport overrides with overlay breakpoints.

Search placement options

These options apply to SearchEmbed and SearchFab placements. They control the search input appearance, suggested questions, and overlay behavior.

placeholderPathstring

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

shapePathstring

Shape of the search input field. Accepts 'pill' or 'rounded-rectangle' (or the InputShape enum values InputShape.Pill / InputShape.RoundedRectangle).

shouldShowSuggestedQuestionsPathboolean

When true, the SDK displays suggested questions below or alongside the search input.

suggestedQuestionsModePathstring

Controls how suggested questions are displayed. Accepts 'animated' (cycle through questions) or 'static' (show all at once).

typographySourcePathstring

Where the placement inherits its font styles from. Accepts 'inherit-from-website' (matches the surrounding page) or 'inherit-from-theme' (uses the Inline AI theme). Also available as TypographySource.Website / TypographySource.Theme.

overlayTypePathstring

How the search results overlay appears. Accepts 'modal' (centered dialog) or 'drawer' (slides in from the side). Also available as OverlayType.Modal / OverlayType.Drawer.

backdropOpacityPathnumber

Opacity of the backdrop behind the overlay. Accepts a value between 0 (fully transparent) and 1 (fully opaque).

openOverlayOnPathstring

When the search overlay opens. Accepts 'onQuerySubmit' (opens after the user submits a query) or 'onFocus' (opens as soon as the input is focused). Also available as OpenOverlayOn.QuerySubmit / OpenOverlayOn.Focus.

var { Placement, InputShape, OpenOverlayOn, OverlayType } = window.InlineAI;
 
window.InlineAI.mount(Placement.SearchEmbed, 'search-container', {
  placeholder: 'Search for answers...',
  shape: InputShape.RoundedRectangle,
  shouldShowSuggestedQuestions: true,
  suggestedQuestionsMode: 'animated',
  overlayType: OverlayType.Modal,
  backdropOpacity: 0.6,
  openOverlayOn: OpenOverlayOn.Focus,
});

Overlay breakpoints

Overlay breakpoints let you override the overlay type, backdrop opacity, and open trigger at specific viewport widths. This is useful when you want a modal on desktop and a drawer on mobile. Each entry in overlayBreakpoints can specify minViewportWidth, maxViewportWidth, or both to define the range it applies to. When multiple breakpoints match the current viewport, the most specific one (narrowest range) wins.

overlayBreakpointsPathOverlayBreakpointConfig[]

Array of viewport-specific overlay configuration overrides. Each item can include the following fields:

var { Placement, OverlayType, OpenOverlayOn } = window.InlineAI;
 
window.InlineAI.mount(Placement.SearchEmbed, 'search-container', {
  overlayType: OverlayType.Modal,
  backdropOpacity: 0.6,
  overlayBreakpoints: [
    {
      minViewportWidth: 768,
      overlayType: OverlayType.Modal,
      backdropOpacity: 0.6,
    },
    {
      maxViewportWidth: 767,
      overlayType: OverlayType.Drawer,
      backdropOpacity: 1.0,
      openOverlayOn: OpenOverlayOn.Focus,
    },
  ],
});
Set top-level overlayType and backdropOpacity as your defaults, then use overlayBreakpoints only to override the values that differ at certain viewport sizes.
© 2026 Inline AI