> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Blocks Widget Events

## Article: Widget API Events

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/widget-api/blocks-widget-events.md

## Article Content:

# Blocks Widget Events

<blockquote class="caution">

**Editor compatibility**

Wix Blocks apps aren't supported in the Wix Harmony editor. Existing Blocks apps remain available for purchase on the Wix App Market for Wix Editor and Wix Studio sites. To learn more, see [About Wix Harmony and Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-harmony-and-blocks.md).

</blockquote>

Add an event when you want to provide information about actions that happen in the widget to the site owner. For example, when a customer adds a product to the cart. 

**To add a new event:**

1.  Click the **Widget API**  ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2021/06/10/9aa25a00-57bb-465d-b443-4e14a5478da3/67b8bc89-773d-4775-a0d5-b1585843da7b.jpg)  icon.
2.  Click **Add New Public Event** or hover over **Events** and click the  ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2021/06/10/be929c05-3c41-452d-ae3a-1503546f8883/b6abb229-8c19-4d2b-9522-d42d125dcc76.png)  icon. 

<div style="text-align:center">

![add new event](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6b5c7381-912e-4754-99e2-d23157db088c/2022/07/17/02590585-2653-4279-a46b-06674dce7740/8c33624a-7dd8-476f-9bf4-58b795a1f17e.png)

</div>

3\.  Name your event and provide a description. 

<div style="text-align:center">

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6b5c7381-912e-4754-99e2-d23157db088c/2022/07/17/92405389-0a85-400d-9713-72ea1efe3581/15528d8f-57fc-4062-a582-20e6c48addda.png)

</div>

4\. Fire the event from your widget code. 

Use this syntax:

```ts
$widget.fireEvent('eventName', {eventObject})
```

Define the condition for firing the event and, optionally, send event data. For example: 

```javascript
$w(`#button1`).onClick(() => {
  $widget.fireEvent('addedToCart', {productId: product.id, customerId: customer.id})
});
```
5\. You can [catch your event](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/widget-api/use-the-widget-api-when-editing-a-site.md) from two places

* From any site where your widget is installed.
* From any widget of your app to which you added this widget as an inner widget.   

<blockquote class="tip">
<strong>Don't forget to document</strong>

Make sure to document your widget API by describing any property, event or function you add to it. These descriptions are available to Wix users who install your widget.

</blockquote>