WidgetsProvider

The WidgetsProvider is the root-level provider in a React application integrated with Sitecore Search platform using Search JS SDK. It allows the use of SDK query hooks in its inner components.

The JS SDK sets a cookie at the domain level in a visitor's browser because most Search customers share cookies across subdomains. If your domain is a subdomain of a 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. The attributes depend on how your domain is set up with Search.

To authenticate:

  • If you have set up Search as a subdomain, use your serviceHost.

  • If you have not set up Search as a subdomain, use your apiKey.

By default the JS SDK sets a cookie to track visitor interactions to offer personalized search results. This consent can be managed using the trackConsent property of the WidgetProvider.

To disable consent for cookies to track visitor interactions:

  • Set trackConsent to false in the WidgetProvider component. This also deletes any cookies that were previously set.

Request middleware

The WidgetProvider accepts an async function as the value for requestMiddleware. Use this optional property to run a function as middleware before any request.

The following code block describes an implementation:

RequestResponse
<WidgetsProvider
  requestMiddleware={(<define params>) => { <middleware code> }}
>
 ...sdk code
</WidgetsProvider>

Import path

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

Example

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

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.

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

const tracking = true;

const Root = () => {
    return (
          <WidgetsProvider
                trackConsent={tracking}
                publicSuffix='true'
                env='<environment>'
                customerKey='<customer key>'
                apiKey='<api key>'
                requestMiddleware={(<define params>) => { <middleware code> }}
                >

            <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>
)};

Do you have some feedback for us?

If you have suggestions for improving this article,