🔍 Site Search Demo

Test the LiftAudit Site Search widget — inline and floating modes.

Inline Widget

The inline widget renders a search input inside <div data-liftaudit-search>. Type 3+ characters to search.

Floating Widget

Without a mount element, the floating search button appears bottom-right.

The floating widget and inline widget cannot both render on the same page (same site key). Below is the install snippet for floating mode only.

<script src="/search-widget.js?v=9" data-site="YOUR_SITE_KEY"></script>

Installation Guide

Add site search to any page in two ways:

Floating (one-liner)

<script src="https://liftaudit.com/search-widget.js?v=9" data-site="YOUR_SITE_KEY"></script>

A floating search button appears bottom-right. Click it to open the search panel.

Inline (custom placement)

<div data-liftaudit-search data-site="YOUR_SITE_KEY"></div>

The search input renders exactly where you put the div. Multiple inline instances supported.

Open your project in the LiftAudit dashboard → the search card shows your site key.

CORS is allowed for both yourdomain.com and www.yourdomain.com — register either form in your project settings.

Feature Checklist

• Shadow DOM — widget styles are fully isolated from the host page
• Light/Dark mode — follows prefers-color-scheme
• Keyboard nav — ↓↑ move, Enter select, Esc close
• Debounced — 300ms debounce before API call
• Type badges — results show page passage product
• Product prices — products display price inline
• Accessibility — aria-live region, aria-expanded, role="listbox"
• Responsive — adapts to mobile (375px) with max-width clamping
• Graceful failure — API errors hide silently, never break the host page
• Semantic + vector results — hybrid search merges keyword + AI-ranked results