JavaScript widget
Add search suggestions and results to any page with one script tag.
The widget adds suggestions while typing and a results panel to any search box. It is plain TypeScript with no framework: about 8 KB gzipped (the gate is under 20 KB). It works right-to-left for Arabic, with the keyboard and with screen readers (an ARIA 1.2 combobox). It uses only a public key.
Add it to a page
<script src="https://cdn.seekgist.com/widget/1/seekgist-widget.js" async
data-key="sg_pub_..." data-input="input[name=q]" data-search-url="/search?q="
data-locale="ar"></script>Or start it from your own code:
window.SeekGist.init({ key: "sg_pub_...", input: "input[name=q]", searchUrl: "/search?q=", locale: "ar" });Options
Option (data-*) | Default | What it does |
|---|---|---|
key | (needed) | Your public key (sg_pub_...). |
api | https://api.seekgist.com | API base address. |
input | input[name=q], input[type=search] | CSS selector of your search box (or boxes). |
search-url | /search?q= | Your store's own search page. Used on fallback and for "see all". |
mode | results | results: Enter shows SeekGist results in a panel. redirect: Enter goes to your search page. |
locale | <html lang> | ar turns the panel right-to-left. |
platform | custom | Sent with fallback events, so you can see them per platform. |
assistant | off | on adds the chat button (see below). |
currency-format | auto | Prices are shown with Intl.NumberFormat and the product's currency. |
Fallback
Every SeekGist call has a 300 ms budget. On a timeout, a network error, HTTP 401, 403, 408, 429 or 5xx, a bad answer, or a search answer without ids, the widget gets out of the way: the search box submits to your own search page (search-url) as if the widget was not there. After 5 failures in 60 seconds the widget skips SeekGist for 30 seconds (shared by all tabs). Each fallback sends one fallback event, so you can count them in the dashboard. See Store fallback.
Colors and fonts
Set any of these CSS variables on :root or on .sg-root:
--sg-font, --sg-bg, --sg-fg, --sg-muted, --sg-border, --sg-accent, --sg-accent-fg, --sg-hover, --sg-radius, --sg-shadow, --sg-z, --sg-width.
The defaults follow the shopper's light or dark setting. Dark stores set them to dark colors.
.sg-root { --sg-accent: #0f766e; --sg-radius: 12px; --sg-font: "IBM Plex Sans Arabic", system-ui; }Recent searches
Recent searches are kept only in the shopper's browser (localStorage key sg_recent, at most 10) with a "Clear" button. They are never sent to SeekGist.
Chat button (shopping assistant)
With data-assistant="on", the widget loads a second small file (seekgist-assistant.js, about 4 KB gzipped) from the same folder and shows a chat button. The key must allow the assistant: in the dashboard, make the public key with Also allow the shopping assistant (chat widget). A normal public key has search and events only. If the chat is off for your store, nothing is shown. See the Shopping assistant guide.
On a product page you can tell the chat which product the shopper is looking at:
<div data-sg-product-id="42"></div>Shopify, Salla and Zid
The store apps start the same widget for you: they read your public key and the on/off switch from SeekGist, so you paste nothing. See the Shopify, Salla and Zid quick starts.