UFE External Events

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

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.

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.

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.

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

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.

Updated on: 02/04/2026