Customization of UI for Web Client SDK

Description
With the new update of 1.9.5 can we customize the web UI? I am using React and I see that it appends some DOM with classes and ids. How to fully customize it? I tried changing the CSS but there are so many divs with classes it is not easy to find which one is for what neither there is any documentation for customizing web UI. There is documentation for customizing UI for other platforms than the web. Need assistance in making my own customized UI, help will be much appreciated.

Which Web Client SDK version?
1.9.5

Device (please complete the following information):

  • Browser: [ Chrome]
  • Browser Version 90.0.4430.212 (Official Build) (x86_64)

Hi,

This is possible with CSS styling, but you will have to redo this adaptation work with each major update of the ZOOM Web SDK component and then retest all the functionalities you use, on desktop, tablet and mobile.

Best regards

1 Like

Thanks for the help! But do we have any documentation to look at on how to customize the UI with CSS. I mean it is really difficult to style the appended dom when a call connects. It has so many nested divs with classes and id. How would one know which div affects which container and how? I want to make the UI like the image I have attached below and want to make it dynamic like picture-in-picture or the making the call screen big or small on click of a button. If you have any documents or examples, please share.

1 Like

To customize your UI, you should have a look at the “fully customizable Web SDK” (not the standard web SDK which is not customizable)

Customizable SDK is provided on demand if i’m not wrong

1 Like

I am using Web Client SDK, which one is “Fully customizable Web SDK”? Can you guide me through how to use or get it. Getting on-demand, how to do that? I would be really thankful if you can help!

Hey @kamal.p,

What was formerly called the “Fully Customizable SDK” is now called the Video SDK and is available to everyone!

It’s important to note that your Video SDK account would be separate from Zoom Meetings. The goal of the Video SDK is to provide lower level controls for raw audio and video data.

If you want to customize the UI of the Web SDK, this is something we plan to support in the future with version 2.0.0. In the meantime, I’ve seen developers see success when implementing custom css but that’s not supported on our end so we don’t have any guides.

Let me know if that helps.

Thanks,
Max

Thanks for the information. What I know is that with Video SDK I cannot create, schedule, or join calls on the Zoom platform, am I right? And to get the Video SDK key and secret, do I need to get the subscription first?

And can you please provide some examples and references to those projects or app that developers have customized with CSS if you have any.

Thank you!

Hey @kamal.p ,

That is correct, the Video SDK are video and audio streams as a service. You can get your Video SDK keys here: Zoom Developer Solutions it is free up till 10,000 session minutes per month.

The customization we support for the Web Client SDK can be seen here:

Thanks,
Tommy

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.