# Zoom Web SDK Styling **URL:** \ **Category:** Web\ **Created:** [May 22, 2019, 12:11am UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335 "2019-05-22T00:11:40Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![subhan](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/subhan/32/923_2.png) [@subhan](https://devforum.zoom.us/u/subhan)\ **Post date:** [May 22, 2019, 12:11am UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/1 "2019-05-22T00:11:40Z")
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](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/1X/f3cfecdca584bcab8aad9b31bf976c6dc9e58c1a.png) ---
**Author:** ![michael\_p.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/michael_p.zoom/32/18105_2.png) [@michael\_p.zoom](https://devforum.zoom.us/u/michael_p.zoom)\ **Post date:** [May 22, 2019, 9:36pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/2 "2019-05-22T21:36:40Z")
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 ---
**Author:** ![alessandro.feliziani](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/alessandro.feliziani/32/44487_2.png) [@alessandro.feliziani](https://devforum.zoom.us/u/alessandro.feliziani)\ **Post date:** [August 10, 2019, 6:01am UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/3 "2019-08-10T06:01:27Z")
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 ---
**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\ **Post date:** [August 12, 2019, 4:25pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/4 "2019-08-12T16:25:36Z")
Hey @alessandro.feliziani, We are working on making the Web SDK fully responsive. [Follow our changelog here to be notified of release.](https://marketplace.zoom.us/docs/changelog) You could however implement your own CSS to accomplish this. Thanks, Tommy ---
**Author:** ![penar.musaraj](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/penar.musaraj/32/2228_2.png) [@penar.musaraj](https://devforum.zoom.us/u/penar.musaraj)\ **Post date:** [November 8, 2019, 7:47pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/5 "2019-11-08T19:47:28Z")
> [@tommy](#): > > You could however implement your own CSS to accomplish this. I tried this week to do this, but ran into several problems. The SDK injects inline styles for the html and body elements: ```auto 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. ---
**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\ **Post date:** [November 8, 2019, 7:52pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/6 "2019-11-08T19:52:17Z")
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.](https://marketplace.zoom.us/docs/changelog) Thanks, Tommy ---
**Author:** ![New\_Theory](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/new_theory/32/2642_2.png) [@New\_Theory](https://devforum.zoom.us/u/New_Theory)\ **Post date:** [December 18, 2019, 5:56pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/7 "2019-12-18T17:56:44Z")
Customization would be absolutely amazing. Very much looking forward to the No-Gui Web SDK. ---
**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\ **Post date:** [December 18, 2019, 6:21pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/8 "2019-12-18T18:21:12Z")
Hey @New_Theory, thanks for posting and using Zoom! I will notify this thread once we release it sometime next year! ๐Ÿ™‚ Thanks, Tommy ---
**Author:** ![johnny1](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/johnny1/32/3621_2.png) [@johnny1](https://devforum.zoom.us/u/johnny1)\ **Post date:** [March 16, 2020, 8:38pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/9 "2020-03-16T20:38:35Z")
Yea this is absolutely needed, right now those global styles are polluting the DOM and there is no easy way to override them. ---
**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\ **Post date:** [March 16, 2020, 8:59pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/10 "2020-03-16T20:59:30Z")
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](https://marketplace.zoom.us/docs/changelog) -Tommy ---
**Author:** ![scros97](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/scros97/32/4379_2.png) [@scros97](https://devforum.zoom.us/u/scros97)\ **Post date:** [March 28, 2020, 1:42pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/11 "2020-03-28T13:42:05Z")
Hey! Any ETA about that? Thanks ---
**Author:** ![dlolsen](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dlolsen/32/3495_2.png) [@dlolsen](https://devforum.zoom.us/u/dlolsen)\ **Post date:** [March 28, 2020, 5:23pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/12 "2020-03-28T17:23:00Z")
๐Ÿ‘†๐Ÿ‘†๐Ÿ‘†Also, desperately hoping this comes soon ๐Ÿ‘†๐Ÿ‘†๐Ÿ‘† 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? ---
**Author:** ![dlolsen](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dlolsen/32/3495_2.png) [@dlolsen](https://devforum.zoom.us/u/dlolsen)\ **Post date:** [March 28, 2020, 5:29pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/13 "2020-03-28T17:29:42Z")
@subhan Did you ever figure out a solution? ---
**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\ **Post date:** [March 30, 2020, 6:00pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/14 "2020-03-30T18:00:29Z")
Hey @dlolsen, @scros97, No ETA as of now. Your best bet is to override with CSS and JS. -Tommy ---
**Author:** ![kurapati.muralikrish](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/kurapati.muralikrish/32/4397_2.png) [@kurapati.muralikrish](https://devforum.zoom.us/u/kurapati.muralikrish)\ **Post date:** [April 9, 2020, 1:47pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/15 "2020-04-09T13:47:52Z")
![Screen Shot 2020-04-09 at 8.46.58 AM](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/a/aa953382543c81c55a71e53113c8745e5cb595c0.jpeg) we integrated in our website, but the styling seems to be very bad, not sure how to fix this, any starting points? ---
**Author:** ![michael\_p.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/michael_p.zoom/32/18105_2.png) [@michael\_p.zoom](https://devforum.zoom.us/u/michael_p.zoom)\ **Post date:** [April 10, 2020, 6:35am UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/16 "2020-04-10T06:35:43Z")
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 ---
**Author:** ![damien1](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/damien1/32/6037_2.png) [@damien1](https://devforum.zoom.us/u/damien1)\ **Post date:** [April 14, 2020, 6:54am UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/17 "2020-04-14T06:54:16Z")
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? ---
**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\ **Post date:** [April 15, 2020, 5:55am UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/18 "2020-04-15T05:55:08Z")
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 ---
**Author:** ![damien1](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/damien1/32/6037_2.png) [@damien1](https://devforum.zoom.us/u/damien1)\ **Post date:** [April 17, 2020, 10:31am UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/19 "2020-04-17T10:31:39Z")
It works now, But I have another issue, I am adding zoom web sdk in my existing theme. Which is metronic theme > **[KeenThemes.com - Bootstrap Dashboard Themes & Templates](https://keenthemes.com/metronic/?page=index)** > > Premium bootstrap themes by KeenThemes serve as a solid foundation for any project that requires admin dashboard. All templates are fully responsive and mobile-friendly! 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? ---
**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\ **Post date:** [April 20, 2020, 5:10pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335/20 "2020-04-20T17:10:28Z")
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](https://zoom.github.io/sample-app-web/ZoomMtg.html#init) to be redirected back to your app. Thanks, Tommy [Next page](https://devforum.zoom.us/t/zoom-web-sdk-styling/4335.md?page=2)