when i paste the code the widget shows up on the main page of the website. how can i make it show up in one of the site categories/pages not main page?
AI-generated summary
The user Issa_George is seeking help on how to display an HTML widget in a specific category or page instead of the main page. After sharing a screenshot, other users like NateDhaliwal, david, and pfaffman suggest following the theme development tutorial and using plugin outlets and glimmer components to render content in desired locations. They recommend using the discourse_theme CLI and placing code in the appropriate sections, such as the <head> or JS tab. Issa_George eventually confirms that the issue is resolved after receiving guidance.
Hi there, could you send a screenshot or a screen recording of the problem?
Thanks!
Hi @Issa_George. I’d recommend working through the tutorial here to get familiar with the concepts and techniques needed for theme development. It covers how to render content in various places throughout the UI:
And you’ll find theme development much easier with the discourse_theme cli.
Like what David said, you should follow that tutorial to learn how to build a component that can be rendered in various places, specifically, plugin outlets, which are dotted around the site to provide places where you can render the component.
You can place the code inside the ‘JS’ tab and pair it with api.renderInOutlet() and a <template> tag.
Hi Nate, I am still struggling with this. I just want to put the html widget code inside a category section instead of main page. I read the guide but it is not clear to me what I should use. I installed CLI and the code I put doesn’t do anything on my site. I then went to the theme creator site and my code doesn’t show up in the preview. The sample code from the guide works and I can see the colored changes when I put the code.
Hi there, could you share the current code that you are using? Thanks!
You should use a plugin outlet and a glimmer component. Have a look at the recent guides for theme development.
Or, put the script tag in the <head> tab and the other piece of code in the JS tab (and import the helpers in there).
Thank you. I got it working.