> For the complete documentation index, see [llms.txt](https://docs.search.io/developer-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.search.io/developer-documentation/fundamentals/search-ui-widgets.md).
# Search UI widgets
Search widgets are discrete blocks of JSON code that utilize the [Search.io React SDK](https://react.docs.search.io) to render a variety of search widgets for your website.
Use the [Search UI Designer](https://docs.search.io/documentation/fundamentals/integrating-search) 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.
```javascript
```
{% hint style="info" %}
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:
``
This will lock you into version 2.21.2. A full list of versions is available here:
{% endhint %}
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)` | `_` | The pipeline configuration. See [Pipeline overview](/developer-documentation/fundamentals/pipelines.md). |
| `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` | [Configuration Objects](/developer-documentation/fundamentals/search-ui-widgets/configuration-objects.md#variables) | `_` | Define simple key -> value pair object used for every search request. The configuration is specified as [Variables](/developer-documentation/fundamentals/search-ui-widgets/configuration-objects.md#variables) properties. |
| `config` | [Configuration Objects](/developer-documentation/fundamentals/search-ui-widgets/configuration-objects.md#config) | `_` | Defines mapping between key/value pair params to be sent with each and every request .The configuration is specified as [Config](/developer-documentation/fundamentals/search-ui-widgets/configuration-objects.md#config) properties. |
| `fields` | [Configuration Objects](/developer-documentation/fundamentals/search-ui-widgets/configuration-objects.md#fielddictionary) | `_` | Map fields in your data to the required fields to display in the UI. The configuration is specified as [FieldDictionary](/developer-documentation/fundamentals/search-ui-widgets/configuration-objects.md#fielddictionary) properties. |
| `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` | `_` | Set basic color options for the interface. The configuration is specified as [Theme](/developer-documentation/fundamentals/search-ui-widgets/configuration-objects.md#theme) properties. |
| `customClassNames` | [Configuration Objects](/developer-documentation/fundamentals/search-ui-widgets/configuration-objects.md#custom-class-names) | `_` | Add CSS class names to components. See [Available className](/developer-documentation/fundamentals/search-ui-widgets/configuration-objects.md#custom-class-names). |
| `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. |
```
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.search.io/developer-documentation/fundamentals/search-ui-widgets.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.