---
title: "Override content widget configuration"
slug: "override-content-widget-configuration"
abstract: "Overriding default configuration for content personalization widgets using Sitecore Search JS SDK and UI Components for React."
---
# Override content widget configuration

Typically, you configure the content and appearance settings for a content personalization widget in Sitecore Search. For banner and HTML block widgets, this can include URLs, text, and HTML.

To override Sitecore Search configuration of a banner widget whose `rfkId` is `banner_2`:

1. In Sitecore Search, in the **Widgets** section, on the **Widgets** tab, find the banner widget and note its `rfkId`.
2. In your React project, in the `widget_components` folder, create a file called `temporaryBanner.js`, and paste the following code block.

    ```js
    import {
      useContentBlock,
      useWidgetVisibility,
      widget,
      WidgetDataType,
    } from "@sitecore-search/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);
    ```

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