Developer Guide
Product DocumentationDeveloper GuideAPI ReferenceHelp Center
  • Welcome!
  • Fundamentals
    • API and client libraries
      • REST API Reference
      • JavaScript
      • Node
      • PHP
      • Python
      • Ruby
      • .Net
    • Search UI widgets
      • Search results widget
      • Search input widget
      • Takeover Search Input Widget
      • Configuration Objects
    • Pipelines
      • Steps
      • Record Pipelines
      • Query pipelines
      • Fundamental steps
      • Variable manipulation
  • Guides
    • Quick Start
      • Setting up a collection
      • Tuning your search
    • Feature implementation
      • Implementing tracking
      • Promotion banners
      • Aggregate Filters
      • Bucket Aggregates
      • Redirects
    • Using pipelines
      • Configuring autocomplete
      • Configuring spelling
      • Phrase training
      • Regular expressions
  • Helpful links
    • Product Documentation
    • API Reference
    • Help Center
Powered by GitBook
On this page

Was this helpful?

  1. Fundamentals

Search UI widgets

Search.io comes with a set of easy to integrate search widgets. Learn how to customize the widgets.

PreviousAPI and client librariesNextSearch results widget

Last updated 2 years ago

Was this helpful?

Search widgets are discrete blocks of JSON code that utilize the to render a variety of search widgets for your website.

Use the in the Search.io admin console to design your search interface. Once completed, it will generate the code for the search widget to embed in your website.

Configuration

All widgets follow the structure below. The script tag is wrapped in a div with the data-widget attribute specifying the widget.

<div data-widget="widget-name">
  <script type="application/json">
    {
      "account": "ACCOUNT_ID",
      "collection": "COLLECTION_ID",
      "pipeline": "PIPELINE_NAME",
      ...
    }
  </script>
</div>
<script async src="https://cdn.search.io/embed/1/loader.js"></script>

By default, the script tag will provide you with the latest version of the Search UI Widgets. If you would lock into a particular version you can instead specify the version using our CDN script tag:

<script async src="https://cdn.sajari.com/embed/2.21.2/bundle.js" id="sajari-widgets"></script>

This will lock you into version 2.21.2. A full list of versions is available here:

The following configuration properties are available across all widgets. Generally they contain account and collection details, as well variables, theming information.

Name
Type
Default
Description

pipeline

string (required)

_

account

string (required)

_

The account configuration (available in the credentials section in the Search.io admin interface).

collection

string (required)

_

The collection to query (available in the credentials section in the Search.io admin interface).

endpoint

string

'//jsonapi.sajari.net'

The endpoint configuration.

preset

'shopify' | 'website' | ''

''

The collection template. The set value affects the default values of properties such as buttonSelector.

tracking

'event' | 'click' | 'posneg'

'click'

Enable tracking to give you insights into the search behavior of your users and how your content is performing.

variables

_

config

_

fields

_

defaultFilter

string

_

A default filter to apply to all search requests.

currency

string

'USD'

The currency code to use for any formatted price values.

theme

Theme

_

customClassNames

_

disableDefaultStyles

boolean

false

Disable the default styles of components.

importantStyles

boolean

true

Add !important to the provided styles to override any CSS clashes that usually result in strange styling.

The pipeline configuration. See .

Define simple key -> value pair object used for every search request. The configuration is specified as properties.

Defines mapping between key/value pair params to be sent with each and every request .The configuration is specified as properties.

Map fields in your data to the required fields to display in the UI. The configuration is specified as properties.

Set basic color options for the interface. The configuration is specified as properties.

Add CSS class names to components. See .

Search.io React SDK
Search UI Designer
https://github.com/sajari/search-widgets/tags
Pipeline overview
Variables
Config
FieldDictionary
Custom Class Names
Variables
Config
FieldDictionary
Theme
Available className