Search FAB

Add a floating action button for AI search anywhere on the page without a target element. It attaches directly to the document body.

The search FAB (floating action button) placement renders a persistent, floating button that users can click to open the AI search overlay. Unlike the search embed and search icon placements, the search FAB is a body-level placement: it attaches directly to document.body and does not require you to designate a container element. You control its horizontal position and offsets from the page edges using the fabPosition option.

Mounting the placement

Because the search FAB is a body-level placement, you can omit the target argument entirely. Pass Placement.SearchFab and an options object:

window.InlineAI.mount(
  window.InlineAI.Placement.SearchFab,
  undefined,
  {
    fabPosition: {
      horizontalPosition: window.InlineAI.FabPosition.Right,
      rightOffset: '20px',
      bottomOffset: '24px',
    },
  }
);

Passing undefined as the target makes it clear the placement does not need one. You can also omit the target argument entirely:

window.InlineAI.mount(window.InlineAI.Placement.SearchFab);

The search FAB attaches to document.body. It renders over your page content and does not affect your page layout.

FAB position options

Use the fabPosition object to control where the button appears.

fabPosition.horizontalPositionQueryFabPosition

Horizontal position of the FAB. Use window.InlineAI.FabPosition.Left ("left"), window.InlineAI.FabPosition.Right ("right"), or window.InlineAI.FabPosition.Center ("center").

fabPosition.leftOffsetQuerystring

Distance from the left edge of the viewport as a CSS value (e.g. "20px"). Applies when horizontalPosition is Left or Center.

fabPosition.rightOffsetQuerystring

Distance from the right edge of the viewport as a CSS value (e.g. "20px"). Applies when horizontalPosition is Right or Center.

fabPosition.bottomOffsetQuerystring

Distance from the bottom edge of the viewport as a CSS value (e.g. "24px").

fabPosition.maxWidthQuerystring

Maximum width of the FAB button as a CSS value.

Search overlay options

The search FAB shares search overlay options with the other search placements.

placeholderQuerystring

Placeholder text shown in the search input when the overlay opens.

overlayTypeQueryOverlayType

How the search overlay appears. window.InlineAI.OverlayType.Modal ("modal") or window.InlineAI.OverlayType.Drawer ("drawer").

backdropOpacityQuerynumber

Opacity of the overlay backdrop, between 0 and 1.

openOverlayOnQueryOpenOverlayOn

When to open the overlay: window.InlineAI.OpenOverlayOn.Focus or window.InlineAI.OpenOverlayOn.QuerySubmit.

shouldShowSuggestedQuestionsQueryboolean

Whether to show suggested questions in the overlay.

suggestedQuestionsModeQuerySuggestedQuestionsMode

Display mode for suggested questions: "animated" or "static".

typographySourceQueryTypographySource

Typography inheritance: "inherit-from-website" or "inherit-from-theme".

overlayBreakpointsQueryOverlayBreakpointConfig[]

Per-viewport overrides for overlay settings.

Positioning examples

window.InlineAI.mount(window.InlineAI.Placement.SearchFab, undefined, {
  fabPosition: {
    horizontalPosition: window.InlineAI.FabPosition.Right,
    rightOffset: '20px',
    bottomOffset: '24px',
  },
});

If your page has a fixed footer or bottom navigation bar, increase bottomOffset to prevent the FAB from overlapping it.

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

© 2026 Inline AI