# Create a Zoom App

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

By creating a Zoom App, you are taking the first step to integrating with Zoom services such as [Zoom Apps APIs](https://appssdk.zoom.us/classes/ZoomSdk.ZoomSdk.html) and [Zoom Restful APIs](/docs/api). Your app calls the APIs on behalf of the Zoom users who authorize and install your app.

For a video walk-through, see [How to Create a Zoom App](https://www.youtube.com/watch?v=otlyDxnU-RI).

---

## Prerequisites

-   You have read [Before you start](/docs/build-flow/before-you-build/) .
-   You have a Zoom account.
-   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).

---

## Enable developer tools

By default, developer tools are disabled in the Zoom Client. To enable them, set `webview.context.menu` to `true` before launching the Zoom Client.

**Note:** You must restart the Zoom app.

**On Windows**:

Add the following to the `zoom.us.ini` file. This file is located in the `%appdata%/Zoom/data` directory.

```ini
[ZoomChat]
webview.context.menu=true
```

**On Mac** :

```ini
defaults write ZoomChat webview.context.menu true
```

---

## 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.

---

## 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).