Search UI widgets
Search.io comes with a set of easy to integrate search widgets. Learn how to customize the widgets.
Last updated
Was this helpful?
Search.io comes with a set of easy to integrate search widgets. Learn how to customize the widgets.
Last updated
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.
All widgets follow the structure below. The script
tag is wrapped in a div
with the data-widget
attribute specifying the widget.
The following configuration properties are available across all widgets. Generally they contain account and collection details, as well variables, theming information.
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 .