> ## Documentation Index
> Fetch the complete documentation index at: https://developer.watson-orchestrate.ibm.com/llms.txt
> Use this file to discover all available pages before exploring further.

# customEvent

Triggered for custom events such as button clicks within the chat. This event provides a generic pattern for handling custom interactions.

## Event properties

<ParamField path="type" type="string" required>
  Always `'customEvent'`.
</ParamField>

<ParamField path="customEventName" type="string" required>
  The name of the custom event, for example. `'buttonItemClicked'`.
</ParamField>

<ParamField path="contentItem" type="object" required>
  The message item that triggered the event.
</ParamField>

<ParamField path="message" type="object" required>
  The complete message containing the item.
</ParamField>

### Custom event names

* **`buttonItemClicked`**\
  Triggered when a button in a response is clicked.

## Example

```javascript theme={null}
instance.on('customEvent', (event, instance) => {
    console.log('Custom event triggered:', event.customEventName);
    
    if (event.customEventName === 'buttonItemClicked') {
        console.log('Button clicked:', event.contentItem);
        
        // Handle button click
        const buttonId = event.contentItem.id;
        const buttonLabel = event.contentItem.label;
        
        // Perform action based on button
        handleButtonAction(buttonId, buttonLabel);
        
        // Track analytics
        analytics.track('button_clicked', {
            buttonId,
            buttonLabel,
            messageId: event.message.id
        });
    }
});
```

<Card title="Do you need practical examples?" icon="text-align-start" href="https://www.ibm.com/docs/SSAVQO/deploy/web_chat_agent/tutorials/tutorials_lp.html" arrow="true" cta="Learn with walk-throughs" horizontal>
  Learn how to apply the features available for embedded chat into your implementation with guidance and examples.
</Card>