Meeting SDK in a Single Page Application (SPA): Problems & Suggestions

Meeting SDK
1

Version
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:

  1. First, the websdk expects the user to import the complete bootstrap version 3 stylesheet.
  2. The websdk javascript adds styles to the html and body elements directly.

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:

  1. Nest all of the bootstrap css under #zmttg-root selector, which is the id of the element that the zoom react application mounts itself to.
  2. This still leaves the css being set via the javascript code. Since zoom doesn’t provide source code, we simply search-replaced head and body in the minified js and replaced it with #zmmtg-root. It works for now, but :nauseated_face: .

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).

Suggestions

However, the multi-page solution only makes zoom adoption in SPA that bit more annoying.

In the short term:

  1. Javascript code should simply not be setting inline css on html/body elements. This could easily be included in a css file or at the very least the styles could be set on the #zmmtg-root element instead.
  2. Nest the bootstrap css to #zmmtg-root, and remove any unnecessary styles.

In the long term:

  1. 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.
2

@harsh2 ,

Sorry for not getting back to you sooner. We sincerely apologize for any inconvenience caused. We wanted to reach out and see if the issue you mentioned is still persisting. Rest assured, we are more than happy to lend a hand in diagnosing, troubleshooting, and finding a solution for you. We understand how frustrating technical issues can be, and we’re here to support you every step of the way. Please don’t hesitate to let us know if there’s anything else we can do to assist you. We’re committed to providing the best possible assistance and ensuring your satisfaction.

Thank you for your patience, and we look forward to hearing from you!