Search Widget — Quickstart

The Skryx Search Widget is a vanilla-JS dropdown that attaches to any <input> on your site and shows instant suggestions, categories, a featured product, and a product grid as users type. Zero dependencies, full CSS isolation via Shadow DOM, ~7 KB gzipped.

# 1. Get a public key

In your dashboard go to API Keys → New key → Public (browser-safe). You'll see a pk_live_… prefix — copy the full value once (it's hashed at rest and never shown again).

Public keys are read-only and rate-limited per IP. Safe to embed in client-side HTML.

Open Search Widget in the sidebar:

Pick a theme preset (Light / Dark / Minimal / Rounded / Compact)
Set your primary colour with the colour picker
Pick which dropdown panels to show (Suggestions / Categories / Featured / Products grid)
Tweak min characters + debounce if you want a snappier or quieter feel

Click Save widget settings — your live preview reflects the changes immediately.

# 3. Paste the snippet

Add this just before the closing </body> on every page where you want search:

<script src="https://cdn.skryx.io/widget.js"
        data-key="pk_live_YOURKEY"
        data-target="#your-search-input"
        defer></script>

data-target is the CSS selector of your existing search input. Drop it to let the widget render its own input.

# 4. (Optional) Restrict origins

Back in API Keys, edit the key and add your store domain (e.g. https://your-store.com) to Allowed origins. The widget endpoint enforces this server-side — leaked keys are useless from other sites.

# What ships out of the box

Instant dropdown (sub-100ms after warm cache)
Suggestions from your popular searches
Top categories from your facets
Featured product + grid with image / title / price / stock
"Show all results" link to your full search page
Keyboard navigation (↑↓ Enter Esc) and full ARIA combobox semantics
Mobile-responsive layout
"Powered by Skryx" footer (required on Free, removable on Starter+)

# Next