Zoom Web SDK Styling

Hi @subhan,

Right now our WebSDK does not have a capability to customize the look and feel right now outside or removing features such as screen share or chat. We are looking into expand our WebSDK for a customize look and feel in the future.

Thanks
Michael

Hi Michael,

I need exactly the same: possibility to embed into my web application the audio/video streaming only (in a responsive div element). Do you already have a roadmap for adding this possibility to the WebSDK? When it will be available?

Thank you,
Alessandro

Hey @alessandro.feliziani,

We are working on making the Web SDK fully responsive. Follow our changelog here to be notified of release.

You could however implement your own CSS to accomplish this.

Thanks,
Tommy

I tried this week to do this, but ran into several problems.

The SDK injects inline styles for the html and body elements:

html, body {
height: 100%;
width: 100%;
/* min-height: 643px; */
min-width: 1100px;
overflow: hidden;
font-size: 16px;
padding: 0;
margin: 0;
font-family: "Open Sans";
color: #4a4a4a;
}

These blanket styling changes block scrolling of the body, switch the font to Open Sans and set a color. I could modify my existing app to use more specific selectors, but this is not a good start, I don’t think an SDK should set these styles on a global element this way.

Further, the SDK uses fixed positioning for multiple elements (#zmmtg-root, .meeting-client) and sets the width via JS for other elements (like the diaout-layer for the audio choice dialog). And there is at least one DOM element with inline styles and no selector, which means it’s near impossible to override via CSS from the parent app.

Hopefully these issues can be addressed in the next iteration of the Web SDK to facilitate integrating inside another app. As it is, I think the SDK can only be used as a full screen element.

1 Like

Hey @penar.musaraj,

Thanks for your suggestions. Currently our Web SDK is not designed to be customized via CSS.

We are working on a more flexible NO-GUI Web SDK that will allow you to customize styling. This will be released sometime next year.

Thanks,
Tommy

1 Like

Customization would be absolutely amazing. Very much looking forward to the No-Gui Web SDK.

1 Like

Hey @New_Theory, thanks for posting and using Zoom!

I will notify this thread once we release it sometime next year! :slight_smile:

Thanks,
Tommy

Yea this is absolutely needed, right now those global styles are polluting the DOM and there is no easy way to override them.

Hey @johnny1, thanks for posting and using Zoom!

We are working to allow full customization of the Web SDK.

Stay updated here: https://marketplace.zoom.us/docs/changelog

-Tommy

Hey! Any ETA about that?

Thanks

1 Like

:point_up_2::point_up_2::point_up_2:Also, desperately hoping this comes soon :point_up_2::point_up_2::point_up_2:

I’m sure the overwhelming majority of people would be happy to just have the ability to modify width on #zmmtg-root as hinted at by @subhan on OP.

Is there a chance we could get some info on how to do that!!?? Even a suggestion on how to override js event handlers that inject styles?

@subhan Did you ever figure out a solution?

Hey @dlolsen, @scros97,

No ETA as of now. Your best bet is to override with CSS and JS.

-Tommy

we integrated in our website, but the styling seems to be very bad, not sure how to fix this, any starting points?

Hi @kurapati.muralikrish,

Right now we do not officially support the use of iframes within the website as this could cause styling issues within your site. The best thing to do is to override the CSS & JS, which is a little tricky. We are working on a WebSDK version to embed into websites outside of using iframe.

Thanks

Hey tommy, I have implemented this in my existing Angular app. I want to override this 2 styles which added to body after adding zoom sdk.
overflow: hidden;
font-size: 16px;
need to override with this

overflow: unset !important;
font-size: 13px !important;

I added above code in styles.scss. But its not overriding so can you suggest how can I override it?

1 Like

Hey @damien1,

Is your styles.scss the global CSS file? You should be able to overwrite the styles by setting global CSS rules.

Thanks,
Tommy

It works now,
But I have another issue, I am adding zoom web sdk in my existing theme. Which is metronic theme

Until I dont add ZoomMtg.prepareJssdk();, it works fine but as soon as I add ZoomMtg.prepareJssdk(); as its needed before join meeting, UI got stuck. I cant open dropdowns, cant check checkboxes etc.

what should be the resolution for this?

Hey @damien1,

Your best bet is to have the Web SDK hosted on a seperate path so it does not affect your styles, then once the meeting is over, utilize the leaveUrl to be redirected back to your app.

Thanks,
Tommy

Just leaving this here so I get notified when this is released.

1 Like