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] My sidebar you see on the screen looks like this: Player online on HWS HWS EU: HWS NA: HWS RE: Server Time Need help? How can I do that? Ideally it would be something like const h = require("virtual-dom").h; api.createWidget("my-dark-light-widget", { tagName: "div.my-widget", // dark-light stuff }); and then injecting that in my own html like {{mount-widget widget="my-dark-light-widget"}} I think it’s something easy I just miss… Any help is appreciated!

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 add your HTML here You can insert {{mount-widget widget="my-dark-light-widget"}} anywhere in the markup

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

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]

Inject Widget in custom HTML

Product Support

Johani (Joe) October 6, 2021, 11:21am 2

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

Topic		Replies	Views
Rendering Component in decorativeWidget API Development	4	1693	August 26, 2022
Render Component in Widget Development	1	439	June 27, 2023
How to attach a component to a widget with just markup? Development	0	816	March 9, 2018
Render a component within a Widget. (Using select-kit components within plugin code) Development	29	4199	March 6, 2024
How to render Component inside Widget? Development	3	2247	July 28, 2017

Inject Widget in custom HTML

Related topics