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!

[image] Elizeo Rocha: add the plugin to the UI 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)

@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 [image]

You would need to use a plugin outlet. [image] Using Plugin Outlet Connectors from a Theme or Plugin Developer Guides Discourse includes hundreds of Plugin Outlets which can be used to inject new content or replace existing contend in the Discourse UI. ‘Outlet arguments’ are made available so that content can be customized based on the context. Choosing an outlet To find the name of a plugin outlet, search Discourse core for “ . These allow you… A neat tool for figuring out the location and plugin outlet’s name: [image] Introducing Discourse developer toolbar Development When running the latest version of Discourse core in a development environment, you’ll notice a new toolbar on the left-hand-side of the screen: [Developer Tools] This provides one-click access to commonly-needed developer tools. So far, we have: electric_plug Plugin Outlet Debug This shows all plugin outlets, with tooltips showing realtime values of all of the available @outletArgs. This was inspired by the popular plugin outlet locations theme component, and the plugin before it. But un… [The image is a technical Q&A format from Discourse showing various templates and structures for generating responses and loading spinners. (Captioned by AI)]

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.

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.

Don’t forget your TC :wink: [image] Custom Components -- add button or text at any plugin outlet Theme component information_source Summary Add button or text anywhere hammer_and_wrench Repository https://github.com/literatecomputing/discourse-custom-components question Install Guide How to install a theme or theme component open_book New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Add a link button or arbitrary text at any plugin outlet. (Ignore the watermarks in the images–I took these screenshots on a staging/test site.) T…

How to Integrate a Custom Plugin in discourse UI

Development

Elizeo_Rocha (Elizeo Rocha) February 11, 2025, 12:55pm 5

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

Topic		Replies	Views
Using discourse's plugin outlets Development	2	1191	September 24, 2020
Using template hbs to add HTML content to a plugin outlet Development	2	306	June 23, 2025
How to create a custom activity tab in user profile? Development	8	485	April 17, 2025
Developing Discourse Plugins - Part 2 - Connect to a plugin outlet Developer Guides plugin-guides , tutorial	38	30990	November 23, 2025
How to add custom html next to logo using discourse plugin methods Product Support	1	1070	February 19, 2021

How to Integrate a Custom Plugin in discourse UI

Related topics