Render widgets with the WidgetsContainer component

Using the content, styles, and configuration of content personalization widgets that reside in the Customer Engagement Console (CEC), the WidgetsContainer component renders the SEO, banner, and HTML block widgets. For merchandising widgets, it requires widget components that you can create by passing UI components to widget or setWidget functions.

Warning

The WidgetsContainer component is deprecated and replaced by PageWidgetsProvider.

For the same functionality, you can use:

Render widgets by wrapping them in the PageWidgetsProvider component

When using the WidgetsContianer component, you do not have to add widget tags within it, because it can retrieve the following:

The list of widgets to be rendered from the Widget Provider.
The merchandising widget components from the the host component.
The content personalization widget components from the JS SDK.

Note

When the WidgetsContainer is present within the WidgetsProvider tags, all content personalization widgets configured for a particular URL or page render correctly.

To render a simple query hooked recommendation widget with WidgetsContainer:

In your React application, in the folder called widget_components, in a file called myRecommendationComponent.js, paste the following code block.

RequestResponse

import {
  useRecommendation
} from "@sitecore-discover/react";

setWidget("<rfkid_rec_widget>", {
        type: WidgetDataType.RECOMMENDATION,
        component: MyRecommendationComponent,
        options: { 
            props: {
                title: 'RFKID 1',
                productsToDisplay: 4
            }
        }
    );

const MyRecommendationComponent = ({ title='', productsToDisplay = 6 }) => {
  const {
    actions: { onProductClick },
    queryResult: { isLoading, isFetching, data: { content: { product: { value: products = [] } = {} } = {} } = {} },
  } = useRecommendation((query) => {
    query.getRequest().setNumberProducts(productsToDisplay);
  });

  const ready = !isLoading && !isFetching;

  if (!ready || (ready && products.length === 0)) {
    return '';
  }

  return (
    <div>
        {title && <h3>{title}</h3>}
        {products.map((p, index) => (
            <div key={`product-${index}`}>
                <h3><a href="#" onClick={() => onProductClick({ sku: p.sku || '' })}>{p.name}</a></h3>
                <img src={p.image_url} />
                {p.final_price && <span>${p.final_price}</span>}
            </div>
        ))}
    </div>
  );
};

In your React application, in a page component, to initialize the widget using the setWidget method, paste the following code block.

RequestResponse

import {
  setWidget,
  WidgetDataType,
  WidgetsProvider,
} from "@sitecore-discover/react";

import MyRecommendationComponent from './widget_components/myRecommendationComponent';

const Page = () => {
    return (
         <WidgetsProvider
                env='<environment>'
                customerKey='<customer key>'
                apiKey='<api key>'
                useToken
            >
            <WidgetsContainer />
        </WidgetsProvider>
    );
}

At compile time, if errors are displayed, fix import statements to match locations and names.

Do you have some feedback for us?

If you have suggestions for improving this article,