How to add a custom button in user profile card?

dev
1

How can I add a custom button in our user profile summary and card view?
We wanted to add a CTA that will do something (e.g., redirect) but no data saving…

image
image1812×800 88.3 KB

and also in the profile card:

image
image946×252 49.6 KB

My initial code below achieves almost but its on the header section & could not find a way to do it on user profile summary & card:

<script type="text/discourse-plugin" version="0.4">
    api.decorateWidget('header-buttons:after', helper => {
        if (Discourse.User.current()) {
            const cta = function() {
                // do something here...
            };
            return helper.h('button#create-new', {
                className: "btn fa fa-plus",
                onclick: cta
            }, 'CTA' );
        }
    });
</script>
1 Like
2

Hello, welcome here :wave:

You would need to use plugin outlets at this place, specifically user-profile-controls.

You can look at an example here:

3 Likes
3

Thank you @Arkshine and I am really new to this plugins so I thought it would have been something done similar with header buttons.

In any case, the user-profile-controls is a plugin? Can you guide me on how to achieve?

4

I encourage you to read Using Plugin Outlet Connectors from a Theme or Plugin; it will answer your question!

Essentially, a plugin outlet is a way to inject code at a specific place.

It would be recommended to create a theme component using the theme CLI and use a separate files as I did on my theme component here (don’t hesitate to clone my repository so you can test/modify it):

However, you can still test it from your <script> tag:

In your case, you would write:

<script type='text/x-handlebars' data-template-name='/connectors/user-profile-controls/my_connector_name'>
  Template content here
</script>

Notice the first line. We use user-profile-controls as the connector name, and my_connector_name can be whatever you want.

4 Likes
5

Awesome! I am now getting the picture and since it can be tested out in the script tag then atleast we can test it first before creating the component. Thanks again :beers:

3 Likes
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.