Custom Components -- add button or text at any plugin outlet

[pfaffman (Jay Pfaffman)]

	Summary	Add button or text anywhere
	Repository	https://github.com/literatecomputing/discourse-custom-components
	Install Guide	How to install a theme or theme component
	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.)

I started developing this plugin for someone who wanted to display a “click this button to subscribe so that you can send PMs” button on user profiles and user cards. They wanted the button to display if the user couldn’t send PMs. Because I’m not always as clever as I’d like to think, I wrote the component using groups to determine whether the button was displayed. One problem with this approach was that staff members weren’t in the subscriber group, so they’d get the “you gotta subscribe” button even though they could send PMs. Also, the group was hidden, so it was impossible to use it in a theme component anyway. I re-wrote that theme component to use currentUser.can_send_private_messages to determine whether to display the button.

Who is this for?

If you want to put a button with a link in it, or some arbitrary text that is displayed or hidden for certain groups, this will let you insert them at any plugin outlet. You want to add a “You outa subscribe” link button between every message except for those who aren’t members? This will do it. You want to stick some arbitrary HTML at a plugin outlet, just to see what it’ll look like? This will do that.

How it helps developers

This theme has some simple examples of how to:

• use the Objects type for theme setting
• use api.renderInOutlet (as described here to stick a Glimmer component at an outlet controlled by a setting rather than creating a file in the connectors directory
• Write a simple Glimmer component that accesses currentUser
• Wrap a component in another (inline) template to be able to pass data to it
• Display arbitrary HTML from a theme setting free of the constraints of Markdown–Sure, maybe

@Discourse

You can use the Ember’s html-safe helper here and it will render the HTML instead of the text.

but if you’re trying to do it inside of a <template> inside of a .gjs file, it works a little differently (like {{htmlSafe component.text}})

[NateDhaliwal]

Space makes the text not bold.

---

Great component!

[jrgong]

Would it be possible to add placeholders to the Button URLs, e.g. for the URL to contain the topic ID in which the user is located?

[pfaffman (Jay Pfaffman)]

I’m not quite sure. If you’ve got a budget, I’ll take a look.

What would your button do if it had the topic id?

If you figure it out and want to make a PR, I’ll probably accept it.

@jrgong

Would it be possible to add placeholders to the Button URLs, e.g. for the URL to contain the topic ID in which the user is located?

I’m pretty sure that the answer is no, but that you could use the workaround described here

@Discourse

You can also use other Ember components as blocks, you just need to use the correct name. For example, core includes a signup-cta Ember component, and you can use it in the sidebar as is. Note that you can’t use components that expect a set of parameters, but you can build your own Ember component in a separate theme and reference it just by its name in the sidebar’s blocks setting.

[jrgong]

Hi @pfaffman

We want to add such a set of buttons to every topic for members in our business account user group.
The button would then trigger creating a new PM which then includes the current URL the user is on

That way our business customers can send us request to pin, highlight or “sponsor” speficic topics

[pfaffman (Jay Pfaffman)]

As you know, you can create a URL that will open a new topic composer. You could make that be the link added by the theme component.

@jrgong

which then includes the current URL the user is on

I don’t think that it’s possible to do that without adding code to the theme component (but maybe it is?). Maybe someone has an idea about that and will offer that solution here (or on the other topic). If not, you can contact me or post in Marketplace with the description of what you need and a budget.