# Angular Integration with JS Web SDK

**URL:** <https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621>\
**Category:** Web\
**Created:** [August 21, 2019, 11:26am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621 "2019-08-21T11:26:29Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![digsoftech9](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/digsoftech9/32/2364_2.png) [@digsoftech9](https://devforum.zoom.us/u/digsoftech9)\
**Post date:** [November 14, 2019, 7:25am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/43 "2019-11-14T07:25:01Z")

</div>

Hi can you post your Complete source code here,  
Thanks

---

<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:** [November 14, 2019, 5:43pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/44 "2019-11-14T17:43:48Z")

</div>

Hey @digsoftech9,

What specific problem are you having?

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![digsoftech9](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/digsoftech9/32/2364_2.png) [@digsoftech9](https://devforum.zoom.us/u/digsoftech9)\
**Post date:** [November 16, 2019, 5:01am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/45 "2019-11-16T05:01:45Z")

</div>

Hi, Tommy I am developing Angular app where i want the zoom features under my application, everything that zoom provides, And also when i integrated the zoom api i get a blank screen.

---

<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:** [November 18, 2019, 5:30pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/46 "2019-11-18T17:30:01Z")

</div>

Hey @digsoftech9,

Can you check the browser console for errors and post back here?

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![digsoftech9](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/digsoftech9/32/2364_2.png) [@digsoftech9](https://devforum.zoom.us/u/digsoftech9)\
**Post date:** [November 19, 2019, 7:01am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/47 "2019-11-19T07:01:26Z")

</div>

Hello Tommy, Thank you very much for your kind reply and helping attitude.I have a request for you to please make a full tutorial on Angular+ zoom , Since I am not aware of much functionalities of zoom.  
I am developing website for client and he is already a paying customer to zoom but he want to integrate zoom in his website with the same functionality.  
I hope you can help me in this regard.  
Thanks

---

<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:** [November 19, 2019, 7:32pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/48 "2019-11-19T19:32:34Z")

</div>

Hey @digsoftech9,

We will work on adding examples/tutorials in all the major frontend languages.

In the meantime, here is a basic tutorial on how to integrate the Web SDK with Angular.

> [@Query for Web SDK Integration with Angular 7](https://devforum.zoom.us/t/query-for-web-sdk-integration-with-angular-7/5819/12):
>
> Hey @gourav, I am having trouble reproducing the Can't resolve jQuery error. Here is my working Angular Zoom Web SDK code. To run, $ git clone https://github.com/tommygaessler/zoom-angular.git $ cd zoom-angular $ npm install Add your JWT app credentials and meeting number to the /src/app/app.component.ts file $ ng serve --open Let me know if this works for you! Thanks, Tommy

> [@Error in integration zoom API with angular 6](https://devforum.zoom.us/t/error-in-integration-zoom-api-with-angular-6/4830/5):
>
> Hey @sachinpawar8750, Zoom currently does not have a facial recognition API. To integrate Zoom with an Angular app, you can use our [JS SDK on NPM](https://www.npmjs.com/package/zoomus-jssdk). $ npm i zoomus-jssdk --save Add this line \<script src="https://code.jquery.com/jquery-3.4.1.min.js"\>\</script\> below the \<app-root\>\</app-root\> in your index.html And then import Zoom into your component file like this, import { ZoomMtg } from 'zoomus-jssdk'; Here is an example of joining/starting a meeting in Angular, app.component.ts import {…

Here is all the functionality of the Zoom Web SDK

[https://marketplace.zoom.us/docs/sdk/native-sdks/web/reference](https://marketplace.zoom.us/docs/sdk/native-sdks/web/reference)

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![digsoftech9](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/digsoftech9/32/2364_2.png) [@digsoftech9](https://devforum.zoom.us/u/digsoftech9)\
**Post date:** [November 20, 2019, 8:02am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/49 "2019-11-20T08:02:27Z")

</div>

Hi, Tommy I am getting the same black screen , i have the code as mentioned above. The Zoom SDK itself gets initiated creating a black screen over the existing angular application.

but when i uncheck all the styles of #zmmtg-root , the screen showing the my application elements such as menu , button etc

#zmmtg-root {  
width: 100%;  
height: 100%;  
position: fixed;  
top: 0;  
left: 0;  
background-color: black;  
}

---

<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:** [November 20, 2019, 8:30pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/50 "2019-11-20T20:30:17Z")

</div>

Hey @digsoftech9,

Are there any errors in the browser console?

Also please try increasing the Z-Index position of `#zmmtg-root`.

Thanks  
Tommy

---

<div class="post-metadata">

**Author:** ![digsoftech9](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/digsoftech9/32/2364_2.png) [@digsoftech9](https://devforum.zoom.us/u/digsoftech9)\
**Post date:** [November 21, 2019, 6:28am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/51 "2019-11-21T06:28:34Z")

</div>

Hi, where could I find #zmmtg-root, in my html or css file?

Hi, I have solved the problem with black screen, thanks for you quick reply,

I have got one question:  
My client who is a paying customer of zoom, he is a teacher actually, I am using zoom api in my application, so will it be possible if the teacher provide me the meeting number and i attend the meeting using my application? or do i also have to become paying customer in order to attend the meeting?

thanks

---

<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:** [November 21, 2019, 5:57pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/52 "2019-11-21T17:57:23Z")

</div>

Hey @digsoftech9,

Happy to hear you got it working 🙂 May I ask how you fixed it?

> [@digsoftech9](#):
>
> Hi, where could I find #zmmtg-root, in my html or css file?

This is generated in the DOM once the Web SDK initiates.

> [@digsoftech9](#):
>
> My client who is a paying customer of zoom, he is a teacher actually, I am using zoom api in my application, so will it be possible if the teacher provide me the meeting number and i attend the meeting using my application? or do i also have to become paying customer in order to attend the meeting?

If you are joining the meeting and the teacher is the host, you do not need to be a paying customer.  
This is possible with the Web SDK, and Zoom app.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![digsoftech9](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/digsoftech9/32/2364_2.png) [@digsoftech9](https://devforum.zoom.us/u/digsoftech9)\
**Post date:** [November 23, 2019, 6:33am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/53 "2019-11-23T06:33:43Z")

</div>

Hi tommy, I solved the black screen problem by just defining  
body \> #zmmtg-root {  
display: none;

}

---

<div class="post-metadata">

**Author:** ![digsoftech9](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/digsoftech9/32/2364_2.png) [@digsoftech9](https://devforum.zoom.us/u/digsoftech9)\
**Post date:** [November 23, 2019, 10:58am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/54 "2019-11-23T10:58:57Z")

</div>

Hi Tommy, how could I design the page for The teacher , I mean the teacher wants to use my application to use zoom to arrange meetings. He Doesn’t want to open two website but one to arrange the meeting.

---

<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:** [November 25, 2019, 8:07pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/55 "2019-11-25T20:07:23Z")

</div>

Hey @digsoftech9,

Happy to hear you got it working! 🙂

You can use our [APIs to schedule Zoom meetings](https://marketplace.zoom.us/docs/api-reference/zoom-api/meetings/meetingcreate), then [display Zoom meetings](https://marketplace.zoom.us/docs/api-reference/zoom-api/meetings/meetings).

Does that help?

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![digsoftech9](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/digsoftech9/32/2364_2.png) [@digsoftech9](https://devforum.zoom.us/u/digsoftech9)\
**Post date:** [November 26, 2019, 5:56am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/56 "2019-11-26T05:56:17Z")

</div>

Hi,Tommy

It would be very much helpful if you could you help me with sample examples.  
Thanks

---

<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:** [November 26, 2019, 5:36pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/57 "2019-11-26T17:36:48Z")

</div>

Hey @digsoftech9,

In the links I shared above, there is sample requests, and code in the “Send a Test Request” section.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![ngoctl](https://avatars.discourse-cdn.com/v4/letter/n/b38774/32.png) [@ngoctl](https://devforum.zoom.us/u/ngoctl)\
**Post date:** [November 28, 2019, 3:07am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/58 "2019-11-28T03:07:41Z")

</div>

30d, I don’t see resolve this bug. What happen with your team ???

---

<div class="post-metadata">

**Author:** ![digsoftech9](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/digsoftech9/32/2364_2.png) [@digsoftech9](https://devforum.zoom.us/u/digsoftech9)\
**Post date:** [November 28, 2019, 5:01am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/59 "2019-11-28T05:01:00Z")

</div>

I want frontend examples

---

<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:** [December 2, 2019, 9:05pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/60 "2019-12-02T21:05:01Z")

</div>

Hey @digsoftech9,

I have an Angular example here for the Web SDK:

> **[tommygaessler/Zoom-Web-SDK-with-Angular](https://github.com/tommygaessler/Zoom-Web-SDK-with-Angular)**
>
> Zoom Web SDK with Angular. Contribute to tommygaessler/Zoom-Web-SDK-with-Angular development by creating an account on GitHub.

Thanks,  
Tommy

---

<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:** [December 2, 2019, 9:08pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/61 "2019-12-02T21:08:38Z")

</div>

Hey @ngoctl,

We are working on releasing a fix for the Start Video in mobile Safari for our January release.

Thanks for your patience,  
Tommy

---

<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:** [February 13, 2020, 6:02pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/62 "2020-02-13T18:02:48Z")

</div>

Hey @ngoctl,

We have fixed the issue, and it will be fixed in our upcoming release.

Thanks,  
Tommy

[Previous page](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621.md?page=2)

[Next page](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621.md?page=4)