How to Integrate a Custom Plugin in discourse UI

I’m developing a new plugin for my Discourse instance. While the plugin itself is working fine, I’m having difficulty integrating it into the Discourse UI. I’ve reviewed the available documentation, but some parts are still unclear to me. As I’m new to this, I would greatly appreciate a detailed, step-by-step guide on how to add the plugin to the UI. Even a simple example (such as a highlighted “yellow box”) would be very helpful in understanding the process.

Thank you for your assistance!

This is a bit vague. Can you be more specific? Exactly what do you want to add to the UI?

Have you looked through existing Plugin source code to see what they are doing? (This is one of the benefits of open source)

4 Likes

@merefield I basically want to add a plugin to my Discourse instance that displays a small box on my page. My goal is to understand how to do it, such as a plugin that displays ‘Hello, World!’ in one of these areas, so that I can create something more complex in the future

You would need to use a plugin outlet.

A neat tool for figuring out the location and plugin outlet’s name:

5 Likes

Thank you! I’ll give it a try and come back with my feedback.

3 Likes

It worked! I installed the Ember.js Chrome extension and was able to locate the PluginOutlet on my site. After following the documentation, everything functioned as expected.

5 Likes

Also have a look at these theme components Custom Header Links and Custom Header Links (icons).

If all you want to do is add a button, you don’t need a plugin.

4 Likes

Don’t forget your TC :wink:

2 Likes