Override content widget configuration

Working with JS SDK and UI Components

Typically, you configure the content and appearance settings for a content personalization widget in the Customer Engagement Console (CEC). For banner and HTML block widgets, this can include URLs, text and HTML.

To override CEC configuration of a banner widget whose rfkId is banner_2:

In the CEC, in the Merchandising Widgets section, in the Widgets tab, find the banner widget and note its rfkId.

In your React project, in the widget_components folder, create a file called temporaryBanner.js, and paste the following code block.

import {
  useContentBlock,
  useWidgetVisibility,
  widget,
  WidgetDataType,
} from "@sitecore-discover/react";
import { createElement, useLayoutEffect, useRef } from "react";

function addStyle(rfkId, node, css) {
  let styleNode = document.querySelector(`[data-rfk-id-style=${rfkId}]`);
  if (!styleNode) {
    styleNode = document.createElement("style");
    styleNode.setAttribute("type", "text/css");
    styleNode.dataset.rfkIdStyle = rfkId;
    node.parentNode?.appendChild(styleNode);
  }
  styleNode.innerHTML = css;
}

const ContentBlockWidget = () => {
  const {
    rfkId,
    queryResult: {
      data: {
        appearance: {
          css_names: cssNames = [],
          templates: {
            html: {
              devices: { pc: { content: htmlContent = null } = {} } = {},
            } = {},
            css: {
              devices: { pc: { content: cssContent = null } = {} } = {},
            } = {},
          } = {},
        } = {},
      } = {},
    },
  } = useContentBlock();
  const { ref } = useWidgetVisibility();
  const contentRef = useRef(null);

  // sets widget styles
  useLayoutEffect(() => {
    if (contentRef.current && cssContent) {
      addStyle(rfkId, contentRef.current, cssContent);
    }
  }, [rfkId, cssContent]);

  // sets widget content
  useLayoutEffect(() => {
    if (contentRef.current && htmlContent) {
      contentRef.current.innerHTML = htmlContent;
    }
  }, [htmlContent]);
  return createElement(
    "div",
    { ref, "data-rfkid": rfkId, className: cssNames.join(" ") },
    createElement("div", { ref: contentRef })
  );
};

export default widget(ContentBlockWidget, WidgetDataType.CONTENT_BLOCK);

Import and add the widget component to your application or page component.
Update component name and imports.
Test the pages where the banner is displayed.

If you have suggestions for improving this article, let us know!