How to add a custom button in user profile card?

Development

AI-generated summary

junbetterway wants to add a custom button to the user profile summary and card view that will redirect without saving data. They provided initial code that achieves this in the header section, but not in the desired locations. Arkshine suggested using plugin outlets, specifically user-profile-controls, to inject code at the desired place.

To achieve this, Arkshine recommended creating a theme component using the theme CLI or testing it directly in a <script> tag. They provided an example of how to define a template via a <script> tag in the theme’s </head> section:

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

junbetterway expressed gratitude and is now planning to test it before creating a component.

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>
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

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.

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: