---
url: https://talkjs.com/docs/Guides/Web_Components/Action_Buttons_Links
---

# Action buttons and links

Trigger custom code from buttons and links in messages.

Ask a question Copy for LLM [View as Markdown](/docs/Guides/Web_Components/Action_Buttons_Links.md)
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](/docs/REST_API/Messages/#send-a-message) and use this syntax:

- For action buttons:

```
<actionbutton:myAction|I am an action button!>
```
- For action links:

```
<actionlink:myAction|I am an action link!>
```
Clicking on either one of these will emit a [onMessageAction](/docs/UI_Components/Web_Components/t-chatbox/#ChatboxProps__onMessageAction) event with the action `myAction`:

**Vue**
```js
// js
function handleMessageAction(event) {
  console.log(`Action ${event.action} in message ${event.message.id}`);
}

// template
<t-chatbox 
  /* ..other props.. */
  @messageAction="handleMessageAction"
/>
```

**Svelte**
```svelte
<t-chatbox 
  /* ..other props.. */
  onMessageAction={(event) => {
    console.log(`Action ${event.action} in message ${event.message.id}`);
  }}
/>
```

**JavaScript**
```js
chatbox.addEventListener('messageaction', (event) => {
  console.log(`Action ${event.action} in message ${event.message.id}`);
});
```

### Parameters

You can attach additional parameters to the action button or action link with the [query string](https://en.wikipedia.org/wiki/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:

```
Which color do you prefer?

<actionbutton:color?choice=red|Red> <actionbutton:color?choice=blue|Blue>
```

Next, you can access the parameters in [`onMessageAction`](/docs/UI_Components/Web_Components/t-chatbox/#ChatboxProps__onMessageAction):

**Vue**
```js
// js
function handleMessageAction(event) {
  if (event.action === 'color') {
    if (event.params.choice === 'red') {
      alert('Roses are red!');
    } else if (event.params.choice === 'blue') {
      alert('Violets are blue!');
    }
  }
}

// template
<t-chatbox 
  /* ..other props.. */
  @messageAction="handleMessageAction"
/>
```

**Svelte**
```svelte
<t-chatbox 
  /* ..other props.. */
  onMessageAction={(event) => {
    if (event.action === 'color') {
      if (event.params.choice === 'red') {
        alert('Roses are red!');
      } else if (event.params.choice === 'blue') {
        alert('Violets are blue!');
      }
    }
  }}
/>
```

**JavaScript**
```js
chatbox.addEventListener('messageaction', (event) => {
  if (event.action === 'color') {
    if (event.params.choice === 'red') {
      alert('Roses are red!');
    } else if (event.params.choice === 'blue') {
      alert('Violets are blue!');
    }
  }
});
```

## 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:

```css
button[t-action] {
  background-color: red;
}
```

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

```css
button[t-action="color"] {
  background-color: green;
}
```

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