Zoom web sdk , security button not working

Description
I have implemnted zoom web sdk with jwt app type, and creating instant meetings (type 1).
Security button and more button and view button on top is not working on the host side of the meeting.

my zoom sdk version is : 1.9.1.

Hey @shweta,

Thank you for reaching out to the Zoom Developer Forum. It sounds like there may be some issues importing the CSS or JS dependencies required by the Web SDK. Please see our Sample Web App for a reference as to how you can implement the Web SDK.

If that isn’t helpful, are you able to share a public git repo containing your code? I’ll use that to advise on the issue.

Thanks,
Max

[quote=“shweta, post:1, topic:47063, full:true”]
Description
I have implemnted zoom web sdk with jwt app type, and creating instant meetings (type 1).
Security button and more button and view button on top is not working on the host side of the meeting.

my zoom sdk version is : 1.9.1.

Hi @MaxM . Thanks for the hint.

I found out that if I import the following imports in angular.json file , the security button works fine, but I cannot use these imports in angular.json since it is interferring with our complete application’s styles and affecting it drastically.

import “node_modules/@zoomus/websdk/dist/css/bootstrap.css”;
import “node_modules/@zoomus/websdk/dist/css/react-select.css”;

I tried importing these css files in the component directly but it doesn’t helps.

What is the solution for this?

Hey @shweta,

Thanks for sharing more detail about the code that you’re using. You’ve encountered an issue that brings up a good point. Now that I know you’re using Angular, I recommend looking into our Sample Angular App which should serve as a better reference for your application.

In that sample app, we can see that the CSS is introduced to the bundler via the angluar.json file like so:

Have you tried something like that? Then, you would import ZoomMtg like so:

Let me know if that helps.

Thanks,
Max

[quote=“shweta, post:1, topic:47063, full:true”]
Description
I have implemnted zoom web sdk with jwt app type, and creating instant meetings (type 1).
Security button and more button and view button on top is not working on the host side of the meeting.

my zoom sdk version is : 1.9.1.


[/quote]

Hi @Max, yes I am already doing the things you mentioned . I have attatched a screenshot of it as well. On LHS is angular.json and on RHS is the component where I import ZoomMtg.

I wonder where should I import these styles so it doesn’t interferes application styles.
import “node_modules/@zoomus/websdk/dist/css/bootstrap.css”;
import “node_modules/@zoomus/websdk/dist/css/react-select.css”;

Hey @MaxM , can you suggest some solution . I had added more details in my previous reply .

Hey @shweta,

Thank you for clarifying.

That’s what I was referring to, I think those import statements should be removed as they are interfering with the styles imported by the angular.json file.

Thanks,
Max

Hey @MaxM ,
Currently I am not importing the above import statements anywhere in my application and security button, view button are not working during zoom call.

Then where should I import these ?
import “node_modules/@zoomus/websdk/dist/css/bootstrap.css”;
import “node_modules/@zoomus/websdk/dist/css/react-select.css”;

Security button and more button etc are not working in the zoom call if I don’t import these in angular.json file.
And if I import these in angular.json security button etc works fine, but my application’s styles are getting destroyed .

So, what should be done to make those buttons etc work properly in zoom call?

Hey @shweta ,

Here is an example of where you can import the CSS files:

Currently the Web SDK styles could conflict with your projects styles. We are working on improving this. In the meantime, you can read my suggestions here on how to handle this:

Let me know if that helps! :slight_smile:

Thanks,
Tommy