Use custom conversation actions

Custom conversation actions let you define your own actions in the conversation menu, such as mute, report, or archive a conversation. This guide gives an overview of how you can handle custom conversation actions in your app code.

Create a custom conversation action

To set up a custom conversation action, you can either create it on the Chat UI page in your dashboard or it directly to a theme component.

Add in chat UI settings

To create a custom conversation action in your chat UI settings:

  1. Go to the Chat UI page of your TalkJS dashboard.
  2. In the section Custom conversation actions, select the Add action button.
  3. Specify a name, label, and select which users your action should be available to. You'll use the name when handling your custom conversation action with the JavaScript SDK.

Your custom conversation action is saved automatically.

Add to theme

You can create a custom conversation action by adding an action button directly to one of the following theme components:

  • ChatHeader
  • ConversationListHeader
  • ConversationListItem
  • MessageField

To add a custom conversation action to your theme:

  1. Go to the Themes page of your TalkJS dashboard.
  2. Select the theme to which you'd like to add a custom conversation action.
  3. Add an action button directly to the theme component in which you want to add a custom action. For example:
1<ActionButton action="mute" class="mute">Mute conversation</ActionButton>

Note that actions triggered from inside ConversationListHeader have e.conversation equal to null, while those triggered from ConversationListItem have the property set to the relevant conversation.

Handle custom conversation actions

When a user selects a custom action, that triggers an event. To handle custom conversation actions, you can listen for these events using the JavaScript SDK.

Use the onCustomConversationAction method on a Chatbox, Inbox or Popup UI to listen for custom conversation actions.

For example, you can handle an action named mute as follows:

1chatbox.onCustomConversationAction('mute', (event) => {
2  // Send the message to your backend here, so a moderator can review it.
3  console.log('Mute conversation with id:', event.conversation.id);
4});

You can also attach additional parameters to a custom conversation action. You can access such parameters through the params property:

1chatbox.onCustomConversationAction('selectUser', (event) => {
2  console.log('Selected user with id:', event.params.selectedId);
3});

For the full reference information for handling custom conversation actions, check out onCustomConversationAction.