# Render Component in Widget

**URL:** https://meta.discourse.org/t/render-component-in-widget/269771
**Category:** Development
**Created:** [June 27, 2023, 1:43pm UTC](https://meta.discourse.org/t/render-component-in-widget/269771 "2023-06-27T13:43:22Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![ChijiokeFLW](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chijiokeflw/32/308825_2.png) [@ChijiokeFLW](https://meta.discourse.org/u/ChijiokeFLW)
#### Post date: [June 27, 2023, 1:43pm UTC](https://meta.discourse.org/t/render-component-in-widget/269771/1 "2023-06-27T13:43:22Z")

</div>

Please, how would I go about inserting a Component in a particular widget. What I am interested in is placing the TopicNotificationsButton component in the “post-body” widget.

I would appreciate the assistance immensely.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [June 27, 2023, 2:17pm UTC](https://meta.discourse.org/t/render-component-in-widget/269771/2 "2023-06-27T14:17:43Z")

</div>

We’ve got a shim that can do this… in a theme you’d want to add a file like this within the `javascripts/discourse/api-initializers` directory…

```js
import { withPluginApi } from "discourse/lib/plugin-api";
import { registerWidgetShim } from "discourse/widgets/render-glimmer";
import { hbs } from "ember-cli-htmlbars";

export default {
  name: "unique-customization-name",

  initialize() {
    withPluginApi("0.1", (api) => {
      api.decorateWidget(`post-body:after`, (decorate) => {
        const attrs = decorate.attrs;
        return decorate.widget.attach("custom-widget-name", { attrs });
      });

      registerWidgetShim(
        "custom-widget-name",
        "div.custom-widget-name",
        hbs`<ComponentName @postAttrs={{@data.attrs}} />`
      );
    });
  },
};

```