# Handling DOM Events

> For the complete documentation index, see [llms.txt](/llms.txt).

**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](/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

  ```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

  ```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     |