Action Buttons and Links

To add an action to your message, use this syntax:

• For action buttons:

  1<actionbutton:myAction|I am an action button!>

• For action links:

  1<actionlink:myAction|I am an action link!>

Clicking on either one of these will emit a Custom Message Action for the action myAction:

1chatbox.onCustomMessageAction('myAction', (event) => {
2  console.log('Action has been triggered!');
3});

Note: To improve security, users cannot add action buttons/links to their messages when sending them in the chat UI. It only works with messages sent via the REST API.

1Which color do you prefer?
2
3<actionbutton:color?choice=red|Red> <actionbutton:color?choice=blue|Blue>

1chatbox.onCustomMessageAction('color', (event) => {
2  if (event.params.choice === 'red') {
3    alert('Roses are red!');
4  } else if (event.params.choice === 'blue') {
5    alert('Violets are blue!');
6  }
7});

Inside the Theme Editor, action buttons and action links are available as built-ins in the following components:

• UserMessage
• SystemMessage
• MessageBody
• ChatHeader
• MessageField
• ConversationListHeader
• ConversationListItem

If you want to render buttons from the example in the previous section in the Theme Editor, use this:

1<ActionButton action="color" data-choice="red">Red</ActionButton>
2<ActionButton action="color" data-choice="blue">Blue</ActionButton>

Or as links:

1<ActionLink action="color" data-choice="red">Red</ActionLink>
2<ActionLink action="color" data-choice="blue">Blue</ActionLink>

You can also add a custom CSS class:

1<ActionButton action="my-action" class="my-class">
2  Click me!
3</ActionButton>

Note: When an ActionButton or an ActionLink is placed in one of the following components:

• ChatHeader
• MessageField
• ConversationListHeader
• ConversationListItem

It will emit a Custom Conversation Action instead of a Custom Message Action. Also, actions triggered from inside ConversationListHeader will have e.conversation equal to null, while those triggered from ConversationListItem will have the property set to the relevant conversation.

The action buttons used in the previous examples will result in this DOM:

1<button data-action="color" data-choice="red">Red</button>
2<button data-action="color" data-choice="blue">Blue</button>

If we had used action links, we would get this instead:

1<a data-action="color" data-choice="red">Red</a>
2<a data-action="color" data-choice="blue">Blue</a>

In other words, the provided action is attached as data-action. Any other parameters are also added as data-* attributes. This lets you style specific actions buttons/links with the button[data-action="color"] and a[data-choice="red"] selectors.

By default, action links look just like regular links. To make them appear differently from regular links, use the .text a[data-action] selector inside the MessageBody component in the Theme Editor.

To customize the default appearance of action buttons, you'll need to change the styles in a few places:

• Inside the UserMessage component:

1.by-me button[data-action] {
2  /* Buttons in messages by the current chat participant */
3}
4
5.by-other button[data-action] {
6  /* Buttons in messages from other chat participants */
7}

• Inside the SystemMessage component:

1.message button[data-action] {
2  /* Buttons in system messages */
3}

• Inside the ChatHeader component:

1.header button[data-action] {
2  /* Buttons in the chat header */
3}