Zoom Meeting Custom Ui

Hey @tchap,

Let me double check what that iFrame code is doing in the sample app.

Thanks,
Tommy

Hey @tchap,

At a high level, this is a way to see how the WebSDK will look like in an iframe, however, using the Web SDK in an iFrame is not officially supported or fully tested.

Thanks,
Tommy

Hi @tommy

We’re currently using zoom in our tech stack. While we’ve currently resorted to your suggestion of navigating the user to a separate path, this breaks our users’ current flow (ongoing meeting while continuously performing actions on our site).

I understand that Zoom’s Custom UI for Web is in the roadmap, but can you at least give us an indication on when you plan to make this available? Is it this year? Is it next year? What quarter? Is it even a priority? This is so we can properly align and let our board know if and when it would even be possible. Video calling while navigating our website is core to our product. As such, having an open ended timeline for this makes it really difficult to justify sticking to the tech stack.

Thank you for your understanding.

Hey @js.balucan,

Apologies, but we currently do not have a timeline set in stone. We will share updates here:

Thanks,
Tommy

Hi, any update about this?

Hey @cestaufelipe08,

Yes, we do have the new Fully Customizable SDK if you would like to customize the whole experience.

In short, this gives you access to the raw audio and video feeds, and then you put your custom frontend in place. :slight_smile:

Thanks,
Tommy

1 Like

Hi,
I need it so that the styles from the SDK don’t break the styles on my site. But from what I read if I modify the SDK they will no longer be Zoom meetings, in that case what solution do I have?
Thanks,
Felipe

1 Like

When I integrated the Zoom in Angular, it attached to body. Is there anyway to set zoom into a div.

Hey @cestaufelipe08, @shivam.khanna,

In that case where you want to use the Client Web SDK but don’t want the CSS affected on your site, you can see the solution here:

Thanks,
Tommy

hey @tommy

I want to integrate zoom web sdk inside my application in Angular, but whenever I try to do this the Zoom div always get attached to body. The structure of my app looks like something like this

Header
Zoom Div
Footer

I’m not able to achieve this, everytime I try to implement this way Zoom div get attached to root level and also I wan’t to alert user for leave meeting when user closes or refreshes the tab, but I 'm not able to achieve that.

I had looked for so many resources at your dev forum but nothing helped much. I hope you will be able to solve my issue.

Hey @shivam.khanna,

Have you taken a look at the Web SDK Angular Sample App? It shows how to show and hide the Web SDK. That being said, you cannot customize where the Web SDK gets attached.

Thanks,
Tommy

Hi @tommy
That css is not work for me.


I want to this can split by grid
My css was copied above

Thanks,
LamNV

Hey @lovenco0410,

Make sure that you include the CSS to hide the #zmmtg-root element:

Then, you change the display to block before initializing the meeting:

Let me know if that helps :slightly_smiling_face:

Thanks,
Max

Hi @MaxM
Yes, I had it

The meeting start is not error but I cannot set the height and width like in Tomy’s picture commented above

Thanks,
Lamnv11

1 Like

Hey @lovenco0410,

Thank you for clarifying. Currently, the Web SDK doesn’t support customization like restyling or resizing the UI. This is something we plan to improve in a future release though.

Thanks,
Max

Thanks for your support.

Thanks,
LamNV11

No problem! I’m glad that I was able to help. Feel free to reach out if you encounter any further issues or questions.

Max

I want to know as of today is Client WebSDK does not support custom UI (like custom container that have width:500, height:500 and we want to show joining loading UI and when meeting joined in this custom container like Tommy picture above) and iframe not recommend by you . Current behavior is it will cover full screen. Right?
And what about Web Video SDK is it stable if yes then can we achieve custom UI by using default UI in our custom size container.

Hey @ta1,

Thanks for reaching out.

Yes, that’s correct.

Yes, the Web SDK is stable and ready to build with! While you may be able to use custom CSS and JS to customize the Web SDK, it is currently not supported.

We plan to release a more customizable version of the SDK in the near future.

If you have any further questions, please submit a new forum topic. I’ll be sure to follow up with you there.

Thanks,
Max