> ## Documentation Index
> Fetch the complete documentation index at: https://umbrella-docs.info/llms.txt
> Use this file to discover all available pages before exploring further.

# Hosted UI

> Initialize the IdCanopy hosted UI with the uiHandle.

# Hosted UI

Use the `uiHandle` returned from the **Handshake (Create Journey)** call to start the verification journey.\
The hosted UI can be launched either inside an **iframe** or via **full-page redirect**.

## Frontend Initialization

### Iframe

Create an `<iframe>` element and set its `src` to the handshake `uiHandle`.

Restrict where the iframe may be embedded (recommended): configure\
`Content-Security-Policy: frame-ancestors` or use `X-Frame-Options`.

```ts theme={null}
// After the Handshake → you have { uiHandle }

const iframe = document.getElementById("idcanopyFrame");
iframe.src = uiHandle;
```

### Redirect

Navigate the user directly to the hosted UI:

```ts theme={null}
window.location.href = uiHandle;
```

Optionally, your backend may issue a short-lived `302` redirect to reduce URL exposure in client logs.

***

## Frontend Events (Optional)

If you build your own wrapper around the iframe or redirect flow, you may emit custom events such as:

* journeyStarted
* journeyStepCompleted
* journeyCompleted
* journeyFraudAlert
* uiClosed
* uiTimeout

These events are **not emitted by the SDK**; they are optional and for your own analytics/telemetry.

***

## Example Integration

```ts theme={null}
// After the Handshake → you have { uiHandle }

// Option A: iframe
const iframe = document.getElementById("idcanopyFrame");
iframe.src = uiHandle;

// Option B: redirect
// window.location.href = uiHandle;

// Optional: simple activity tracker
let lastActiveTime = Date.now();
const updateActivity = () => (lastActiveTime = Date.now());

document.addEventListener("mousemove", updateActivity);
document.addEventListener("keypress", updateActivity);

// Warn user before navigating away from the verification flow
window.onbeforeunload = (e) => {
  const message = "Are you sure you want to leave the verification process?";
  e.returnValue = message;
  return message;
};

// Optional: inactivity warning
setInterval(() => {
  const fiveMinutes = 5 * 60 * 1000;
  if (Date.now() - lastActiveTime > fiveMinutes) {
    console.warn("User inactive for more than 5 minutes");
  }
}, 60 * 1000);
```