**Source URL:** https://general.veevavault.dev/medical/omnichannel/guides/creating-custom-applications.md

# Creating Custom Applications

Your custom Omnichannel application must include both UI and custom logic.

## Creating the Call Controls UI {#creating-the-call-controls-ui}

Your custom application must include HTML and CSS to create the UI elements agents will use from the Call Controls UI. These Call Controls appear within MedInquiry. Some telephony providers offer embeddable interfaces that you can use in your application.

The following example shows HTML to create a simple UI with buttons that correspond to Omnichannel JS API events.

```
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <button id="vm-omniconnect-sign-in" type="button">Sign in</button>
    <button id="vm-omniconnect-logout" type="button">Logout</button>
    <button id="vm-omniconnect-accept-call" type="button">Accept Call</button>
    <button id="vm-omniconnect-end-call" type="button">End Call</button>
    <button id="vm-omniconnect-user-available" type="button">User Available</button>
    <button id="vm-omniconnect-user-offline" type="button">User Offline</button>
  </body>
</html>

```

## Creating Custom Logic {#creating-custom-logic}

You must import Omnichannel JS API into your application.

```
import {
  omniconnectEvent,
  AgentStatus
} from "./vault-medical-omniconnect-{version}{release}.js";

```

You can find the `version` and `release` in the filename of the downloaded API. For example, `vault-medical-omniconnect-24.2.0-release10001.zip`.

<Aside type="tip">As a best practice, we recommend creating a listener function for each element in the Call Controls UI. Within this function, you will provide custom logic and map events from Vault to your telephony provider. See the reference for your Omnichannel JS API version for details.</Aside>
When your application is complete, you must deploy it to the platform of your choice. Make a note of the application URL as you will need it to configure the *Connection* record in the next step.



---

**Previous:** [Guides](/medical/omnichannel/guides)  
