Action buttons and links

Action buttons and action links let you inject buttons or links inside chat messages that, when clicked, trigger an event in your JavaScript code.

To add an action to your message, send a message using the REST API and 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 onMessageAction event with the action myAction:

JavaScript


1// js
2function handleMessageAction(event) {
3  console.log(`Action ${event.action} in message ${event.message.id}`);
4}
5
6// template
7<t-chatbox 
8  /* ..other props.. */
9  @messageAction="handleMessageAction"
10/>

Parameters

You can attach additional parameters to the action button or action link with the query string syntax. As an example, let's say we wanted to ask the user to pick which color they like more, out of red or blue. You could send a message that looks like this:


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

A chat message with two buttons asking the user if they prefer the color red or the
color blue

Next, you can access the parameters in onMessageAction:

JavaScript


1// js
2function handleMessageAction(event) {
3  if (event.action === 'color') {
4    if (event.params.choice === 'red') {
5      alert('Roses are red!');
6    } else if (event.params.choice === 'blue') {
7      alert('Violets are blue!');
8    }
9  }
10}
11
12// template
13<t-chatbox 
14  /* ..other props.. */
15  @messageAction="handleMessageAction"
16/>

Customizing the appearance

Action buttons and links are rendered as <button> and <a> elements respectively, with a t-action attribute set to the action name.

For example, if you want to customize the appearance of an action button, add CSS like this:


1button[t-action] {
2  background-color: red;
3}

Or if you want to style only specific action buttons, do something like this:


1button[t-action="color"] {
2  background-color: green;
3}

Similarly, for action links, you can use the a[t-action] selector.