---
title: "Widgets"
slug: "widgets"
abstract: "Understand how to use widgets to request search content."
---
# Widgets

After Sitecore Search [indexes your website content](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-search-experiences/search-concepts-for-cloud-sdk-developers/your-indexed-website-content-in-sitecore-search.html "Your indexed website content in Sitecore Search"), you can request content from Sitecore Search using widgets. A widget is a configurable page component that collects and transmits the search-related content to your app.

For example, when you [create a search results page](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/search-experiences/create-a-search-results-page.html "Create a search results page"), you request data for a search results widget using the [`SearchWidgetItem`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-search/cloud-sdk-search-browser/classes/cloud-sdk-search-searchwidgetitem.html "SearchWidgetItem") class. The following example describes a request for 10 index documents in the *Product* entity, including all the available attributes. The [`getWidgetData`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-search/cloud-sdk-search-browser/functions/cloud-sdk-search-browser-getwidgetdata.html "getWidgetData") function makes the data request.

```typescript
import { SearchWidgetItem } from "@sitecore-cloudsdk/search/browser";

// Configure the search request:
const widgetRequest = new SearchWidgetItem("product", "rfkid_7"); // Create a new widget request for the "Product" entity
widgetRequest.content = {}; // Request all attributes for the entity
widgetRequest.limit = 10; // Limit the number of results to 10

// ...

// Call the `getWidgetData` function to request the data:
const response = await getWidgetData(
  new WidgetRequestData([widgetRequest]),
);
```

Here's an example response, including attributes for a shoes index document:

```text
{
  "brand": "Sneakers4All",
  "id": "id-12345",
  "image_url": "https://...",
  "name": "Men's Trainers",
  "price": "79.99",
  "source_id": "10569",
  "in_stock": true,
  "review_count": "...",
  "sku": "...",
  ...
}
```

You can use the [`SearchOptions`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-search/cloud-sdk-search-browser/interfaces/cloud-sdk-search-searchoptions.html "SearchOptions") interface to configure your request. For example, you could specify certain attributes to be returned in the response, add personalization options, or change the search `limit` and `offset` to paginate the results.

## Widget types

There are different types of widgets, each used to create a [distinct search experience](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-search-experiences/ideas-for-search-experiences.html "Ideas for search experiences"). The [`getWidgetData`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-search/cloud-sdk-search-browser/functions/cloud-sdk-search-browser-getwidgetdata.html "getWidgetData") function lets you request data for the following widget types:

- [Search results widget](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-search/cloud-sdk-search-browser/classes/cloud-sdk-search-searchwidgetitem.html "SearchWidgetItem") - used for requesting search results data. This data is typically displayed on a search results page.
- [Recommendation widget](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-search/cloud-sdk-search-browser/classes/cloud-sdk-search-recommendationwidgetitem.html "RecommendationWidgetItem") - used for requesting data for content or product recommendations.
- [Suggestion widget](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-search/cloud-sdk-search-browser/classes/cloud-sdk-search-searchwidgetitem.html "SearchWidgetItem") - the `suggestion` parameter of the search results widget is used for requesting data for search suggestions. This data is typically displayed on a search results page, below the search field where the site visitor enters text.
- [Questions-answers widget](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-search/cloud-sdk-search-browser/classes/cloud-sdk-search-qawidgetitem.html "QuestionsAnswersWidgetItem") - used for requesting data for questions and answers. For example, when the site visitor enters a question in the search field and then performs the search, you can display a questions-answers block listing the question, the answer, and related questions.

> [!tip]
> It's common to request data for multiple widgets in a single request. For example, when the site visitor enters text in the search field, you can display the contents of a search results widget, a recommendation widget, and a suggestion widget at the same time.
>
> Widgets are not restricted to a specific entity, so you can reuse them across your app. For example, you can use the `"rfkid_7"` search results widget in the *Product*, *Content*, and any other entity.

## Capturing events

After setting up a widget, you can capture events that track when the site visitor views or clicks the associated user interface element.

The captured event data is sent to Sitecore and becomes available in Sitecore Search. This data lets you personalize search results and track the performance of your search experiences so you can refine and improve them.

For more information, see [Sitecore Search events](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-tracking/events/sitecore-search-events.html "Sitecore Search events").