Zoom Meeting Custom Ui

Hey @aneesh.aneesh83,

Can you share a screenshot of the issue please?


Hey @elearningevolve,

I am unable to reproduce this issue. Can you send me a github repo so I can reproduce and debug locally?


Hey @danesh, @SimoneLabianca,

Here are the features we have available currently:

Right now the Web SDK has limited customization, you can see our reference for basic customization like showing / hiding certain features.

Gallery / multiple panelist view is not supported right now, but this is on our roadmap! :slight_smile:


As you can see in this screenshot… when the screen sharing started the hosted ppl’s video went blank. It only shows black color.

Thanks @aneesh.aneesh83,

We are taking a look to see if this is a bug. (CS-1795)


Hi @osulzhenko.
Can you provide steps for how you figure out this issue?

Hey @aneesh.aneesh83,

For Webinars, you can only view host or panelist and not other participants. Does the host or panelist/s have their video on during screenshare?


Hey @ravikumar,

Let us know what issue you are running into so we can assist.


Hi @tommy,
Thanks for your reply.

I am trying to add <div id="zmmtg-root"> </div> in inner component(react component) where I need to show the meeting. But still meeting has added in the index.html file.

I have added the below URLs in index.html.

<link type="text/css" rel="stylesheet" 
 ref="https://source.zoom.us/1.7.7/css/bootstrap.css" />

  <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.7/css/react-select.css" />

 <script src="https://source.zoom.us/1.7.7/lib/vendor/jquery.min.js"></script>

Is there any solution to add meeting div in the react component instead of adding in index.html.

Hi Tommy,

We are also having the same issue.

Even if we try the method you have suggested in the following thread chat/participant panel is broken,

We are using the latest 1.7.7 SDK. Is there any better way to restrict Zoom UI to part of the screen without having any breakage to zoom functionalities?

Thanks for the reply tommy. It was an UI issue… we fixed it…conflicting our bootstrap and css files with the one provided by the zoom sdk sample app…Actually we were implementing the zoom inside an iframe within our application.

1 Like


By default zmmtg-root id. is placed insted the body tag.

How can I add it in my component below the specifc div in angular!

Help me with examples I need it in my component.

Hey @aneesh.aneesh83,

Happy to hear you figured out the issue! :slight_smile:


Hey @ravifabulous471, @ravikumar, @mathankumar.wse,

Currently the Web SDK is designed to place zmmtg-root to the body tag.

I suggest displaying the Web SDK in this fashion:

We are working on making the Web SDK more customizable in the future. Stay updated here: https://marketplace.zoom.us/docs/changelog


where do we use this code?

Hi bro did you find the solution for this issue.

Hello, I have read this topic and I just want to ask, if its proper and ok method to hide “zmmtg-root” element outside the body(which is put there automatically) and then to put another “zmmtg-root” element to classic render of some React component. Im just afraid if call/Zoom GUI will show in another component properly and I wont have some problems with functionality.
Because it seems that “zmmtg-root” element outside of body has so many another components inside of it(for example <div id="meeting-app"> etc.) and my component doesnt have them so I cant see any functionality,video etc… Is there some way, how to put all stream components to render function? I know, that I can edit CSS styling of that original component outside of body to place it on position, where I want, but it isnt clean solution as put it under part of some React component.
Thanks for answer!:slight_smile: