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.

Import path

RequestResponse

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

Example

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.

RequestResponse

<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.

Do you have some feedback for us?

If you have suggestions for improving this article,