Render widgets using the generic widget component

WidgetsProvider and PageWidgetsProvider and root components for an application built using the JS SDK. Both providers can authenticate and set cookies.

Use WidgetsProvider and PageWidgetsProvider

You can use either of them because they both orchestrate the rendering based on the page or URL and its list of widgets. You can use the generic widget to render all widgets.

WidgetsProvider renders only widget components. You have to pass the UI component of a merchandising widget to the widget or setWidget function to create its widget component. During this process, you assign it a rfkId and widget type.

When you add a Widget component within WidgetProvider and assign it an rfkId, you can ensure that:

The widget with that rfkId renders.
That all widgets of the same widget type renders. as long as their widget components are instantiated.

To render all search results widgets with the Widget component, provided the rfkId of one of them is sdk_search:

In your application component, copy and paste the following code block.

RequestResponse

import { WidgetsProvider, Widget  } from "@sitecore-discover/react";
const MyApp = () => {
    return (
        <WidgetsProvider
                env='<environment>'
                customerKey='<customer key>'
                apiKey='<api key>'
                useToken
            >
            <Widget rfkId="sdk_search" /> 
        </WidgetsProvider>
    )
};

In your application component, to create a generic search results widget, import and instantiate your component as shown in the following code block:

RequestResponse

import { WidgetsProvider, Widget, WidgetDataType } from "@sitecore-discover/react";
import MySDKSearchResultsComponent from "./widgets_components/MySDKSearchResultsComponent";

setWidgetType( WidgetDataType.SEARCH_RESULTS, {  component: MySDKSearchResultsComponent } );

In your application component, to create a search results widget for a specific rfkId, import and instantiate your component as shown in the following code block:

RequestResponse

import { WidgetsProvider, Widget, WidgetDataType } from "@sitecore-discover/react";
import MySDKSearchResultsComponent from "./widgets_components/MySDKSearchResultsComponent";

setWidget('sdk_search', {  type: WidgetDataType.SEARCH_RESULTS,  component: MySDKSearchResultsComponent } );

Note

A page can contain only one search results widget.

Render content personalization widgets

To render content personalization widgets based on rfkId:

Import and add them to WidgetProvider as shown in the following code block:

RequestResponse

import { SEOWidget, BannerWidget, HTMLBlockWidget } from "@sitecore-discover/react";
const MyApp = () => {
    return (
        <WidgetsProvider
                env='<environment>'
                customerKey='<customer key>'
                apiKey='<api key>'
                useToken
            >
            <Widget rfkId="sdk_banner" /> 
            <Widget rfkId="sdk_seo" />
            <Widget rfkId="sdk_html_block" />
        </WidgetsProvider>
    )
};

Do you have some feedback for us?

If you have suggestions for improving this article,

Render widgets using the generic widget component

Render merchandising widget components with the Widget component

Render content personalization widgets