> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://docs.helixo.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# UFE External Events

> UFE custom events helps you to do custom actions at various phases.

|| **Prerequisite**
|| The following part of the article requires development knowledge. 
|| Don't do it without proper knowledge.

## 1. Add to cart event

The  `UFE_ADDTOCART` event will emit when a product is added to cart using UFE widget. You will get added products details along with the event.

* The callback function takes an `event` parameter, which represents the event object dispatched when the `'UFE_ADDTOCART'` event occurs.

* Inside the callback function, `event.detail` is used to access the parameters passed with the event. These parameters represent the added product.

* Developers can add their custom logic or actions within the callback function to handle the event, such as triggering external analytics for adding the product to the cart.

```javascript
document.addEventListener('UFE_ADDTOCART', (event) => {

	//Add your code here to execute the action on add to cart
	//Extract the parameters passed with the event
      const params = event.detail;
  });
```

## 2. UFE checkout event

The  `UFE_CHECKOUT` event will emit when checkout button is clicked inside the UFE widget.The `detail` property of the event contains the list of items to be added to the cart.

* Event listener for 'UFE_CHECKOUT' event.

* This listener executes actions when the checkout button is clicked inside the UFE widget.

* The detail property of the event contains the list of items to be added to the cart.

```javascript
document.addEventListener('UFE_CHECKOUT', (event) => {

	//Add your code here to execute the action on checkout
	//Extract the parameters passed with the event
      const params = event
  });
```

## 3. UFE pop-up close event

Subsequently, the `popupCloseEvent` function is used to create a custom event named `UFE_POPUP_CLOSE` passing `productAdded` as a parameter named `itemAdded`. This event could potentially be used to do certain actions based on the product that was added to the cart.

* Event listener for 'UFE_POPUP_CLOSE' event.

* This listener executes actions to close an upsell popup based on the product that was added to the cart.

* The detail parameter contains parameters related to closing the popup, such as the added product.

```javascript
document.addEventListener('UFE_POPUP_CLOSE', (event) => {

	//Add your code here to execute the action on pop-up widget close
	// Extract the parameters passed with the event
    const params = event.detail;
                        
  });
```

## 4. UFE upsell rejected event

The  `UFE_ADDTOCART` event will emit when the upsell is rejected. The detail parameter is what we us to emit the event.

* Event listener for 'UFE_UPSELL_REJECTED' event.

* This listener executes actions when the upsell is rejected.

* The detail parameter contains data related to the event emission

```javascript
document.addEventListener('UFE_UPSELL_REJECTED', (event}) => {

	//Add your code here to execute the action on reject event
	// Extract the parameters passed with the event
    const params = event.detail;
                        
  });
```

Hope you've got some value from this article. Let us know your feedback 🙂  We are excited to hear your thoughts.


|| **Did we miss something?**
|| No worries! Message us by clicking the chat icon 💬  inside the app.
|| Or Just email our team at [support@helixo.co](mailto:support@helixo.co) ✌️