# Implementing the Rendering

Now that a `<widget>` element can appear in the CMS content, we need to implement parsing it and rendering a custom React element in its place. Luckily, as outlined in the intro section, Scandi already parses all CMS content – all we need to do is define a new widget type!

## Create a Component

We need to create a Component for the widget. This will just be a regular Scandi React component that takes the widget attributes (only `data-title` in this case) as props.

To create a new widget, you can just use the ScandiPWA CLI utility:

```
scandipwa create component NewsletterWidget
```

Our widget needs to let the user subscribe to the newsletter. Thankfully, this functionality is already implemented in the `NewsletterSubscription` component, so we can re-use that. All we need to do is add the widget title. Hence, the implementation is pretty simple:

{% code title="src/component/NewsletterWidget/NewsletterWidget.component.js" %}

```jsx
/** @namespace TutorialCsaApp/Component/NewsletterWidget/Component/NewsletterWidgetComponent */
export class NewsletterWidgetComponent extends PureComponent {
    static propTypes = {
        'data-title': propTypes.string.isRequired
    };

    render() {
        const { 'data-title': title } = this.props;

        return (
            <div block="NewsletterWidget">
                <h2>{ title }</h2>
                <NewsletterSubscription />
            </div>
        );
    }
}
```

{% endcode %}

Now we have a component that can render out the Newsletter widget. However, it is not integrated into the Scandi widget system yet. Let's do that next!

## Configure the Newsletter Widget

As mentioned in the intro, the `WidgetFactory` is responsible for determining the widget type and rendering an appropriate component. This mapping is configured in the `renderMap`:

{% code title="node\_modules/@scandipwa/scandipwa/src/component/WidgetFactory/WidgetFactory.component.js" %}

```javascript
    renderMap = {
        [SLIDER]: {
            component: HomeSlider,
            fallback: this.renderSliderFallback
        },
        [NEW_PRODUCTS]: {
            component: NewProducts
        },
        [CATALOG_PRODUCT_LIST]: {
            component: ProductListWidget
        },
        [RECENTLY_VIEWED]: {
            component: RecentlyViewedWidget
        }
    };
```

{% endcode %}

Note that each key is a string constant that corresponds to the widget type. This means that slider-type widgets will use the HomeSlider component, for example.

We want to add our own configuration entry for the newsletter widget. To do this, let's override the WidgetFactory component:

```
scandipwa override component WidgetFactory
```

Only select the WidgetFactory class to override it, and leave the other options blank - we don't need to override anything else!

```
? Choose things to extend in WidgetFactory.component.js WidgetFactory
? What would you like to do with styles? Keep
? Choose things to extend in WidgetFactory.config.js 

NOTE!

     The following files have been created:
     src/component/WidgetFactory/WidgetFactory.component.js
```

Now, we can update the configuration:

{% code title="src/component/WidgetFactory/WidgetFactory.component.js" %}

```jsx
import NewsletterWidget from 'Component/NewsletterWidget';
import {
    HomeSlider,
    NewProducts,
    ProductListWidget,
    RecentlyViewedWidget,
    WidgetFactory as SourceWidgetFactory
} from 'SourceComponent/WidgetFactory/WidgetFactory.component';

import {
    CATALOG_PRODUCT_LIST,
    NEW_PRODUCTS,
    RECENTLY_VIEWED,
    SLIDER
} from './WidgetFactory.config';

export {
    ProductListWidget,
    NewProducts,
    HomeSlider,
    RecentlyViewedWidget
};

/** @namespace TutorialCsaApp/Component/WidgetFactory/Component/WidgetFactoryComponent */
export class WidgetFactoryComponent extends SourceWidgetFactory {
    renderMap = {
        [SLIDER]: {
            component: HomeSlider,
            fallback: this.renderSliderFallback
        },
        [NEW_PRODUCTS]: {
            component: NewProducts
        },
        [CATALOG_PRODUCT_LIST]: {
            component: ProductListWidget
        },
        [RECENTLY_VIEWED]: {
            component: RecentlyViewedWidget
        },
        newsletter: { // note: "newsletter" is the widget type
            component: NewsletterWidget
        }
    };
}

export default WidgetFactoryComponent;
```

{% endcode %}

Now, if you test out your widget, you should see that it shows up as a title+subscription box! You can now use it anywhere widgets are supported.

![](https://4029840077-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNcGSsOTtbcSNK-Y1U1%2F-Mi5uXmP4x1Sow8-ZtHR%2F-Mi5ulcPO50O7gYps1l8%2Fimage.png?alt=media\&token=aa9b8cdf-39de-47bd-bb8a-6aca915eecc9)