Meeting Websdk 2.12.0
Introduction to Problem
We are building a single page application and we opted for zoom to let our users join meetings without the need for any explicit sign-up. However, we are facing issues with the websdk leaking CSS all over our site. There are multiple sources for this:
- First, the websdk expects the user to import the complete bootstrap version 3 stylesheet.
Clearly, the websdk client view was designed in mind for isolated webpages that a user could visit and then leave using the provided
leaveUrl api parameter. This is problematic for us as we wish to provide a single entrypoint to our SPA. We also do not want to use the Component View as it does not meet all of our needs.
Extremely Hacky Solution
We forked the websdk and modified it as such:
- Nest all of the bootstrap css under
#zmttg-rootselector, which is the id of the element that the zoom react application mounts itself to.
bodyin the minified js and replaced it with
#zmmtg-root. It works for now, but .
In defense of Websdk
It is possible to simply do a multi-page build of our application, where a single page is reserved for zoom client view, and the rest of the application is on a separate page. This would prevent the css from affecting the rest of our application.
Using an iframe is also possible, but it is probably a worse solution (iframe communication is finicky).
However, the multi-page solution only makes zoom adoption in SPA that bit more annoying.
In the short term:
- Nest the bootstrap css to #zmmtg-root, and remove any unnecessary styles.
In the long term:
- Let’s move on from bootstrap. Zoom is mature enough now, and asking users to import all of bootstrap css just to make a few drop-downs work is unreasonable.