Inject Widget in custom HTML

[B-iggy]

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 but it is not intuitive for users to find.
Other theme switcher components (my own included) 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:

My sidebar you see on the screen looks like this:

	<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

<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

<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!

[Johani (Joe)]

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

[B-iggy]

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

[Johani (Joe)]

When you add raw HTML in the header tab of your theme, it gets added here
discourse/application.html.erb at 13b31def80c1f1262bf6fd21226c0639dcfabb13 · discourse/discourse · GitHub

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

<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>

[B-iggy]

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.