# Embed zoom meeting on angularjs application

**URL:** <https://devforum.zoom.us/t/embed-zoom-meeting-on-angularjs-application/5430>\
**Category:** Web\
**Created:** [August 10, 2019, 6:34am UTC](https://devforum.zoom.us/t/embed-zoom-meeting-on-angularjs-application/5430 "2019-08-10T06:34:20Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![alessandro.feliziani](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/alessandro.feliziani/32/44487_2.png) [@alessandro.feliziani](https://devforum.zoom.us/u/alessandro.feliziani)\
**Post date:** [August 10, 2019, 6:34am UTC](https://devforum.zoom.us/t/embed-zoom-meeting-on-angularjs-application/5430/1 "2019-08-10T06:34:21Z")

</div>

Hello,

I would like to embed a zoom meeting inside my angularjs web application. I have been following the CDN sample-app-web example.

I have added scripts:

```
<script src="https://source.zoom.us/1.5.0/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/1.5.0/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/1.5.0/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/1.5.0/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/1.5.0/lib/vendor/jquery.min.js"></script>
<script src="https://source.zoom.us/1.5.0/lib/vendor/lodash.min.js"></script>

<script src="https://source.zoom.us/zoom-meeting-1.5.0.min.js"></script>

```

I have placed the following div on my page:

` <div id="zmmtg-root" zoom></div>`

I have created the following angularjs directive:

```
.directive ('zoom', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {

      console.log('checkSystemRequirements');
      console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));
      
      ZoomMtg.preLoadWasm();
      ZoomMtg.prepareJssdk();
      
      const API_KEY = '***';
      const API_SECRET = '***';
      
      const meetConfig = {
          apiKey: API_KEY,
          apiSecret: API_SECRET,
          meetingNumber:,
          userName: '',
          passWord: '',
          leaveUrl: 'https://zoom.us',
          role: 0
      };
  
      ZoomMtg.generateSignature({
          meetingNumber: meetConfig.meetingNumber,
          apiKey: meetConfig.apiKey,
          apiSecret: meetConfig.apiSecret,
          role: meetConfig.role,
          success(res) {
              console.log('signature', res.result);
              ZoomMtg.init({
                  leaveUrl: 'http://www.zoom.us',
                  success() {
                      ZoomMtg.join(
                          {
                              meetingNumber: meetConfig.meetingNumber,
                              userName: meetConfig.userName,
                              signature: res.result,
                              apiKey: meetConfig.apiKey,
                              userEmail: 'email@gmail.com',
                              passWord: meetConfig.passWord,
                              success() {
                                  console.log('join meeting success');
                              },
                              error(res) {
                                  console.log(res);
                              }
                          }
                      );
                  },
                  error(res) {
                      console.log(res);
                  }
              });
          }
      });
      
    }
  }

```

And I have added css:

```
#zmmtg-root, .meeting-client, .meeting-client-inner {
  width: 30vh;
  height: 50vh;
  position: relative;
}

#wc-footer {
  bottom: auto !important;
  width: 1000px !important;
}

#dialog-join {
  width: 1000px !important;
}

#sv-active-video, .active-main, #sv-active-speaker-view, .main-layout {
  height: 500px !important;
  width: 1000px !important;
}

.suspension-window {
  transform: translate(-444px, 10px) !important;
}

#dialog-invite {
  display: none;
}

```

**Problem:**  
the styles produced by webSDK are attached to the body of my application, and they are conflicting with my css class. How can I avoid that?

Thank you,  
Alessandro

---

<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:** [August 12, 2019, 4:38pm UTC](https://devforum.zoom.us/t/embed-zoom-meeting-on-angularjs-application/5430/2 "2019-08-12T16:38:26Z")

</div>

Hey @alessandro.feliziani,

Thanks for the detailed post.

We don’t suggest overwriting/changing the Web SDK CSS.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![alessandro.feliziani](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/alessandro.feliziani/32/44487_2.png) [@alessandro.feliziani](https://devforum.zoom.us/u/alessandro.feliziani)\
**Post date:** [August 13, 2019, 6:50am UTC](https://devforum.zoom.us/t/embed-zoom-meeting-on-angularjs-application/5430/3 "2019-08-13T06:50:17Z")

</div>

Hi Tommy,

I have a .footer class that is being overwritten by WebSDK. Also my fonts are being overwritten. I guess I’m doing something wrong. Or is it supposed that WebSDK is placing new styles in the head of my webapp?

 ![css](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/f/f7aeb69e52741615acdd3c2910e616aea110ffb8.png)

You wrote in " [Zoom Meeting Custom Ui](https://devforum.zoom.us/t/zoom-meeting-custom-ui/5281)" that we can customize css classes that are generated. So I have added some classes to my stylesheet:  
#zmmtg-root, .meeting-client, .meeting-client-inner {  
width: 1000px;  
height: 500px;  
position: relative;  
}

```
#wc-footer {
  bottom: auto !important;
  width: 1000px !important;
}

#dialog-join {
  width: 1000px !important;
}

#sv-active-video, .active-main, #sv-active-speaker-view, .main-layout {
  height: 500px !important;
  width: 1000px !important;
}

.suspension-window {
  transform: translate(-444px, 10px) !important;
}

#dialog-invite {
  display: none;
}

```

Is that wrong?

Also, inspecting my DOM, I noticed that I have two zmmtg-root DIVs: one added by me (where I would like the meeting to be embedded) and another one created by WebSDK. How can I avoid that?

 ![zmmgt1](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/4/4ec7addca52563c929a92832a4db763bb38b21fc.png)  
 ![zmmgt2](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/e/e812e1ac427cec9632fcbf4f88661c4e732c312e.png)

---

<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:** [August 13, 2019, 6:58pm UTC](https://devforum.zoom.us/t/embed-zoom-meeting-on-angularjs-application/5430/4 "2019-08-13T18:58:58Z")

</div>

Hey @alessandro.feliziani,

> [@alessandro.feliziani](#):
>
> I have a .footer class that is being overwritten by WebSDK. Also my fonts are being overwritten. I guess I’m doing something wrong. Or is it supposed that WebSDK is placing new styles in the head of my webapp?

I would suggest changing the class name to something like `.my-app-footer` so the Web SDK does not overwrite it.

To fix the font issue, try adding `!important;` to your font declartion in your css or do this to change all the fonts (even the Web SDK fonts)

```css
* {
  font-family: fontfamilyhere;
}

```

> [@alessandro.feliziani](#):
>
> You wrote in " [Zoom Meeting Custom Ui](https://devforum.zoom.us/t/zoom-meeting-custom-ui/5281)" that we can customize css classes that are generated. So I have added some classes to my stylesheet:

It is not wrong, we just do not recommend it.

> [@alessandro.feliziani](#):
>
> Also, inspecting my DOM, I noticed that I have two zmmtg-root DIVs: one added by me (where I would like the meeting to be embedded) and another one created by WebSDK. How can I avoid that?

You could try adding this css to prevent the second div from displaying:

```css
body > #zmmtg-root {
   display: none !important;
}

```

Let me know if that helps!

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![alessandro.feliziani](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/alessandro.feliziani/32/44487_2.png) [@alessandro.feliziani](https://devforum.zoom.us/u/alessandro.feliziani)\
**Post date:** [August 14, 2019, 2:30pm UTC](https://devforum.zoom.us/t/embed-zoom-meeting-on-angularjs-application/5430/5 "2019-08-14T14:30:41Z")

</div>

Hi Tommy,

thank you for your suggestions.

This is how WebSDK is going to work, also on future releases? I would not expect that I have to change my css to solve conflicts, and that WebSDK is adding styles to the body of my page. It’s a bit invasive from my point of view… can zoom stylesheet just be included as a CDN resource, so that I can have a better control on it?

I look forward for integrating zoom into my platform, but at the current stage it seems too muck risky.

Thank you for your support.

---

<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:** [August 14, 2019, 3:43pm UTC](https://devforum.zoom.us/t/embed-zoom-meeting-on-angularjs-application/5430/6 "2019-08-14T15:43:23Z")

</div>

Hey @alessandro.feliziani,

Thanks for your feedback.

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

---

<div class="post-metadata">

**Author:** ![DeveloperBot](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/developerbot/32/12632_2.png) [@DeveloperBot](https://devforum.zoom.us/u/DeveloperBot)\
**Post date:** [August 21, 2020, 6:38pm UTC](https://devforum.zoom.us/t/embed-zoom-meeting-on-angularjs-application/5430/7 "2020-08-21T18:38:28Z")

</div>