# (Retired) Use an ID in a custom user field to link to a user's external profile

**URL:** https://meta.discourse.org/t/retired-use-an-id-in-a-custom-user-field-to-link-to-a-users-external-profile/41218
**Category:** Site Management
**Created:** [17 maart 2016 om 17:43 UTC](https://meta.discourse.org/t/retired-use-an-id-in-a-custom-user-field-to-link-to-a-users-external-profile/41218 "2016-03-17T17:43:28Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [17 maart 2016 om 17:43 UTC](https://meta.discourse.org/t/retired-use-an-id-in-a-custom-user-field-to-link-to-a-users-external-profile/41218/1 "2016-03-17T17:43:28Z")

</div>

Let’s say you want to add a link of User’s main profile page on Discourse user profile page and user card, clicking on that link will take user to main (external) website.

The link of main website user profile page will be like:

```plaintext
http://myawesomewebsite.com/user/USER_PROFILE_ID

```

Let’s get started!

### Create a custom user field

Let’s create a user field with name _User Profile_.

 ![](https://global.discourse-cdn.com/meta/original/3X/2/5/2525952a6b1dc74adc621e3d37526a91d7e7e05d.png)

Make sure “Show on public profile?” option is enabled.

The above field will store external user profile IDs.

### Add custom CSS

Paste this CSS code in _Admin_ \> _Customize_ \> _CSS/HTML_ \> `CSS` section:

```plaintext
.public-user-field.user-profile {
  display: none;
}

#user-card .metadata h3 {
  float: left;
}

h3.user-card-public-field {
 clear: both;   
}

```

Feel free to further customize above CSS as per your requirement.

If your field name is different than _User Profile_ make sure you replace `.public-user-field.user-profile` with the [dasherized](http://emberjs.com/api/classes/Ember.String.html#method_dasherize) version of your field name.

### Add custom JS

Paste this JS code in _Admin_ \> _Customize_ \> _CSS/HTML_ \> `</head>` section:

```plaintext
<script type="text/discourse-plugin" version="0.8.7">
    const Site = require("discourse/models/site");

    api.registerConnectorClass('user-profile-primary', 'external-site-link', {
      setupComponent(args, component) {
        component.set('externalSiteLink', args.model.get('externalSiteLink'));
      }
    });

    api.registerConnectorClass('user-card-metadata', 'external-site-link', {
      setupComponent(args, component) {
        component.set('externalSiteLink', args.user.get('externalSiteLink'));
      }
    });

    api.modifyClass('model:user', {
      externalSiteLink: function() {
          const siteUserFields = Site.currentProp('user_fields');
          if (!Ember.isEmpty(siteUserFields)) {
            const externalUserIdField = siteUserFields.filterBy('name', 'User Profile')[0]
            if (!externalUserIdField) {
              return null;
            }
            const userFieldId = externalUserIdField.get('id');
            const userFields = this.get('user_fields');
            if (userFields && userFields[userFieldId]) {
              const url = "http://myawesomewebsite.com/user/" + userFields[userFieldId];
              const link = "<a href='"+url+"' target='_blank'>"+url+"</a>";
              return Ember.Object.create({ link, name: externalUserIdField.get('name') });
            } else {
              return null;
            }
          }
      }.property('user_fields.@each.value')
    });
</script>

<script type='text/x-handlebars' data-template-name='/connectors/user-profile-primary/external-site-link'>
  {{#if externalSiteLink}}
    <div class="public-user-fields">
      <div class="public-user-field">
        <span class="user-field-name">{{externalSiteLink.name}}</span>:
        <span class="user-field-value">{{{externalSiteLink.link}}}</span>
      </div>
    </div>
  {{/if}}
</script>

<script type='text/x-handlebars' data-template-name='/connectors/user-card-metadata/external-site-link'>
  {{#if externalSiteLink}}
    <h3 class="user-card-public-field">
      <span class="user-field-name">{{externalSiteLink.name}}</span>:
      <span class="user-field-value">{{{externalSiteLink.link}}}</span>
    </h3>
  {{/if}}
</script>

```

Update:

```plaintext
const url = "http://myawesomewebsite.com/user/" + userFields[userFieldId];

```

with your website user profile link.

If your field name is different than _User Profile_ make sure you update:

```plaintext
const externalUserIdField = siteUserFields.filterBy('name', 'User Profile')[0]

```

with your field name.

### Voilà 🎉

That’s it, you will now see _User Profile_ link on user profile page:

 ![](https://global.discourse-cdn.com/meta/original/3X/7/1/719a2412a72a28cd327518862ae8748ad293299a.png)

and user card:

 ![](https://global.discourse-cdn.com/meta/original/3X/c/a/ca61ea9e8fa9b8046cd59c524f7e0f76c912211f.png)

---

_[View the full topic](https://meta.discourse.org/t/retired-use-an-id-in-a-custom-user-field-to-link-to-a-users-external-profile/41218)._