# Developing Discourse Plugins - Part 2 - Connect to a plugin outlet

**URL:** https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001
**Category:** Developer Guides
**Tags:** plugin-guides, tutorial
**Created:** [July 12, 2015, 5:48pm UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001 "2015-07-12T17:48:27Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [July 12, 2015, 5:48pm UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/1 "2015-07-12T17:48:27Z")

</div>

Previous tutorial: [Developing Discourse Plugins - Part 1 - Create a basic plugin](https://meta.discourse.org/t/developing-discourse-plugins-part-1-create-a-basic-plugin/30515)

* * *

### Getting Started: Templates

Discourse’s client application is written using the Ember.js Javascript framework. Ember uses [Templates](https://guides.emberjs.com/release/components/) to generate HTML. There’s a great introduction to the templating language at that link, so definitely read it thoroughly.

### The Problem: Adding elements to the Discourse User Interface

Many plugins need to add and extend the Discourse web interface. We provide a mechanism to do this called plugin outlets in handlebars templates.

If you browse the Discourse templates, you’ll often see the following markup:

```hbs
<PluginOutlet @name="edit-topic" />

```

This is declaring a plugin outlet called “edit-topic”. It’s an extension point in the template that plugin authors can leverage to add their own markup.

When authoring your plugin, look in the Discourse templates (in `.gjs` files) you want to change for a `<PluginOutlet />`. If there isn’t one, just ask us to extend it! We’ll happily add them if you have a good use case. If you want to make it easier and faster for us to do that, please submit a pull request on GitHub!

> ❗ If you want to see some of the places where plugin outlets exist, you can run the following command in a POSIX-compliant shell:
> 
> ```sh
> git grep -A 1 "<PluginOutlet" -- "*.gjs"
> 
> ```

You can also display the plugin outlets on a Discourse site by turning on the [Discourse Developer Toolbar](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215). Just type `enableDevTools()` in the browser console on a Discourse forum and click the plug icon that appears on the left side of the page.

### Connecting to a Plugin Outlet

Once you’ve found the plugin outlet you want to add to, you have to write a `connector` for it. A connector is a `.gjs` component whose filename includes `connectors/<outlet name>` in its path.

For example, if the Discourse template has:

```hbs
<PluginOutlet @name="evil-trout" />

```

Then any `.gjs` files you create in the `connectors/evil-trout` directory  
will automatically be appended. So if you created the file:

`plugins/hello/assets/javascripts/discourse/connectors/evil-trout/hello.gjs`

With the contents:

```gjs
<template>
  <b>Hello World</b>
</template>

```

Discourse would insert `<b>Hello World</b>` at that point in the template.

Note that we called the file `hello.gjs` – The filename (as opposed to the directory name) does not matter, but it must be unique across every plugin. It’s useful to name it something descriptive of what you are extending it to do. This will make debugging easier in the future.

### Troubleshooting

- Double check the name of the connector and make sure it matches the plugin name perfectly.

### More information

> [@Using Plugin Outlet Connectors from a Theme or Plugin](https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727):
>
> 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 “\<PluginOutlet”, or use the [plugin outlet locations](https://meta.discourse.org/t/plugin-outlet-locations-theme-component/100673) theme component. (e.g. topic-above-posts). Wrapper outlets Some outlets in core look like \<PluginOutlet @name="foo" /\>. These allow you…

* * *

### More in the series

Part 1: [Plugin Basics](https://meta.discourse.org/t/beginners-guide-to-creating-discourse-plugins-part-1/30515)  
**Part 2: This topic**  
Part 3: [Site Settings](https://meta.discourse.org/t/beginners-guide-to-creating-discourse-plugins-part-3-custom-settings/31115)  
Part 4: [git setup](https://meta.discourse.org/t/beginners-guide-to-creating-discourse-plugins-part-4-git-setup/31272)  
Part 5: [Admin interfaces](https://meta.discourse.org/t/beginners-guide-to-creating-discourse-plugins-part-5-admin-interfaces/31761)  
Part 6: [Acceptance tests](https://meta.discourse.org/t/beginner-s-guide-to-creating-discourse-plugins-part-6-acceptance-tests/32619)  
Part 7: [Publish your plugin](https://meta.discourse.org/t/beginner-s-guide-to-creating-discourse-plugins-part-7-publish-your-plugin/101636)

* * *

This document is version controlled - suggest changes [on github](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/04-plugins/02-plugin-outlet.md).

---

<div class="post-metadata">

### Author: ![kennym](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kennym/32/115557_2.png) [@kennym](https://meta.discourse.org/u/kennym)
#### Post date: [October 2, 2015, 3:19am UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/2 "2015-10-02T03:19:41Z")

</div>

Is there a list of plugin outlets?

More specifically I would like to know if one could modify the “create topic” template?

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [October 2, 2015, 10:08am UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/3 "2015-10-02T10:08:00Z")

</div>

> [@kennym](#):
>
> More specifically I would like to know if one could modify the “create topic” template?

In what way? Add new fields to the composer area (like the tagging plugin does)?

---

<div class="post-metadata">

### Author: ![kennym](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kennym/32/115557_2.png) [@kennym](https://meta.discourse.org/u/kennym)
#### Post date: [October 6, 2015, 8:02pm UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/4 "2015-10-06T20:02:28Z")

</div>

Yes, that’s what I am searching for.

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [October 6, 2015, 11:48pm UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/5 "2015-10-06T23:48:34Z")

</div>

I’d take a look at the tagging plugin then. It might have all you want!

---

<div class="post-metadata">

### Author: ![Andrew\_Byrne](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrew_byrne/32/116413_2.png) [@Andrew\_Byrne](https://meta.discourse.org/u/Andrew_Byrne)
#### Post date: [March 10, 2016, 1:53am UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/6 "2016-03-10T01:53:16Z")

</div>

@eviltrout is there a way to output directly to JSON.  
basically creating a new API endpoint?

---

<div class="post-metadata">

### Author: ![Andrew\_Byrne](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrew_byrne/32/116413_2.png) [@Andrew\_Byrne](https://meta.discourse.org/u/Andrew_Byrne)
#### Post date: [March 10, 2016, 2:36am UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/7 "2016-03-10T02:36:18Z")

</div>

Ahhhhhhhh. new to this whole “ruby fad” 😃  
I have a partial solution that i’ll detail in:

> [@Multiple topics in single API request](https://meta.discourse.org/t/multiple-topics-in-single-api-request/40807):
>
> Using the Discourse API is pretty cool and I’ve used it to provide a number of custom interrogations in related sites. One thing that has caused me some issues is the fact I need to make single requests on each topic via: GET discourse.foo/t/topicID/1234.json for most Discourse systems this is cool but I am blending results, ie requesting multiple topics and adding them to a single post feed. when the number increases the requests become… annoying. I’m looking for a solution something along t…

---

<div class="post-metadata">

### Author: ![andrewroth](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrewroth/32/115142_2.png) [@andrewroth](https://meta.discourse.org/u/andrewroth)
#### Post date: [July 25, 2016, 7:51am UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/8 "2016-07-25T07:51:56Z")

</div>

Hi Robin,

The plugin-outlet-locations plugin seems to declare all the connectors with a `register_asset` line in plugin.rb. Starting here: [discourse-plugin-outlet-locations/plugin.rb at master · Mittineague/discourse-plugin-outlet-locations · GitHub](https://github.com/Mittineague/discourse-plugin-outlet-locations/blob/master/plugin.rb#L19)

Is that a necessary step?

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [July 25, 2016, 3:07pm UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/9 "2016-07-25T15:07:43Z")

</div>

Nope - that’s not necessary. All `.es6` and `.hbs` files are loaded automatically in plugins.

---

<div class="post-metadata">

### Author: ![kourou](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kourou/32/62572_2.png) [@kourou](https://meta.discourse.org/u/kourou)
#### Post date: [October 9, 2016, 12:37pm UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/10 "2016-10-09T12:37:18Z")

</div>

I am still trying to figure out how plugins in Discourse work and I could use a little help.

I would like to modify the timeline scroll bar (in the right side of each topic). Actually, what I need to do is add some stuff (image/banner) below the scroll bar.  
What template should I edit? Is there an existing plugin-outlet for that?

Thank you,  
Ilias

---

<div class="post-metadata">

### Author: ![1c7](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/1c7/32/94822_2.png) [@1c7](https://meta.discourse.org/u/1c7)
#### Post date: [April 28, 2018, 8:48am UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/11 "2018-04-28T08:48:23Z")

</div>

2018-4-28 work for me!

## 1. Plugin Outlet name

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/a/0aea065d3da722528f8a110aa3635fbbb29ee46a.png)

## 2. Code

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/4/14e0375ae0155907eb93a77659ce10ea3f39654d.png)

## 3. Result

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/9/79ddfbd6e93c1d5024071eb1c57b5634f0de5755.png)

---

<div class="post-metadata">

### Author: ![sarahann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sarahann/32/96703_2.png) [@sarahann](https://meta.discourse.org/u/sarahann)
#### Post date: [May 14, 2018, 5:36pm UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/12 "2018-05-14T17:36:00Z")

</div>

This guide is great! I had my plugin showing in the _/admin/plugins_ quite easily.

I was wondering though, how do you delete items from a template?

For privacy reasons, I wanted to delete the **export to csv** button in the `/admin/users/list/active` as well as the **show emails** button. But I didn’t find a plugin outlet connector for those parts of the UI.

I was trying to overwrite the following templates

`/users-list-show.hbs`  
`/users-list.hbs`

with my plugin outlet.

But creating these files  
`/var/www/discourse/plugins/[my-plugin]/assets/javascripts/admin/templates/users-list-show.hbs`  
`/var/www/discourse/plugins/[my-plugin]/assets/javascripts/admin/templates/users-list.hbs`  
and making changes to them didnt seem to work. Even after deleting the `/var/www/discourse/tmp` folder and restarting the server.

Is this the correct way to delete those buttons from the UI? Using css `display: none;` isn’t an option.

I feel like I am missing something really simple, any ideas?

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [May 14, 2018, 6:36pm UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/13 "2018-05-14T18:36:33Z")

</div>

> [@sarahann](#):
>
> For privacy reasons, I wanted to delete the **export to csv** button in the _/admin/users/list/active_ as well as the **show emails** button.

Not a direct technical answer to your question but why would you want to do that?

Only the admins can do this. They usually have full control of the server most likely anyway and could read the database, so hiding a button is a bit futile: emails will also show up in the Email logs and on your mail service logs. I’m afraid site admins are going to see a lot of email addresses!

Admins have full control, they see everything (except passwords presumably), so this is normal.

If you are an admin, get used to the responsibility which comes with knowing all of this!

---

<div class="post-metadata">

### Author: ![sarahann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sarahann/32/96703_2.png) [@sarahann](https://meta.discourse.org/u/sarahann)
#### Post date: [May 14, 2018, 7:36pm UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/14 "2018-05-14T19:36:22Z")

</div>

My concern was that moderators can access some things in the admin dashboard.  
They can navigate to the ‘users’ tab and see the **Export** and the **Show Emails** buttons

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/b/0ba7c8d73d373ed6a32eb3ef544a3574199f8a7a.png)

We don’t want our moderators to be able to grab bulk emails like this.  
I understand that the emails are visible on users profiles, but we didn’t want an easy way to get this information.

So I was trying to create a plugin that hides these buttons.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [May 14, 2018, 7:37pm UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/15 "2018-05-14T19:37:42Z")

</div>

Could be wrong, but [this suggests it’s not an issue](https://meta.discourse.org/t/moderators-ability-to-see-emails-inconsistent/33402) … have you Impersonated a Mod?

---

<div class="post-metadata">

### Author: ![sarahann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sarahann/32/96703_2.png) [@sarahann](https://meta.discourse.org/u/sarahann)
#### Post date: [May 14, 2018, 8:21pm UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/16 "2018-05-14T20:21:52Z")

</div>

Yes, the screenshot I took was from impersonating a mod.

We have a similar setup as the link you provided ([Moderators ability to see emails inconsistent](https://meta.discourse.org/t/moderators-ability-to-see-emails-inconsistent/33402)).

I’m not requesting the Discourse team makes any changes though, this isn’t an issue with Discourse.

I am trying customize Discourse for our situation. I was hoping that using a plugin outlet and referencing the files within that plugin was the right way to overwrite a template in Discourse. I just wasn’t able to successfully overwrite these files:

`/users-list-show.hbs`  
`/users-list.hbs`

My changes never showed up. So I thought this plugin outlet topic could help

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [May 14, 2018, 8:24pm UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/17 "2018-05-14T20:24:29Z")

</div>

Perhaps someone else can chime in, but I’ve always seen Outlets as _additive_. You may need an override technique instead (via javascript/Ember). I’m still learning this myself :).

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [May 14, 2018, 8:30pm UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/18 "2018-05-14T20:30:49Z")

</div>

I’m thinking that if overriding a template is the goal that it might be better to do this with a theme instead of a plugin.

---

<div class="post-metadata">

### Author: ![sarahann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sarahann/32/96703_2.png) [@sarahann](https://meta.discourse.org/u/sarahann)
#### Post date: [May 14, 2018, 8:32pm UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/19 "2018-05-14T20:32:34Z")

</div>

I was thinking that as well, but I didn’t want a user to swap their theme and be able to get different functionality. So I figured a plugin outlet would do the trick

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [May 14, 2018, 8:51pm UTC](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001/20 "2018-05-14T20:51:53Z")

</div>

I think you can probably hide those with CSS.

[Next page](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001.md?page=2)
