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!

[imagem] 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. [imagem] 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: [imagem] 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)]

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

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: [imagem] 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…

Como Integrar um Plugin Personalizado na Interface do Discourse

Dev

Heliosurge (Dan DeMontmorency) 15 Fevereiro , 2025 02:43 8

Não se esqueça do seu TC

Tópico		Respostas	Vistas
Using discourse's plugin outlets Development	2	1182	24 Setembro , 2020
Using template hbs to add HTML content to a plugin outlet Development	2	298	23 Junho , 2025
How to create a custom activity tab in user profile? Development	8	468	17 Abril , 2025
Developing Discourse Plugins - Part 2 - Connect to a plugin outlet Developer Guides plugin-guides , tutorial	38	30944	23 Novembro , 2025
How to add custom html next to logo using discourse plugin methods Product Support	1	1068	19 Fevereiro , 2021

Como Integrar um Plugin Personalizado na Interface do Discourse

Related topics