# Inject Widget in custom HTML

**URL:** https://meta.discourse.org/t/inject-widget-in-custom-html/205168
**Category:** 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:** 6
**Page:** 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!

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [October 6, 2021, 11:21am UTC](https://meta.discourse.org/t/inject-widget-in-custom-html/205168/2 "2021-10-06T11:21:39Z")

</div>

How are you adding the HTML for your sidebar? Is it added in plugin-outlet?

---

<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 6, 2021, 11:32am UTC](https://meta.discourse.org/t/inject-widget-in-custom-html/205168/3 "2021-10-06T11:32:58Z")

</div>

Hey @Johani  
thanks for your reply.  
I’m adding it in my theme \> header

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

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [October 6, 2021, 11:53am UTC](https://meta.discourse.org/t/inject-widget-in-custom-html/205168/4 "2021-10-06T11:53:42Z")

</div>

When you add raw HTML in the header tab of your theme, it gets added here  
[discourse/app/views/layouts/application.html.erb at 13b31def80c1f1262bf6fd21226c0639dcfabb13 · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/13b31def80c1f1262bf6fd21226c0639dcfabb13/app/views/layouts/application.html.erb#L96)

This is outside of the application. So, you can’t use stuff like

`{{mount-widget widget="my-dark-light-widget"}}`

Instead of adding raw HTML, use the `above-site-header` plugin-outlet. It’s inserted in the same place, so it should look the same visually.

Something like this

```xml
<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/my-sidebar">
  add your HTML here
  You can insert {{mount-widget widget="my-dark-light-widget"}} anywhere in the markup
</script>

```

---

<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 6, 2021, 6:22pm UTC](https://meta.discourse.org/t/inject-widget-in-custom-html/205168/5 "2021-10-06T18:22:17Z")

</div>

Awesome, as always, thank you for your time to respond in a way, that it teaches things at the same time!  
With your help it was then very easy and I could even use the component widget a second time.

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/a/0ac3875fd9a4b74ee16ced35909db2af5aeaa49b.png)

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [November 5, 2021, 6:22pm UTC](https://meta.discourse.org/t/inject-widget-in-custom-html/205168/6 "2021-11-05T18:22:28Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.