No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Widgets Introduction

A widget is an entity created in Discover Customer Engagement Console (CEC) app to configure what kind of data the customer would like to display. Each widget:

  • has a unique property called “rfk_id”
  • belongs to a data type

CEC is supporting Merchandising and Content Personalization Widgets. Merchandising Widgets return data to search and recommend any content provided by the customer including products, categories, stores, articles, and more. Content Personalization Widgets offers advanced design customization, so customers can get the results that they need just setting variables and allows customer to create personalized widget in a simple way.

Content Personalization Widget types are:

  • SEO: is aimed at providing merchandisers and marketers the ability to configure meta tags for any given page within a website. Meta tags defined in this widget a displayed within the head elements of each page
  • Banner: content personalization widgets aimed at displaying onsite.
  • HTML Blocks: has been built to support all other types of onsite experiences that merchandisers/marketers may need to personalize.

Merchandising Widget types are:

  • Recommendations
  • Search Result
  • Preview Search

For Content Personalization Widgets the SDK provides SEOWidget, BannerWidget and HTMBlockWidget React components that already render corresponding data.

For Merchandising Widgets you need to create a React Component and use the corresponding hook. Refer to the template introduction page to know how to do it.

Getting Started

Refer to the primary introduction page on how to get your app setup with a WidgetsProvider.

Once you have your WidgetsProvider rendered, you can use any of the components provided from the SDK or created from the templates.

Example

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