Zoom Meeting Custom Ui

Hey @asantech555,

Looks like in the main JS/TS component file.

Thanks,
Tommy

Hey @adrianogaspar, @hrondor,

There is currently not a built in way to specify where the zmmtg-root will be appended.

You can either hide it from the page via CSS or JS, or checkout my suggestions here for single page apps:

Thanks,
Tommy

content is always added in div with id zmmtg-root present in the body even if it’s hidden and there is another div with the same ID in my component. Can you please let me know if there is any workaround to fix this issue?

Hey @acceluser8866,

This is the expected flow.

Thanks,
Tommy

Hello @tommy ,
Since the zoom web SDK doesn’t support full UI customization.
So I’m trying to host it on different instance and embedding the same instance as iframe in my main app.
for example, my main app is running on http://localhost:3000 and zoom SDK app is on http://localhost:3001, both are react application.

for embedding iframe in main app component -
iframe src=“http://localhost:3001/?(meeting details query params here)” height=“some height” width=“some width”

Then I’m reading the search params from iframe url in zoom SDK app, and launching zoom meeting.

Using this iframe method, I’m getting responsive zoom web sdk in my main app.
But is there any other way by which we can achieve responsive zoom container in main app itself?

I tried adding zoom component in main app itself, but because of global css for zoom web sdk, its breaking main app styles.

Could you please help me to get zoom web sdk as responsive in main app only?

2 Likes

Hey @samadhan.madane31,

Checkout my response here on how best to handle the Web SDK not over ridding your current CSS:

Feel free to add your own CSS to meet your responsive needs until we make it more responsive.

Thanks,
Tommy

Hi @tommy,
Thanks for the response,
I have to embed the zoom meeting as iframe in my main page. This iframe will display zoom container which is on separate path of same react application.
I want to go back on previous main page after leaving the meeting.
Suppose my main page is running on - localhost:3000/class-page?status=meetingStart
and embedding iframe on main page which is running on - locahost:3000/zoom-meeting-room
When meeting ends if I give leaveUrl as localhost:3000/class-page?status=meetingEnded then it redirects in iframe itself and displays main page content in iframe.
I want to redirect to localhost:3000/class-page?status=meetingEnded on main page url and depend on param status, I will decide what to display after meeting ends.

How can I achieve this?

Hey @samadhan.madane31,

Unfortunately the Web SDK was not intended to be used within iFrames. That being said, the supported way to redirect to a page after a meeting is to use the leaveUrl property, and not use the Web SDK inside an iFrame.

Thanks,
Tommy

Hey @tommy

I have a similar use case as the one discussed here, and I’m wondering about your previous comment

Unfortunately the Web SDK was not intended to be used within iFrames.

This is surprising as it seems that it is used in an iframe in the Sample App (here). Is there something I’m missing?

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