Zoom Web SDK Styling

Hi There,

We’re trying to integrate Zoom into our web application through the zoom Web SDK. I’ve been trying to figure out if there is a way to change the styles/look and feel of the generated meeting programmatically?

All we want is to add your video conferencing panels into our application. In order to do so, we need to know if we can change the styling of the zoom app generated through the zoom SDK.

Please see the image below, It shows how we are looking to integrate zoom into our application. We just need to show videos on the right-hand side along with our application. Is it possible at all?

Looking forward to your kind response.

Best,
Subhan Ahmed

53%20am

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.

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