# 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:** 1
**Showing post:** 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).

---

_[View the full topic](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001)._