# 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
<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>
```

{% 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:

`<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: <https://github.com/sajari/search-widgets/tags>
{% 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](https://docs.search.io/developer-documentation/fundamentals/pipelines).                                                                                                             |
| `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`            | [#variables](https://docs.search.io/developer-documentation/fundamentals/configuration-objects#variables "mention")                   | `_`                      | Define simple key -> value pair object used for every search request. The configuration is specified as [Variables](https://docs.search.io/developer-documentation/fundamentals/configuration-objects#variables) properties.            |
| `config`               | [#config](https://docs.search.io/developer-documentation/fundamentals/configuration-objects#config "mention")                         | `_`                      | Defines mapping between key/value pair params to be sent with each and every request .The configuration is specified as [Config](https://docs.search.io/developer-documentation/fundamentals/configuration-objects#config) properties.  |
| `fields`               | [#fielddictionary](https://docs.search.io/developer-documentation/fundamentals/configuration-objects#fielddictionary "mention")       | `_`                      | Map fields in your data to the required fields to display in the UI. The configuration is specified as [FieldDictionary](https://docs.search.io/developer-documentation/fundamentals/configuration-objects#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](https://docs.search.io/developer-documentation/fundamentals/configuration-objects#theme) properties.                                               |
| `customClassNames`     | [#custom-class-names](https://docs.search.io/developer-documentation/fundamentals/configuration-objects#custom-class-names "mention") | `_`                      | Add CSS class names to components. See [Available className](https://docs.search.io/developer-documentation/fundamentals/configuration-objects#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.                                                                                                                             |

```
```