# Inject Widget in custom HTML

**URL:** <https://meta.discourse.org/t/inject-widget-in-custom-html/205168>\
**Category:** Product Support\
**Created:** [October 4, 2021, 4:12pm UTC](https://meta.discourse.org/t/inject-widget-in-custom-html/205168 "2021-10-04T16:12:02Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![B-iggy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/b-iggy/32/201234_2.png) [@B-iggy](https://meta.discourse.org/u/B-iggy)\
**Post date:** [October 4, 2021, 4:12pm UTC](https://meta.discourse.org/t/inject-widget-in-custom-html/205168/1 "2021-10-04T16:12:02Z")

</div>

Hey,  
sorry if the answer is waiting for me somewhere already but after hours I couldn’t find and figure it out myself.

So I think I got the meaning of widgets and components but every example I found was similar built.  
A widget or component got hooked into an already existing one or an existing connector or outlet.

What I am trying to do:  
I am using the [component Dark/Light Toggler](https://github.com/discourse/discourse-color-scheme-toggle) but it is not intuitive for users to find.  
Other theme switcher components ([my own included](https://meta.discourse.org/t/theme-switcher-component/113460)) is always attached to an existing discourse element (header, links, nav, etc.)

But I want it to have in my own html. In my own sidebar:

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/e/1eecde4f702d44d09b1cbbaf8c96f87e6464b82e.png)

My sidebar you see on the screen looks like this:

```plaintext
	<div class="row">
		<div class="sidebar-counterTitleWrapper">
			<div class="sidebar-counterRefreshIcon" type="success" size="medium" circle>
				<svg class="far fa-sync fa d-icon d-icon-sync svg-icon svg-node">
					<use xlink:href="#sync"></use>
				</svg>
			</div>
			<h3 class="sidebar-counterTitle">
				Player online on HWS
			</h3>
		</div>
		<div class="sidebar-counterServers">
			<span class="sidebar-counterPlayer">HWS EU:</span>
			<strong class="sidebar-counterPlayer--eu">
			</strong>
		</div>
		<div class="sidebar-counterServers">
			<span class="sidebar-counterPlayer">HWS NA:</span>
			<strong class="sidebar-counterPlayer--na">
			</strong>
		</div>
		<div class="sidebar-counterServers">
			<span class="sidebar-counterPlayer">HWS RE:</span>
			<strong class="sidebar-counterPlayer--re">
			</strong>
		</div>
		<br>
		<h4 class="sidebar-server-title">Server Time</h4>
		<div class="sidebar-server-time"></div>
	</div>
	<hr class="content-textLine">
	<div class="need-help-wrapper">
		<a href="https://help.hws.global" title="HWS Get help">
		    Need help?
		</a>
		<hr class="content-textLine">

```

How can I do that?  
Ideally it would be something like

```plaintext
<script type="text/discourse-plugin" version="0.8">
  const h = require("virtual-dom").h;

  api.createWidget("my-dark-light-widget", {
    tagName: "div.my-widget",

    // dark-light stuff
  });
</script>

```

and then injecting that in my own html like

```plaintext
<script type="text/x-handlebars" inject-to-my-class-selector(.sidebar-counterTitleWrapper)>
  {{mount-widget widget="my-dark-light-widget"}}
</script>

```

I think it’s something easy I just miss…  
Any help is appreciated!

---

_[View the full topic](https://meta.discourse.org/t/inject-widget-in-custom-html/205168)._