Inject Widget in custom HTML

Product Support

AI-generated summary

Inject Widget in custom HTML

B-iggy is trying to inject a Dark/Light Toggler widget into a custom HTML sidebar, but can’t find a way to do it. The widget is not intuitive for users to find when attached to existing Discourse elements.

Johani suggests that the issue is due to adding raw HTML in the theme’s header tab, which gets added outside of the application. This prevents the use of {{mount-widget widget="my-dark-light-widget"}}.

Instead, Johani recommends using the above-site-header plugin-outlet to add the custom HTML. This allows the use of {{mount-widget widget="my-dark-light-widget"}} to inject the widget into the custom HTML.

With this solution, B-iggy is able to successfully inject the widget into the custom HTML and even use the component widget a second time.

1

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:

image
image838×492 79.2 KB

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!

2

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

3

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

image
image479×196 11.9 KB

4

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

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

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
image756×277 20.3 KB