# Configuration Objects

### Variables <a href="#variables" id="variables"></a>

The Variables is a simple key -> value pair object used for every search request. The proprties will vary based on your [pipeline configuration](http://localhost:8000/developer-guide/widget/#config) but the most common implementations will use the following:

Value types can be `string | string[] | number | boolean`.

| Name             | Type     | Default       | Description                                    |
| ---------------- | -------- | ------------- | ---------------------------------------------- |
| `q`              | `string` | `_`           | The search query.                              |
| `q.override`     | `string` | `_`           |                                                |
| `q.suggestions`  | `string` | `_`           | The autocomplete options for the search query. |
| `filter`         | `string` | `'_id != ""'` | Default filter to apply.                       |
| `resultsPerPage` | `number` | `15`          | How many results to display per page.          |
| `page`           | `number` | `1`           | Which page to display.                         |
| `maxSuggestions` | `number` | `10`          | How many autocomplete suggestions per search.  |

### Config <a href="#config" id="config"></a>

The `Config` object defines mapping between key/value pair params to be sent with each and every request.

| Name                  | Type     | Default            | Description                                                      |
| --------------------- | -------- | ------------------ | ---------------------------------------------------------------- |
| `qParam`              | `string` | `'q'`              | The key that includes a search query.                            |
| `qOverrideParam`      | `string` | `'q.override'`     |                                                                  |
| `qSuggestionsParam`   | `string` | `'q.suggestions'`  | The key that includes autocomplete options for the search query. |
| `resultsPerPageParam` | `string` | `'resultsPerPage'` | The key for how many results to display per page.                |
| `pageParam`           | `string` | `'page'`           | The key for which page to display.                               |
| `maxSuggestions`      | `number` | `'maxSuggestions'` | The key for how many autocomplete suggestions per search.        |

### FieldDictionary <a href="#fielddictionary" id="fielddictionary"></a>

The FieldDictionary object is used to map fields in your data to the required fields to display in the UI. By default, the fields for a website search collection are used.

| Name            | Type     | Default           | Description                                                                                                                                                                                                                             |
| --------------- | -------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id`            | `string` | `'_id'`           | Unique identifier for the record.                                                                                                                                                                                                       |
| `url`           | `string` | `'url'`           | URL for the record, required for links in results.                                                                                                                                                                                      |
| `title`         | `string` | `'title'`         | The main title for the result.                                                                                                                                                                                                          |
| `subtitle`      | `string` | `'url'`           | The subtitle. Often a brand, category, or the URL.                                                                                                                                                                                      |
| `description`   | `string` | `'description'`   | A description to display beneath the title and subtitle.                                                                                                                                                                                |
| `image`         | `string` | `'image'`         | An image, if applicable.                                                                                                                                                                                                                |
| `price`         | `string` | `'price'`         | A price, if applicable.                                                                                                                                                                                                                 |
| `originalPrice` | `string` | `'originalPrice'` | An original price, if applicable. If the value is more than price (or it's index if price & originalPrice are both arrays) then the original price will be displayed (with ~~strikethrough~~) and the current price highlighted in red. |
| `rating`        | `string` | `'rating'`        | A rating, if applicable.                                                                                                                                                                                                                |

### Theme <a href="#theme" id="theme"></a>

The Theme object is used to set basic color options for the UI. Currently this is only for the primary actions.

| Name     | Type                                                      | Default | Description                     |
| -------- | --------------------------------------------------------- | ------- | ------------------------------- |
| `colors` | `{primary: {base: string, text: string, active: string}}` | `_`     | Set colors for primary actions. |

### Custom Class Names <a href="#custom-class-names" id="custom-class-names"></a>

The `customClassNames` property allows for adding CSS class names to components, enabling you to write custom styles to change the look and feel of the layout.

A list of components and available class names is available in the [React Documentation](https://react.docs.search.io/styling#available-classnames).

To add custom classes, pass a configuration object with the class names to the customClassNames property.

```html
<div data-widget="search-input">
  <script type="application/json">
    {
      "account": "1594153711901724220",
      "collection": "bestbuy",
      "pipeline": "query",
      "customClassNames": {
        "results": {
          "container": "custom-container-class",
          "item": "custom-item-class"
        }
      },
    }
  </script>
</div>
<script async src="https://cdn.search.io/embed/1/loader.js"></script>
```