How to add a custom button in user profile card?

[Arkshine]

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

Arkshine/discourse-chat-button-in-profile/blob/main/javascripts/discourse/connectors/user-profile-controls/chat-button.hbs

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

@Discourse

Defining template via theme

We recommend using a dedicated file for your connector template. However, Discourse still supports defining a template via a <script> tag in your theme’s </head> section. In that case, a definition would look like

<script type='text/x-handlebars' data-template-name='/connectors/{outlet-name}/{connector-name}'>
  Template content here
</script>

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.