# Handling DOM Events

**Handling Continuity via DOM Events**

When a user interacts with the embedded components specific DOM events are dispatched to notify your platform that the user needs to perform an action. These can be found [here](https://docs.unipaas.com/docs/ui-web-embeds-integration-guide#handle-dom-events)

_**Example**_

For onboarding, the completeOnboarding event indicates that a vendor has an incomplete application.

Below are two technical approaches to handling this event.

1. Hosted Redirect
   Use this method if you want to redirect the user to a standalone, Unipaas-hosted onboarding page. When the event is triggered, call the Unipaas API from your backend to generate a secure link.

_**Technical Steps:**_

Listen for the completeOnboarding event on the component's parent container.

Trigger a request to your backend to call the POST `/platform/vendors/{"vendor Id"}/links` endpoint. [Docs](https://sandbox.unipaas.com/platform/docs/#/Vendor/VendorLinkController_createLink)

Open the resulting URL in a new tab or redirect the current window.

```javascript
// 1. Initialize the Pay Portal
const payPortal = components.create("payPortal");
const container = document.getElementById("pay-portal-container");
payPortal.mount("#pay-portal-container");

// 2. Listen for the completion event
container.addEventListener("completeOnboarding", async (e) => {
    // Call your backend to generate the link
    const response = await fetch(`/api/generate-onboarding-link?vendorId=${vendorId}`, { method: 'POST' });
    const { url } = await response.json();
    
    // Redirect the user
    window.open(url, '_blank'); 
});
```

2. Embedded Flow

   Use this method to load the onboarding UI directly into a designated area of your application without leaving the page. This provides the most seamless user experience.

   _**Technical Steps:**_

   Ensure your container (e.g., `<div id="onboarding" />`) is present in the DOM.

   On the completeOnboarding event, initialize the onboarding component.

   Mount the component to your specific container.

```javascript
const portalDiv = document.getElementById("payportal");

portalDiv.addEventListener("completeOnboarding", () => {
  // 1. Initialize the onboarding component
  // Note: Ensure your initial Access Token includes the 'onboarding_write' scope
  const onboarding = components.create("onboarding");

  // 2. Mount to the dedicated container
  onboarding.mount("#onboarding");
  
  // Optional: Scroll the user to the onboarding section
  document.getElementById("onboarding").scrollIntoView({ behavior: 'smooth' });
});
```

**Comparison**

| Feature          | Hosted                                           | Embedded                                      |
| ---------------- | ------------------------------------------------ | --------------------------------------------- |
| User Experience  | Simpler to implement                             | Seamless transition within your own UI        |
| API Requirements | Requires call to /platform/vendors/{" id"}/links | Requires onboarding_write scope in Auth token |
| UI               | Browser handles window management                | Requires container with min-width of 450px    |