If your users have profile pages in your app, you may want to link to them directly from your TalkJS chat. TalkJS’s action buttons feature makes this easy by allowing you to add custom buttons to your chat header. In this tutorial, we'll show you how to add buttons that redirect you to a user’s profile page when you click on their name or profile picture:

Demonstration of the clickable name and profile picture feature. The user clicks on a friend's name and is taken to their profile page. They then click on another friend's profile picture and again get taken to their profile page.
Demonstration of clickable name and profile picture

To follow along with the tutorial, you'll need:

  • A TalkJS account. TalkJS provides a ready-to-use chat client for your application. Your account gives you access to TalkJS's free development environment.
  • An existing application that uses TalkJS's JavaScript Chat SDK. See our Getting Started guide for an example of how to set this up.
  • An installation of Node.js along with the npm package manager. We’ll use this to create our backend server.

Ideally, you'll also have some existing user profiles in your application to link to. If you don't yet have any user profiles, or just want to test the feature out, the GitHub repository for this tutorial has an example Node.js application that serves an index page with a list of test users, and a profile page for each user. Clicking on a test user in the list displays a TalkJS conversation with that user.

In the following sections, we’ll demonstrate how to add an action button to the chat header of each conversation that links to the user’s profile page. We’ll first add an action button to the chat header of our theme, and then add an event handler to our frontend code that navigates to the profile page.

Add action buttons to your theme

To add the action buttons to your theme, go to the Themes tab of the TalkJS dashboard, and select to Edit the active theme for your "default" role. (You can find the active theme in the settings for the "default" role in the Roles tab of the dashboard.)

In the list of Built-in Components, select ChatHeader. (Note: This component is available in most themes, but is currently not available in the "group_chat" theme. For this theme you will not be able to customize it in this way.)

We'll add action buttons to each user's name in the chat header, and also to the conversation image in the case when there's only one other participant in the chat.

Add a button to the user's name

Find the code for displaying text in the chat header (something like <span>{{user.name}}</span>) and replace it with the following:

<span><ActionButton action="goToProfile" data-userId="{{user.id}}">{{user.name}}</ActionButton></span>

Note that the  <span>{{user.name}}</span> might be in two branches of a t:if conditional block, one for if there is a conversation subject and one without – you'll want to replace it in both cases.

The updated code creates a button with the user’s name on it, using the {{user.name}} variable (see Using data in your templates):

Chat header with clickable button for the user's name
Chat header with clickable button for the user's name

When you click on the button, it will send the goToProfile event with the user’s ID as a data parameter.

If you are in a chat with more than one other user, you will see a button for every name displayed in the chat header:

Chat header with buttons for multiple users
Chat header with buttons for multiple users

Add a button to the user's profile picture

Find the code for displaying the conversation image (something like <ConversationImage conversation="{{ conversation }}" /> ) and replace it with the following:

<ActionButton t:if="{{ conversation.otherParticipants.length == 1 }}" class="action-button-image" action="goToProfile" data-userId="{{ conversation.otherParticipants[0].id }}"><ConversationImage conversation="{{ conversation }}" /></ActionButton>
<ConversationImage t:else conversation="{{ conversation }}" />

In the <style> section at the bottom of the template file, add the following CSS to style the button:

.header .image button[data-action] {  border-radius: 50%;}

The conversation image is now a clickable button in the case when there's one other participant in the conversation:

Clickable profile picture in the chat header
Clickable profile picture in the chat header

If there's more than one other participant (or if you're talking to yourself!) the conversation image still displays as normal, without a button.

Listen for the custom conversation action

Next, we’ll listen for the goToProfile event. In your frontend TalkJS code, add the following:

inbox.onCustomConversationAction("goToProfile", (event) => {
location.href = `/user-profile/${event.params.userId}`;
});

This calls the onCustomConversationAction method on the TalkJS inbox and navigates to the user’s profile, using the userId parameter passed by the conversation action. Now when you click on a user's name or profile picture you will be taken to their profile:

Clicking on either the user's name or profile image in the chat header takes you to their profile


Conclusion

You now have a working demonstration of how to add a profile link in the chat header! To recap, in this tutorial we have:

  • Added an action button to the chat header of our theme.
  • Added an event handler that navigates you to the user's profile page when you click the button.

For the full example code for this tutorial, see our GitHub repo.

If you want to learn more about TalkJS, here are some good places to start:

You’ve successfully subscribed to TalkJS
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Your link has expired
Success! Check your email for magic link to sign-in.