# Customization of UI for Web Client SDK

**URL:** <https://devforum.zoom.us/t/customization-of-ui-for-web-client-sdk/50634>\
**Category:** Web\
**Created:** [May 20, 2021, 2:48am UTC](https://devforum.zoom.us/t/customization-of-ui-for-web-client-sdk/50634 "2021-05-20T02:48:21Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![kamal.p](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/kamal.p/32/25728_2.png) [@kamal.p](https://devforum.zoom.us/u/kamal.p)\
**Post date:** [May 20, 2021, 2:48am UTC](https://devforum.zoom.us/t/customization-of-ui-for-web-client-sdk/50634/1 "2021-05-20T02:48:21Z")

</div>

**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)

---

<div class="post-metadata">

**Author:** ![Aurel](https://avatars.discourse-cdn.com/v4/letter/a/aca169/32.png) [@Aurel](https://devforum.zoom.us/u/Aurel)\
**Post date:** [May 20, 2021, 7:22am UTC](https://devforum.zoom.us/t/customization-of-ui-for-web-client-sdk/50634/2 "2021-05-20T07:22:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kamal.p](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/kamal.p/32/25728_2.png) [@kamal.p](https://devforum.zoom.us/u/kamal.p)\
**Post date:** [May 20, 2021, 7:54am UTC](https://devforum.zoom.us/t/customization-of-ui-for-web-client-sdk/50634/3 "2021-05-20T07:54:28Z")

</div>

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.

 ![Screenshot 2021-05-20 at 1.21.06 PM](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/e/b/eb3d6c3ceb9012a8f94e3c352867b9d5bb87bf15.png)

---

<div class="post-metadata">

**Author:** ![nvivot](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/nvivot/32/4489_2.png) [@nvivot](https://devforum.zoom.us/u/nvivot)\
**Post date:** [May 20, 2021, 8:55am UTC](https://devforum.zoom.us/t/customization-of-ui-for-web-client-sdk/50634/4 "2021-05-20T08:55:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kamal.p](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/kamal.p/32/25728_2.png) [@kamal.p](https://devforum.zoom.us/u/kamal.p)\
**Post date:** [May 20, 2021, 10:40am UTC](https://devforum.zoom.us/t/customization-of-ui-for-web-client-sdk/50634/5 "2021-05-20T10:40:13Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [May 20, 2021, 9:53pm UTC](https://devforum.zoom.us/t/customization-of-ui-for-web-client-sdk/50634/6 "2021-05-20T21:53:19Z")

</div>

Hey @kamal.p,

What was formerly called the “Fully Customizable SDK” is now called the [Video SDK](https://marketplace.zoom.us/docs/sdk/custom/introduction) 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](https://marketplace.zoom.us/docs/sdk/native-sdks/web#zoom-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

---

<div class="post-metadata">

**Author:** ![kamal.p](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/kamal.p/32/25728_2.png) [@kamal.p](https://devforum.zoom.us/u/kamal.p)\
**Post date:** [May 21, 2021, 6:28am UTC](https://devforum.zoom.us/t/customization-of-ui-for-web-client-sdk/50634/7 "2021-05-21T06:28:27Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [May 24, 2021, 3:45pm UTC](https://devforum.zoom.us/t/customization-of-ui-for-web-client-sdk/50634/8 "2021-05-24T15:45:11Z")

</div>

Hey @kamal.p ,

> [@kamal.p](#):
>
> 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?

That is correct, the Video SDK are video and audio streams as a service. You can get your Video SDK keys here: [Video SDK from Zoom | Zoom](https://zoom.us/docs/en-us/video-sdk.html) it is free up till 10,000 session minutes per month.

> [@kamal.p](#):
>
> And can you please provide some examples and references to those projects or app that developers have customized with CSS if you have any.

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

> **[How to customize the Meeting SDK for web](https://devsupport.zoom.us/hc/en-us/articles/360060333371-How-to-customize-the-Web-Client-SDK)**
>
> Currently the Web Meeting SDK has limited customization. Some buttons and functionality can be customized, but overhauling the design is not supported. We are working on allowing more customization...

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [June 24, 2021, 1:45am UTC](https://devforum.zoom.us/t/customization-of-ui-for-web-client-sdk/50634/9 "2021-06-24T01:45:22Z")

</div>

Closed on June 24, 2021, 1:45am UTC

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