# Zoom web sdk , security button not working

**URL:** <https://devforum.zoom.us/t/zoom-web-sdk-security-button-not-working/47063>\
**Category:** Web\
**Created:** [April 1, 2021, 11:42am UTC](https://devforum.zoom.us/t/zoom-web-sdk-security-button-not-working/47063 "2021-04-01T11:42:39Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![shweta](https://avatars.discourse-cdn.com/v4/letter/s/839c29/32.png) [@shweta](https://devforum.zoom.us/u/shweta)\
**Post date:** [April 1, 2021, 11:42am UTC](https://devforum.zoom.us/t/zoom-web-sdk-security-button-not-working/47063/1 "2021-04-01T11:42:39Z")

</div>

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

 ![security](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/d/c/dc4f215730f47d7a35a0946eb2624d3c7ac1c776.png) ![view](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/c/2/c2ef84f67c6747379b410701456d7a3a01a6a6a5.png)

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [April 1, 2021, 10:31pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-security-button-not-working/47063/2 "2021-04-01T22:31:02Z")

</div>

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](https://marketplace.zoom.us/docs/sdk/native-sdks/web#zoom-web-sdk). Please see our [Sample Web App](https://github.com/zoom/sample-app-web) 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

---

<div class="post-metadata">

**Author:** ![shweta](https://avatars.discourse-cdn.com/v4/letter/s/839c29/32.png) [@shweta](https://devforum.zoom.us/u/shweta)\
**Post date:** [April 5, 2021, 11:38am UTC](https://devforum.zoom.us/t/zoom-web-sdk-security-button-not-working/47063/3 "2021-04-05T11:38:06Z")

</div>

![zoom-error](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/e/0/e060e691be0777f7d5b7aa8aad817d97986f4c3a.png) [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.

---

<div class="post-metadata">

**Author:** ![shweta](https://avatars.discourse-cdn.com/v4/letter/s/839c29/32.png) [@shweta](https://devforum.zoom.us/u/shweta)\
**Post date:** [April 5, 2021, 12:03pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-security-button-not-working/47063/4 "2021-04-05T12:03:01Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [April 5, 2021, 9:40pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-security-button-not-working/47063/5 "2021-04-05T21:40:06Z")

</div>

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](https://github.com/zoom/websdk-sample-angular) 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:

> <https://github.com/zoom/websdk-sample-angular/blob/12b7896caa0f7349b29af8604f30fe1f7f1a4fac/angular.json#L25-L29>

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

> <https://github.com/zoom/websdk-sample-angular/blob/12b7896caa0f7349b29af8604f30fe1f7f1a4fac/src/app/app.component.ts#L5-L8>

Let me know if that helps.

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![shweta](https://avatars.discourse-cdn.com/v4/letter/s/839c29/32.png) [@shweta](https://devforum.zoom.us/u/shweta)\
**Post date:** [April 6, 2021, 6:58am UTC](https://devforum.zoom.us/t/zoom-web-sdk-security-button-not-working/47063/6 "2021-04-06T06:58:52Z")

</div>

![zooooooooooom](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/9/9/99878609cd552c6d9cedb41e7348bc6fd5839142.png) [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.

 ![security](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/d/c/dc4f215730f47d7a35a0946eb2624d3c7ac1c776.png) ![view](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/c/2/c2ef84f67c6747379b410701456d7a3a01a6a6a5.png)  
[/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”;

---

<div class="post-metadata">

**Author:** ![shweta](https://avatars.discourse-cdn.com/v4/letter/s/839c29/32.png) [@shweta](https://devforum.zoom.us/u/shweta)\
**Post date:** [April 7, 2021, 11:51am UTC](https://devforum.zoom.us/t/zoom-web-sdk-security-button-not-working/47063/7 "2021-04-07T11:51:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [April 7, 2021, 9:28pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-security-button-not-working/47063/8 "2021-04-07T21:28:18Z")

</div>

Hey @shweta,

Thank you for clarifying.

> [@shweta](#):
>
> 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”;

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

---

<div class="post-metadata">

**Author:** ![shweta](https://avatars.discourse-cdn.com/v4/letter/s/839c29/32.png) [@shweta](https://devforum.zoom.us/u/shweta)\
**Post date:** [April 8, 2021, 3:38am UTC](https://devforum.zoom.us/t/zoom-web-sdk-security-button-not-working/47063/9 "2021-04-08T03:38:33Z")

</div>

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?

---

<div class="post-metadata">

**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 8, 2021, 7:24pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-security-button-not-working/47063/10 "2021-04-08T19:24:17Z")

</div>

Hey @shweta ,

> [@shweta](#):
>
> 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”;

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

> <https://github.com/zoom/meetingsdk-angular-sample/blob/master/angular.json#L31>

> [@shweta](#):
>
> And if I import these in angular.json security button etc works fine, but my application’s styles are getting destroyed .

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:

> [@ZoomMtg is overwriting all css in my entire ReactJS website](https://devforum.zoom.us/t/zoommtg-is-overwriting-all-css-in-my-entire-reactjs-website/16360/5):
>
> Hey @gabriel.rf0, @jude.niroshan11, This is currently how the Web SDK works. You can try adjusting the Web SDK CSS or host the Web SDK on a sub domain / path seperate from your app so it does not break your styling. We are working on a more customizable Web SDK in the future. Thanks, Tommy

Let me know if that helps! 🙂

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [May 9, 2021, 5:24am UTC](https://devforum.zoom.us/t/zoom-web-sdk-security-button-not-working/47063/11 "2021-05-09T05:24:22Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
