# Angular Integration with JS Web SDK **URL:** \ **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:** 1
**Author:** ![dumparun](https://avatars.discourse-cdn.com/v4/letter/d/73ab20/32.png) [@dumparun](https://devforum.zoom.us/u/dumparun)\ **Post date:** [August 21, 2019, 11:26am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/1 "2019-08-21T11:26:30Z")
We are attempting to integrate JS SDK with an existing Angular4 application. Integration is done following the documentation. However post integration, it’s found that the Zoom SDK itself gets initiated creating a black screen over the existing angular application. Any documentation, or sample integration application with Angular 4 is really helpful. ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/f/f501ea69bbb47a5ee0076832e81718d73583725a.png) Steps to reproduce the behavior: 1. Integrate SDK as mentioned in the developer guide. 2. Application starts with a black screen ---
**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:** [August 21, 2019, 4:27pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/2 "2019-08-21T16:27:25Z")
Hey @dumparun, thanks for reaching out and using Zoom! Can you try adding the `zmmtg-root` id onto the html tag where you would like the meeting to display? > [@Zoom Meeting Custom Ui](https://devforum.zoom.us/t/zoom-meeting-custom-ui/5281/2): > > Hey @khanh.nguyen, Yes there is a way to put the Meeting UI into a div. The Zoom Meeting UI is not atcually attached to the body. The css makes it seem that way because of the following styles: #zmmtg-root { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: black; } The Zoom Meeting UI will be rendered in the tag with the zmmtg-root id. You can place this anywhere in your project. You can also customize the css classes that are generated a… You could also use [CSS Z-Index](https://css-tricks.com/almanac/properties/z/z-index/) to place the meeting behind your app while you do not need to display it. [Css Display hidden could also work.](https://www.sitepoint.com/five-ways-to-hide-elements-in-css/) Let me know if this helps! Thanks, Tommy ---
**Author:** ![dumparun](https://avatars.discourse-cdn.com/v4/letter/d/73ab20/32.png) [@dumparun](https://devforum.zoom.us/u/dumparun)\ **Post date:** [August 22, 2019, 11:23am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/3 "2019-08-22T11:23:15Z")
> [@tommy](#): > > tag Thanks Tommy Attached screen shot when i tried adding div inside html. There are two such divs created now. Ideally, i would like to get the zoom div, and related divs (chat etc) within the application div, post which it would be easy to control the placement and colors using CSS. Regards Arun ![Screenshot%20(3)](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/2/2ac0448fa8de35295a0bd6612e7cb9ade68eadaa.png) ---
**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:** [August 22, 2019, 6:05pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/4 "2019-08-22T18:05:30Z")
Thanks @dumparun, For now I would suggest using CSS to customize when/where it displays. Also reference this work around: > [@Web sdk - Connecting the user with computer audio automatically when joining](https://devforum.zoom.us/t/web-sdk-connecting-the-user-with-computer-audio-automatically-when-joining/2682/6): > > Hey @wongpang827, As of now we do not have that feature on the Web SDK. Although, as a work around, you could use the Join Meeting via Web Client URL, and pass in the prefer=1 query param to automatically join a meeting with computer audio. If you want to also pass in a default name for the user joining, use the un=base64EncodeName query param. Here is an example: https://zoom.us/wc/{{ MeetingID }}/join?prefer=1&un=dG9tbXk= You can then embed this in an iFrame on your site to mirror the Web… We will have a No-UI Zoom SDK that can be customizable in the future, most likely early next year. You can [follow our release log here](https://marketplace.zoom.us/docs/changelog). Thanks, Tommy ---
**Author:** ![kaptan](https://avatars.discourse-cdn.com/v4/letter/k/a9adbd/32.png) [@kaptan](https://devforum.zoom.us/u/kaptan)\ **Post date:** [August 23, 2019, 2:43pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/5 "2019-08-23T14:43:55Z")
Hi @tommy, We tried as suggested by you, We are now able to open zoom meeting in iframe, but we are unable to see the video stream of other participants, we get notification that participant joined. Thanks, Kaptan ---
**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:** [August 23, 2019, 7:17pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/6 "2019-08-23T19:17:12Z")
Hey @kaptan, Can you send me a screenshot of what you see and steps to reproduce? When you say you can’t see video of other participants, are those participants using the iFrame or Zoom Client? Also can you confirm that video is turned on? Thanks, Tommy ---
**Author:** ![dumparun](https://avatars.discourse-cdn.com/v4/letter/d/73ab20/32.png) [@dumparun](https://devforum.zoom.us/u/dumparun)\ **Post date:** [August 24, 2019, 7:45am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/7 "2019-08-24T07:45:41Z")
Hi Tommy, We are able to see the video of participants now. However, it’s in a speaker view. We would like to use gallery view, does JS SDK supports Gallery View? Is there a work around or roadmap for supporting the same? Appreciate your support. Regards Arun ---
**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:** [August 26, 2019, 3:05pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/8 "2019-08-26T15:05:21Z")
Hey @dumparun, Glad you are able to see participants now 🙂 Unfortunately the Web Client or SDK does not support Gallery View. We will work on adding this in the future. Here are the current requirements for Gallery View. > **[Displaying Participants in Gallery View](https://support.zoom.us/hc/en-us/articles/360000005883-Displaying-Participants-in-Gallery-View)** > > Overview > Gallery view lets you see thumbnail displays of participants, in a grid pattern, which expands and contracts as participants join and leave the meeting. Depending on your CPU, you can disp... Thanks, Tommy ---
**Author:** ![dumparun](https://avatars.discourse-cdn.com/v4/letter/d/73ab20/32.png) [@dumparun](https://devforum.zoom.us/u/dumparun)\ **Post date:** [August 28, 2019, 2:01am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/9 "2019-08-28T02:01:02Z")
Thanks Tommy, Any tentative timeline you are looking for this feature to be available? ---
**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:** [August 28, 2019, 3:57pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/10 "2019-08-28T15:57:07Z")
Hey @dumparun, I don’t have anything super specific, but sometime next year. [You can track our releases here to be notified when it’s available.](https://marketplace.zoom.us/docs/changelog) Thanks, Tommy ---
**Author:** ![kaptan](https://avatars.discourse-cdn.com/v4/letter/k/a9adbd/32.png) [@kaptan](https://devforum.zoom.us/u/kaptan)\ **Post date:** [October 3, 2019, 9:57am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/11 "2019-10-03T09:57:02Z")
Hey @tommy, Till few days back Webclient was working fine inside iFrame, but recently it stops working and we are receiving Refused to display ---
**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 3, 2019, 4:11pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/13 "2019-10-03T16:11:20Z")
Hey @kaptan, We are working on fixing this, apologies and thanks for your patience. Duplicate posts: > [@Iframe for the join link](https://devforum.zoom.us/t/iframe-for-the-join-link/6077/11): > > Hey @rory.street, We are looking into this. Looks like this is only still happening with the /wc path. As an alternative you can use the /j and /s for embedding meetings in iFrames. This might require a few extra clicks for your users, but should be a workaround until we get /wc working again. To Start Meeting: [https://zoom.us/s/meetingID](https://zoom.us/s/meetingID) To Join Meeting [https://zoom.us/j/meetingID](https://zoom.us/j/meetingID) Will get back to you asap once our engineers have taken a look. Thanks, Tommy > [@Recording playback URLs started returning X-Frame-Options: SAMEORIGIN, breaking our iframe embedding](https://devforum.zoom.us/t/recording-playback-urls-started-returning-x-frame-options-sameorigin-breaking-our-iframe-embedding/6059/18): > > Thanks @lucas.cioffi, our engineers are working on it, and I will update you once it is fixed! Thanks for your patience slight_smile -Tommy Thanks, Tommy ---
**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 10, 2019, 4:47pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/14 "2019-10-10T16:47:19Z")
Hey @kaptan, We will have this (/wc path) fixed in a release coming this weekend. Thanks again for your patience. -Tommy ---
**Author:** ![kaptan](https://avatars.discourse-cdn.com/v4/letter/k/a9adbd/32.png) [@kaptan](https://devforum.zoom.us/u/kaptan)\ **Post date:** [October 15, 2019, 7:43am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/16 "2019-10-15T07:43:35Z")
Hi @tommy, Now the x-frame issue is not there, thanks for updates. But now when we are trying to start meeting using start URL which contains ZAK, In iFrame its redirecting to login page. Earlier below configurations was working We have implemented zoom webclient in iframe with [h](https://zoom.us/wc/)[ttps://zoom.us/wc/](https://zoom.us/wc/) Is there a way to start a meeting by passing the zak and prefer like , [h](https://zoom.us/wc/%7B%7BmeetingId%7D%7D/start?zak=%7B%7Bzak%7D%7D&prefer=0)[ttps://zoom.us/wc/{{meetingId}}/start?zak={{zak}}&prefer=0](https://zoom.us/wc/%7B%7BmeetingId%7D%7D/start?zak=%7B%7Bzak%7D%7D&prefer=0) ? currently the user is being redirected to login page. ---
**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 15, 2019, 7:18pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/17 "2019-10-15T19:18:23Z")
Hey @kaptan, The host user must be logged in now to start the meeting. You have 2 options: 1. Sign into your Zoom account in the iFrame to start the meeting. Or 1. If you are already signed in to your Zoom account on your browser, then embedding the `start_url` in the iFrame will start the meeting as expected without having to sing in (again). Thanks, Tommy ---
**Author:** ![kaptan](https://avatars.discourse-cdn.com/v4/letter/k/a9adbd/32.png) [@kaptan](https://devforum.zoom.us/u/kaptan)\ **Post date:** [October 16, 2019, 4:06am UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/18 "2019-10-16T04:06:42Z")
Hi @tommy, Below is our scenario We have group of users out of them one user is admin, when all users join the meeting they need to wait until admin/host joins. Admin is not aware of its zoom credentials, as we are managing the meetings behind the scene. Based on above scenario how we can meet our requirement. 2 options suggested by you will not meet our requirement. Please suggest… Regards, Kaptan ---
**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 16, 2019, 4:38pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/19 "2019-10-16T16:38:31Z")
Hey @kaptan, Make sure your join before Admin/host settings is turned off, you can do this when you [create the meeting via the API](https://marketplace.zoom.us/docs/api-reference/zoom-api/meetings/meetingcreate) request body `settings` \> `join_before_host`, or the host / account settings: ![33%20AM](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/7/77eabb30d60aac4aa2870a861ef0e970feec2fe5.png) Thanks, Tommy ---
**Author:** ![kaptan](https://avatars.discourse-cdn.com/v4/letter/k/a9adbd/32.png) [@kaptan](https://devforum.zoom.us/u/kaptan)\ **Post date:** [October 16, 2019, 5:34pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/20 "2019-10-16T17:34:00Z")
Hi @tommy, Already did this setting, but admin wants to join, but iFrame not allowing Admin to join and its redirecting to login page, we already have ZAK. Regards, Kaptan ---
**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 16, 2019, 6:33pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/21 "2019-10-16T18:33:48Z")
Oh I see, @kaptan. The host now has to login or be logged in to start the meeting via iFrame. > [@Angular Integration with JS Web SDK](https://devforum.zoom.us/t/angular4-integration-with-js-sdk/5621/17): > > Hey @kaptan, The host user must be logged in now to start the meeting. You have 2 options: Sign into your Zoom account in the iFrame to start the meeting. Or If you are already signed in to your Zoom account on your browser, then embedding the start\_url in the iFrame will start the meeting as expected without having to sing in (again). Thanks, Tommy Thanks, Tommy ---
**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 18, 2019, 6:26pm UTC](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621/22 "2019-10-18T18:26:55Z")
Hye tommy hope so you r doing Well i am integrating zoom in angular application i getting this error and appplication stucks. ![Capture](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/5/537b6082dbfaa404ffb0303b0374f446c55c5884.png) [Next page](https://devforum.zoom.us/t/angular-integration-with-js-web-sdk/5621.md?page=2)