# Create Contact Center apps

<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

## Prerequisites

-   You have read [Before you start](/docs/build-flow/before-you-build/) .
-   You have a Zoom account.
-   Zoom Apps SDK 0.16.27 or higher.
-   Zoom Desktop client 6.0.0 or later.
-   To support Zoom Contact Center engagement switching, an app backend is recommended to store engagement state.
-   You are either the Zoom account owner, account admin, or have been assigned the **Zoom for developers** role.

    To enable the **Zoom for developers** role, log into the Zoom web portal as admin and go to **User Management** > **Roles** > **Role Settings** > **Advanced features**, and select the **View** and **Edit** checkboxes for **Zoom for developers**.

    ![](/img/UBF-role-prerequisite.png)

    For more information, see [Using role management](https://support.zoom.us/hc/en-us/articles/115001078646).

---

## Creating a Zoom App

1. Follow the steps in the [Quick Start Guide](/docs/build-flow/quick-start-guide/) to create an app.
2. On the **Scopes** page, select the scopes specific to Zoom Apps:
    - `zoomapp:inmeeting` to make the app available in Meetings.
    - `zoomapp:inwebinar` to make the app available in Webinars.
3. In the **In-client App Features** section, select the Zoom features available to your app users in the Zoom client. To build Contact Center apps, it is mandatory to use [Zoom App SDK](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html); enable **Zoom App SDK** and select **+ Add APIs** to add APIs and events.

    These are the Zoom App SDK APIs and events are commonly used with Contact Center apps. You can add additional Zoom App SDK scopes and features, such as calling Zoom Marketplace OpenAPIs and received Marketplace Webhooks. The additional features will vary depending on your app requirements.

    Contact Center specific Zoom Apps SDK APIs:

    - [getAppVariableList](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html#getAppVariableList)
    - [getEngagementContext](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html#getEngagementContext)
    - [getEngagementStatus](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html#getEngagementStatus)
    - [getEngagementVariableValue](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html#getEngagementVariableValue)

    Contact Center specific Zoom Apps SDK Events:

    - [onEngagementContextChange](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html#onEngagementContextChange)
    - [onEngagementStatusChange](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html#onEngagementStatusChange)
    - [onEngagementVariableValueChange](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html#onEngagementVariableValueChange)

    We recommend you review the [Zoom Apps SDK reference](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html) for any other APIs and events that you may need to include in your app, such as:

    - [appPopout](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html#appPopout)
    - [getRunningContext](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html#getRunningContext)
    - [getAppContext](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html#getAppContext)
    - [Authorize](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html#authorize)
    - [promptAuthorize](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html#promptAuthorize)
    - [onAppPopout](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html#onAppPopout)
    - [onAuthorized](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html#onAuthorized)
    - [onRunningContextChange](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html#onRunningContextChange)

---

## Enabling iframes in Zoom Workplace App

The Zoom Workplace app uses native webviews. In some cases, this causes PWA apps pop-over iframes to be covered by the app's native webview.
Do the following to enable iframes to be displayed full-screen in Zoom Workplace.

### Prerequisites

-   Zoom PWA client 7.2.0 or higher.
-   Zoom Apps SDK 0.16.41 or higher.

---

1. Enable PWA client support. Go to the **Features** page > **Surface** section. Enable **PWA Client**.

    ![](/img/UBF-pwa.png)

2. Download and install the [Zoom Apps SDK](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html). Add [appssdk.zoom.us](http://appssdk.zoom.us) to the script-src in Content-Security-Policy. See sample code for headers below.

3. Get the app context token.

    Use the `getAppContext()` API to get the latest app context token from the PWA client. The API returns a token that contains signed app context data for secure backend validation.

    > **Note:** Do not use the `x-zoom-app-context` header. The header is usually sent by the Zoom client, however, it is not sent by the PWA client. Remove any usage of this header from the backend.

    1. Call `getAppContext()` API after config().
    2. Pass the context via a `GET` request to the backend.
    3. Decrypt the app context in the backend, and use the decrypted app context information as required.

    Add cross-origin headers:

    ```plaintext
    cross-origin-embedder-policy":"require-corp"
    cross-origin-resource-policy":"cross-origin"
    ```

4. Add frame-ancestors to CSP (merge into existing CSP)

    ```plaintext
    frame-ancestors https://*.zoom.us https://*.zoomdev.us;
    ```

5. Remove X-Frame headers from your app configuration:

    ```plaintext
    X-Frame-Options "DENY";
    frame-ancestors 'none'; Content-Security-Policy
    ```

---

### Example Context Security Policy

**Frontend:**

```plaintext
add_header Content-Security-Policy "default-src 'none'; object-src 'none'; worker-src 'none'; connect-src 'self'; script-src 'self' appssdk.zoom.us";
add_header Strict-Transport-Security "max-age=31536000";
add_header X-Content-Type-Options "nosniff";
add_header Referrer-Policy "strict-origin-when-cross-origin";
add_header Cross-Origin-Resource-Policy "cross-origin";
add_header Cross-Origin-Embedder-Policy "require-corp";
```

**Backend:**

```plaintext
securityHeaders: {
    strictTransportSecurity: 'max-age=31536000',
    xContentTypeOptions: 'nosniff',
    contentSecurityPolicy: 'default-src 'none'; object-src 'none'; worker-src 'none'; connect-src 'self' ${isDevelopment ? ' ws: wss:' : '' }; script-src 'self' appssdk.zoom.us ; font-src 'self'; img-src 'self';
    referrerPolicy: 'no-referrer',
    crossOriginResourcePolicy: 'cross-origin',
    crossOriginEmbedderPolicy: 'require-corp',
},
```

---

### Cookie sessions

Make these changes if you have set up a Cookie Session.

-   Add `sameSite: 'none'` in Cookie Session.
-   Add `secure: true`, in Cookie Session.
-   Remove `httpOnly: true` from Cookie Session (if present).