> For the complete documentation index, see [llms.txt](https://docs.zep.us/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.zep.us/zep-script/zep-script-api/scriptwidget/event-listeners.md).

# Event Listeners

### Introduction

Provided below are functions that activate when data is sent to the App from the widget.

<table><thead><tr><th width="190">Name</th><th>Description</th></tr></thead><tbody><tr><td>onMessage</td><td>Function that activates when messages sent from widget are received on the App</td></tr></tbody></table>

## 📚 API Explanation and Example

### onMessage

{% hint style="info" %}
widget.onMessage.Add(function(player, data: any){});
{% endhint %}

Callback function that activates when a message is sent from the widget to the App.

**Parameters**

<table><thead><tr><th width="122.33333333333331">Name</th><th width="116">Type</th><th>Description</th></tr></thead><tbody><tr><td>player</td><td>Player</td><td>The player who owns the widget</td></tr><tr><td>data</td><td>Object</td><td>The message sent from the widget to the App</td></tr></tbody></table>

**Example**

Create a function to close the widget screen when x is pressed.

{% file src="/files/yRUGsi9d1nruA5NR1dPk" %}

<div align="left"><figure><img src="/files/52Rc6zGEK9zC5x4YSmDm" alt=""><figcaption></figcaption></figure></div>

```jsx
// Activates function when a player enters
App.onJoinPlayer.Add(function (player) {
	player.tag = {
		widget: null,
	};

	player.tag.widget = player.showWidget("sample.html.html", "top", 600, 500);
	player.tag.widget.onMessage.Add(function (player, msg) {
		// Closes the widget when the 'type: close' message is sent from the widget to the App 
		if (msg.type == "close") {
			player.showCenterLabel("Widget has been closed.");
			player.tag.widget.destroy();
			player.tag.widget = null;
		}
	});
});
```

**sample.html**: Button and script section

```jsx
<i onclick="closeWidget()" class="fa-solid fa-xmark"></i>
<script type="text/javascript">
			// Calls the function when x button is pressed
			function closeWidget() {
				// Sends message to App 
				window.parent.postMessage(
					{
						type: "close",
					},
					"*"
				);
			}
</script>
```