Platforms
Add search to any site
One script tag adds Findlane search to your site's own search box: products as visitors type, with photos and prices, and a results view with filters.
The Findlane search widget answers your site's own search box, on any site: WordPress, a static site, or a store on another platform. It's the widget the Shopify app uses, loaded with one script tag. It searches one index of products, filled by a product feed or by the API.
Set it up
- Allow your site. On the index's Public access page, add your site's origin, such as
https://www.example.com, and copy the public ID. See Public IDs and allowed origins. - Add the script tag to every page with a search box:
<script
src="https://cdn.findlane.dev/widget/1.0.0/findlane-search.js"
integrity="sha384-OSAGPC+6pkAmjCXQqeS+ntZIcnnoNA1cEHYv646ZHY9T0GhZQt0EqqXGolloyD/K"
crossorigin="anonymous"
defer
data-public-id="pub_your_public_id"
></script>- Try it. Type in your site's search box. Products appear as you type, and a misspelled word still finds them.
The integrity hash makes the browser check the file before it runs it. A released version never changes; a new one has a new address and hash. widget/versions.json lists every release with its hash.
On your site
- As you type, a list shows the best matches with photos, brands, and prices, and above them searches to pick. Arrow keys move through it, and Enter opens the selected product or runs the selected search.
- In an empty search box, the visitor's recent searches and your index's popular searches show. Recent searches stay in the visitor's browser and are never sent to Findlane.
- Pressing Enter, or choosing See all results, opens Findlane's results over the page: every match, filters by brand and product type, sorting by price, and more results. The browser's back button closes it.
- Your rules' banners show among the results, and a search a rule redirects goes to its page.
The widget's styles are kept apart from your site's, so neither changes the other. It uses your site's font.
Which search box
The widget answers an input that matches input[name="q"], input[name="s"] (WordPress), or input[type="search"]. If your search box is none of these, name it with a CSS selector:
data-input="#header-search"Enter in a search box outside a form runs the search too, unless data-replace is false: then your own code handles it.
Settings
Settings are data attributes on the script tag.
| Attribute | What it does |
|---|---|
data-public-id | The index's public ID. Required. |
data-currency | The prices' currency, such as EUR. Without it, each record's currency, or US dollars. |
data-input | A CSS selector for your search box. |
data-limit | Products shown as you type: 3 to 10. Default 6. |
data-accent | The color of matched words, links, and checkboxes, as a hex color such as #0a7d4f. |
data-placeholder | Text shown in the empty search box. Leave it out to keep yours. |
data-results | false: searches go to your own search page instead of Findlane's results. A search form goes to its own address; See all results, a picked search, and a box outside a form go to data-search-url. |
data-search-url | Your search page. Default /search, with the search added as ?q=. Write {query} where the search goes, such as /?s={query} on WordPress. |
data-replace | false: your site's own suggestions also run. |
data-suggestions, data-popular, data-recent | false turns off searches suggested as visitors type, popular searches, or recent searches. |
data-product | On a product page, the product's objectID. The page sends a view of it. |
data-consent | granted when the visitor allows analytics. See Consent. |
data-visitor-ids | true to send visitor IDs with events. |
What it shows
Each product in the list and the results shows these fields of its record:
| Field | Shown as |
|---|---|
title | The product's name, with the matched words highlighted. |
url | The product's page. A full address, such as https://www.example.com/p/trail-jacket, or a path on your site, such as /p/trail-jacket. |
image | The photo, as it is at its address. |
price | The price, as a number. With a higher price_max, it reads "From" the price. |
compare_at_price | The price before a sale, struck through. |
currency | The prices' currency, such as EUR, unless data-currency says otherwise. |
brand or vendor | The brand, under the name. vendor comes first when a record has both. |
Other fields aren't shown, and available isn't used: a sold-out product shows like any other. A field that isn't shown still finds products if the index's settings search it, such as a description.
The results' filters are the brand, vendor, and product_type fields that are facets in the index's settings. Sorting by price uses the index's sorts with the IDs price_asc and price_desc, which the suggested settings for products add.
Consent
The widget sends no events until your site says the visitor allows analytics. Events are clicks on products, on suggested searches, and on banners, and product page views; they show on the index's Events and Analytics pages. Searches are sent as visitors type, with no cookie or ID.
If the page knows as it loads, because the visitor answered your banner on an earlier page or your site needs no banner, add data-consent="granted" to the script tag.
When the visitor answers your cookie banner, call findlane.consent from its callback:
// They allow analytics.
window.findlane?.consent(true)
// They don't, or they withdraw it.
window.findlane?.consent(false)window.findlane is there once the widget's script has run. With defer, that's just before the page's DOMContentLoaded event, so an inline script after the tag is too early: call it from your banner's callback, or after that event. A product page's view waits, and is sent when they allow analytics. consent(false) stops events and deletes the visitor IDs from the browser. The answer lasts for the page; on the next page, the script tag or your banner says it again.
Visitor IDs
With data-visitor-ids="true", and Link each shopper's events on the index's Events page, events carry random IDs for the browser and the visit, which link one visitor's views and clicks. They're made only once the visitor allows analytics. Getting consent is up to your site: turn them on only if your banner covers analytics, or your visitors don't need one. See Visitor IDs.