1. Components

WidgetsProvider

The WidgetsProvider is the root provider of a React application integrated with Sitecore Discover platform using Discover JS SDK. It allows the use of SDK query hooks in its inner components, sets a cookie, and authenticates.

The JS SDK sets a cookie at the domain level in a visitor's browser because most of Discover customers share cookies across subdomains. If your domain is a subdomain of top-level or apex domain that restricts cookies, you need to set the value for publicSuffix to true.

The default value of publicSuffix is false.

Authentication

For authentication, you must add credential attributes to the WidgetsProvider component. The attributes depend on how your domain is set up with Discover.

To authenticate:

Import path

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

Example

The following code block shows the WidgetsProvider component with credentials for authentication when your domain is not set up with Discover.

Note

In the following code block, publicSuffix has been set to true because the top-level domain of this implementation restricts cookies.

header_ps and footer_rec appear on all pages according to the configuration.

import { WidgetsProvider }from "@sitecore-discover/react";
import MyGlobalPreviewSearch from "./widget_components/myGlobalPreviewSearch";
import MyGlobalRecommendationWidget from "./widget_components/myGlobalRecommendationWidget";  


const Root = () => {
    return (
          <WidgetsProvider
                publicSuffix='true'
                env='<environment>'
                customerKey='<customer key>'
                apiKey='<api key>'
                useToken >

            <header>
              <h1>My Application</h1>
              <MyGlobalPreviewSearch rfkId="header_ps" />
            </header>
          
            <div class="content">
                OTHER WIDGET COMPONENTS GO HERE
            </div>
          
            <footer>
                <MyGlobalRecommendationWidget rfkId="footer_rec" />
            </footer>

          </WidgetsProvider>
)};
If you have suggestions for improving this article, let us know!