# 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:** 2

<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:** [October 18, 2019, 8:02pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/23 "2019-10-18T20:02:56Z")

</div>

Hey @waqarmirza572, thanks for posting and using Zoom!

Can you please share your code and steps to reproduce this error so I can help debug?

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![waqarmirza572](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/waqarmirza572/32/2123_2.png) [@waqarmirza572](https://devforum.zoom.us/u/waqarmirza572)\
**Post date:** [October 21, 2019, 8:38am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/24 "2019-10-21T08:38:36Z")

</div>

Ok.

Following is my component Code

import { Component, OnInit } from ‘@angular/core’;  
import { ZoomMtg } from ‘zoomus-jssdk’;  
ZoomMtg.preLoadWasm();  
ZoomMtg.prepareJssdk();

@Component({  
selector: ‘app-test’,  
templateUrl: ‘./test.component.html’,  
styleUrls: [’./test.component.scss’]  
})  
export class TestComponent implements OnInit {

meetingNumber: string;  
userName: string;

meetConfig = {  
apiKey: ‘’,  
apiSecret: ‘’,  
meetingNumber: this.meetingNumber,  
userName: this.userName,  
passWord: “”,  
leaveUrl: “[http://localhost:4200/test](http://localhost:4200/test)”,  
role: 0  
};

signature = ZoomMtg.generateSignature({  
meetingNumber: this.meetConfig.meetingNumber,  
apiKey: this.meetConfig.apiKey,  
apiSecret: this.meetConfig.apiSecret,  
role: this.meetConfig.role,  
success: function(res){  
debugger;  
console.log(res.result);  
}  
});

constructor() { }

ngOnInit() {  
}

callZoom(){  
debugger;  
ZoomMtg.init({  
leaveUrl: ‘[http://localhost:4200/test](http://localhost:4200/test)’,  
isSupportAV: true,  
success: (res) =\> {  
ZoomMtg.join({  
meetingNumber: this.meetConfig.meetingNumber,  
userName: this.meetConfig.userName,  
signature: this.signature,  
apiKey: this.meetConfig.apiKey,  
userEmail: ‘’,  
passWord: this.meetConfig.passWord,  
success: (res) =\> {  
console.log(‘join meeting success’);  
},  
error: (res) =\> {  
console.log(res);  
}  
});  
},  
error: (res) =\> {  
console.log(res);  
}  
});  
}

## }

This is My Html Code

## MyMeetingApp \<input type=“text” name=“display\_name” [(ngModel)]=“userName” placeholder=“Name” class=“form-control” required\> \<input type=“text” name=“meeting\_number” [(ngModel)]=“meetingNumber” placeholder=“Meeting Number” class=“form-control” required\> \<button type=“submit” class=“btn btn-primary” (click)=“callZoom();” id=“join\_meeting”\>Join

This is my index.Html Code

\<!doctype html\>

 Web Loading ... 
## 

Kindly Help me is resolving this issue.

---

<div class="post-metadata">

**Author:** ![waqarmirza572](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/waqarmirza572/32/2123_2.png) [@waqarmirza572](https://devforum.zoom.us/u/waqarmirza572)\
**Post date:** [October 21, 2019, 8:39am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/25 "2019-10-21T08:39:49Z")

</div>

Index.htm code is here

\<!doctype html\>

 Web Loading ...

---

<div class="post-metadata">

**Author:** ![waqarmirza572](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/waqarmirza572/32/2123_2.png) [@waqarmirza572](https://devforum.zoom.us/u/waqarmirza572)\
**Post date:** [October 21, 2019, 9:47am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/26 "2019-10-21T09:47:13Z")

</div>

Hye Tommy, Forget About previous Post i have resolved above error’s. Which i posted. All Console Error’s are fixed now which comes on load. Console is clear now. When now i Enter Meeting Number and Name then

 ![](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/1/124356006f2605e0049e4acc479d35d7e9292d94.png) click join button it gives me following error.  
{“method”:“join”,“status”:false,“errorCode”:1,“errorMessage”:“Join meeting failed!”,“result”:null}

Image is Attached for your Reference.

---

<div class="post-metadata">

**Author:** ![kaptan](https://avatars.discourse-cdn.com/v4/letter/k/a9adbd/32.png) [@kaptan](https://devforum.zoom.us/u/kaptan)\
**Post date:** [October 21, 2019, 1:00pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/27 "2019-10-21T13:00:08Z")

</div>

Hi @tommy,

As our host don’t know the login credentials,

- How we can login through . iFrame without user entering Id and Password

- How we can login on behalf of the user and then iFrame will start the meeting?

Regards,  
Kaptan

---

<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:** [October 21, 2019, 4:56pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/28 "2019-10-21T16:56:11Z")

</div>

Hey @kaptan,

> [@kaptan](#):
>
> How we can login through . iFrame without user entering Id and Password

If you want to start a meeting without logging in, I would suggest using the [Zoom Web SDK](https://marketplace.zoom.us/docs/sdk/native-sdks/Web-Client-SDK/overview).

> [@kaptan](#):
>
> How we can login on behalf of the user and then iFrame will start the meeting?

[You can use Zoom User-Level OAuth.](https://marketplace.zoom.us/docs/guides/getting-started/app-types/create-oauth-app)

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:** [October 21, 2019, 4:58pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/29 "2019-10-21T16:58:12Z")

</div>

Hey @waqarmirza572, glad the issue was resolved 🙂

Does the meeting you are joining require a password? If so make sure it matches in your code.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![kaptan](https://avatars.discourse-cdn.com/v4/letter/k/a9adbd/32.png) [@kaptan](https://devforum.zoom.us/u/kaptan)\
**Post date:** [October 21, 2019, 5:12pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/30 "2019-10-21T17:12:41Z")

</div>

Hi @tommy,

At present we are . using JWT Token method, can we utilize the same for iframe authentication also?

---

<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:** [October 21, 2019, 5:37pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/31 "2019-10-21T17:37:01Z")

</div>

Hey @kaptan,

Unfortunately you cannot use JWT to login to your or a users account.

You can however use JWT to put the [Zoom Web SDK](https://marketplace.zoom.us/docs/sdk/native-sdks/Web-Client-SDK/overview) into your site.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![waqarmirza572](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/waqarmirza572/32/2123_2.png) [@waqarmirza572](https://devforum.zoom.us/u/waqarmirza572)\
**Post date:** [October 22, 2019, 9:53am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/32 "2019-10-22T09:53:05Z")

</div>

Hi tommy thanx for all your cooperation man.  
All issues are now resolved calls are now connecting properly videos sharing are perfectly fine.  
I want know from your side how can i customize div  
i want to make it draggable where user want to place it on screen he can place . I customize this “zmmtg-root” when i customize this chats div’s are not visible now.  
one goes one side other goes other side as show in image. In Short i want to know zmmtg-root div is reponsive or not like bootstrap? kindly help me in this regard. how can i make this reponsive. if possible how can i put this into iframe?  
[PNG|690x386](https://devforum.zoom.us/uploads/short-url/gU3S65TQHnt0jrDmPdqaPQh3IHg.jpeg)

---

<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:** [October 22, 2019, 4:03pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/33 "2019-10-22T16:03:14Z")

</div>

Hey @waqarmirza572, happy to hear it is working now! 🙂

As for customizing the styling of the Web SDK we do not recommend this. We are working on a customizable / fully responsive Web SDK to release sometime next year.

You could try embedding a [Zoom Web Client](https://support.zoom.us/hc/en-us/articles/214629443-Zoom-Web-Client) start / join url into an iFrame to customize:

> [@Embed zoom video to a web server](https://devforum.zoom.us/t/embed-zoom-video-to-a-web-server/2882/25):
>
> Hey @Mindaugas, You could solve this by bypassing the meeting id and name input by using the following url as your iFrame src, which takes you right into the meeting, https://zoom.us/wc/{{ meetindID }}/join?prefer=1&un={{ base64Encoded Name }} Example \<iframe src="https://zoom.us/wc/{{ meetindID }}/join?prefer=1&un=TWluZGF1Z2Fz" sandbox="allow-forms allow-scripts" allow="microphone; camera; fullscreen"\>\</iframe\> Let me know if this helps! Thanks, Tommy

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![waqarmirza572](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/waqarmirza572/32/2123_2.png) [@waqarmirza572](https://devforum.zoom.us/u/waqarmirza572)\
**Post date:** [October 23, 2019, 7:11pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/34 "2019-10-23T19:11:51Z")

</div>

Hey @tommy thanx again for cooperation, Iframe is working is fine. I embed it into my angular app. When i click on leave meeting it redirects to your home. How can i trigger leave meeting fucntion event on my app so that i am able to close iframe on my page.? Kindly help me in this regard. Thanx in advance.

---

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

</div>

Hey @waqarmirza572, happy to help!

Glad the iFrame is working. 🙂 Here are a few ideas to get handle the iFrame redirect after a meeting has ended / participant has left:

Set the post attendee url

> **[Post Attendee URL](https://support.zoom.us/hc/en-us/articles/360000518526-Post-Attendee-URL)**
>
> Overview
> Post attendee URL can be used to redirect users to your organization's website after they leave the Zoom meeting or webinar. It directs users to a specific page to have participants provid...

Or

Try adding an event handler when someone clicks the end button: [https://stackoverflow.com/questions/13214522/iframe-button-click-event](https://stackoverflow.com/questions/13214522/iframe-button-click-event).

Or

Listen for the [Meeting Ended](https://marketplace.zoom.us/docs/api-reference/webhook-reference/meeting-events/meeting-ending) / [Participant Left Webhook](https://marketplace.zoom.us/docs/api-reference/webhook-reference/meeting-events/participant-left) and implement code that closes the iFrame on your frontend.

Or

Make a custom button that lives outside the iFrame that [ends](https://marketplace.zoom.us/docs/api-reference/zoom-api/meetings/meetingstatus) and closes the meeting.

Or

Detect a redirect in the iFrame and close the iFrame. [https://stackoverflow.com/questions/10301193/detect-redirect-in-iframe](https://stackoverflow.com/questions/10301193/detect-redirect-in-iframe)

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![waqarmirza572](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/waqarmirza572/32/2123_2.png) [@waqarmirza572](https://devforum.zoom.us/u/waqarmirza572)\
**Post date:** [October 24, 2019, 3:55pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/36 "2019-10-24T15:55:46Z")

</div>

Hey @tommy thanx man. All Things are now Working fine, meetings are generating connecting and closing properly. Looking Forward for customizable integration without iframe. let me know when it is ready. Thanx again.

---

<div class="post-metadata">

**Author:** ![ojus.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ojus.zoom/32/734_2.png) [@ojus.zoom](https://devforum.zoom.us/u/ojus.zoom)\
**Post date:** [October 24, 2019, 5:25pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/37 "2019-10-24T17:25:17Z")

</div>

@waqarmirza572,

Glad we were able to help. We will be sure to let you know when the feature would be available.

---

<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:** [October 26, 2019, 3:56am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/38 "2019-10-26T03:56:48Z")

</div>

Hi @tommy, Show me solution for same origin policy with localhost://4200 or on mydomain when using iframe

---

<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:** [October 28, 2019, 8:19pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/39 "2019-10-28T20:19:38Z")

</div>

Hey @ngoctl,

The same origin policy error is fixed. Make sure you are using https.

> [@Zoom Audio and video not working with zoom SDK 1.6.0](https://devforum.zoom.us/t/zoom-audio-and-video-not-working-with-zoom-sdk-1-6-0/6263/2):
>
> Hey @sowjanya.narra, thanks for posting and using Zoom! May I ask what browser you are using? [Here is the supported browsers list.](https://marketplace.zoom.us/docs/sdk/native-sdks/Web-Client-SDK/getting-started/prerequisites) Also is your server secured via https? Thanks, Tommy

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:** [October 29, 2019, 4:19am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/40 "2019-10-29T04:19:53Z")

</div>

![29%20AM](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/a/a7140e0cd1c286450194a33fee9243d4485b719e.jpeg)  
Hey @tommy  
Where button [Start Video] ?

---

<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:** [October 29, 2019, 6:16pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/41 "2019-10-29T18:16:39Z")

</div>

Hey @ngoctl,

I was able to reproduce this. We believe this is a bug and we are working to fix it. JIRA: ZOOM-117488

Thanks for your patience,  
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 14, 2019, 6:15am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/42 "2019-11-14T06:15:37Z")

</div>

Hey Arun I am getting the same problem. Could you please tell how did you solve your problem.  
Thanks

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

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