WEB sdk add inline styles to html and body

Meeting SDK Web
1

Hello Team,

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.

2 Likes
2

+1

That’s one (if not the only) reason why our integration used an iFrame…
Improving CSS integration would definitely help to move away from this.

1 Like
3

It’s less of an SDK, and more of a “let’s make your web app our Zoom client” instead

4

I have this issue as well. The CSS and Bootstrap throws off the styling of my entire application. My temporary (perhaps permanent) solution is to fire up another node process so the web sdk is running independent of my main application.

5

I sort of solved it by inserting some CSS reset specifically for the parent element selector for my app.

Something like:
#my_app { font-family: ...; }

That way, at least all the DOM within that node will get current styling. Miles away from optional, but at least it works.

6

@daniel2 yes I agree

1 Like
7

@simonwong yes I believe this is the best solution

8

How have you solved the communication between the apps?

1 Like
9

Hey @daniel2, @nvivot, @houssam.hammoud, @simonwong,

Currently the best way to use the Web SDK without affecting the styling and functionality of your app is to navigate the user to a seperate path or sub domain so it does not interfere with your CSS. Then after the meeting you can navigate back to your main page with the leaveUrl

Thanks,
Tommy

10

In my case I need the Zoom client on the same page. Custom UI is the solution to my problems I suppose, and 1.8.0.

1 Like
11

Thanks! :slight_smile:

-Tommy