---
title: "PageWidgets"
slug: "pagewidgets"
abstract: "Details of the PageWidgets component in Sitecore Discover JS SDK for React."
---
# PageWidgets

To render widget components based on page URL, add the `PageWidgets` component to the root provider of your React application integrated with the Sitecore Discover platform, then add the widget components.

<details>
<summary><h2>Import path</h2></summary>

```js
import { PageWidgets } from '@sitecore-discover/react';
```

</details>

<details>
<summary><h2>Example</h2></summary>

Wrap widget components with `PageWidgets` before adding them to the `WidgetsProvider` component, as shown in following code block:

> [!note]
> `header_ps` and `footer_rec` are configured to appear on all pages in the CEC.

```js
<WidgetsProvider
    env='<environment>'
    customerKey='<customer key>'
    apiKey='<api key>'
    useToken
    >

   <header>
      <h1>My App</h1>
      <PreviewSearchWidget rfkId="header_ps" />
   </header>

   <div class="content">
      <PageWidgets />
   </div>

   <footer>
      <RecommendationWidget rfkId="footer_re" />
   </footer>

</WidgetsProvider>
```

> [!note]
> To render widgets based on page URL, you can also create a custom selector of widget components. Wrap the selector with the `PageWidgetsProvider` component before adding it to the root provider of your React application.

</details>