Video SDK UI Toolkit components are here!

We are excited to announce the Zoom Video UI Toolkit components for web, an all new way to build with the Video SDK and UI Toolkit. UI Toolkit components are prebuilt video chat components that are built on top of the Zoom Video SDK and make it easier for developers to build applications with video, audio, and chat capabilities.

In under a few lines of code, developers can integrate the following UI Toolkit components into their web application:

Here is an example of how to implement the UI Toolkit components on web:

1. Install the UI Toolkit:

   $ npm install @zoom/videosdk-ui-toolkit --save
   

2. Import the UI Toolkit and configure your session settings, making sure to include your token:

   import uitoolkit from "@zoom/videosdk-ui-toolkit";
   var config = {
       videoSDKJWT: "TOKEN",
       sessionName: "SessionA",
       userName: "UserA",
       sessionPasscode: "abc123",
       features: ["video", "audio", "share", "chat", "users", "settings"],
   };
   

3. Create a container for the wrapper and call uitoolkit.showUitoolkitComponents, passing in the container and your session config:

   </div>
   

   var wrapperContainer = document.getElementById("wrapperContainer");
   uitoolkit.showUitoolkitComponents(wrapperContainer, config);
   

4. Now that the wrapper is placed in your application, its time to add the UI Toolkit components:

   <div id="wrapperContainer">
       ...
       <div id="controlsContainer">...</div>
   </div>
   

   var controlsContainer = document.getElementById("controlsContainer");
   uitoolkit.showControlsComponent(controlsContainer);
   

Now that you see just how easy it is to implement UI Toolkit components, lets take a look at what you can build with them!

Here is an example of how to build the above layout:

1. First, we will need to create a div to contain everything. For this, we will use the div with id #sessionContainer, with the following css applied.

      </div>
   

   #sessionContainer {
       display: flex;
       width: 100vw;
       height: 100vh;
       background-color: #282c34;
   }
   

2. Second, we will need to create two sections: left and right. These will seperate the chat section with the video and controls section.

   <div id="sessionContainer">
       <div className="left"></div>
   </div>
   

   #sessionContainer .left {
       width: 20%;
       padding: 10px;
   }
   #sessionContainer .right {
       display: flex;
       flex-direction: column;
       width: 65%;
       height: 100%;
       padding: 0 7.5%;
   }
   

3. Third, we will place the chat component's container in the left section and the video component and controls component's containers in the right section.

   <div className="left">
       <div id="chatContainer"></div>
       <div id="videoContainer"></div>
   </div>
   

   #sessionContainer .left #chatContainer {
       height: 100%;
   }
   

4. Now that our HTML and CSS is squared away, lets add some JavaScript to dynamically add the UI Toolkit components to their respective containers.

   var sessionContainer;
   var chatContainer;
   var videoContainer;
   var controlsContainer;
   var config = {
       videoSDKJWT: "VIDEO_SDK_JWT_HERE",
       sessionName: "SESSION_NAME_HERE",
       userName: "USERS_NAME_HERE",
       sessionPasscode: "SESSION_PASSCODE_HERE",
       features: ["video", "audio", "settings", "users", "chat", "share"],
   };
   function joinSession() {
       sessionContainer = document.getElementById("sessionContainer");
       chatContainer = document.getElementById("chatContainer");
       videoContainer = document.getElementById("videoContainer");
       controlsContainer = document.getElementById("controlsContainer");
       uitoolkit.showUitoolkitComponents(sessionContainer, config);
       uitoolkit.showChatComponent(chatContainer);
       uitoolkit.showVideoComponent(videoContainer);
       uitoolkit.showControlsComponent(controlsContainer);
       uitoolkit.onSessionClosed(sessionClosed);
   }
   

5. Finally, lets set up some logic to properly close the session by calling each component's hide function. These function will be called when the onSessionClosed event listener is triggered:

      function sessionClosed {
         uitoolkit.hideControlsComponent(controlsContainer)
         uitoolkit.hideVideoComponent(videoContainer)
         uitoolkit.hideChatComponent(chatContainer)
         uitoolkit.hideUitoolkitComponents(sessionContainer)
      }
   

The UI Toolkit was built using the Video SDK, and offers the same world-class audio and video quality, scale, and security from Zoom's global infrastructure.

If you are looking for complete control over the experience you are building, we recommend custom building with the Video SDK. If you are looking for a low-code option and a pre-built user interface, the UI Toolkit can help accelerate your product development.

Get started by installing the UI Toolkit on npm, Maven, or Swift Package Manager. Once installed, create your Video SDK account (10,000 free minutes a month) to get your Video SDK credentials.

Visit the Android, iOS, and web UI Toolkit docs for more information.