ComponentView example not displaying as expected

I am using Zoom web sdk 2.0.1, Angular 12 and the basic example for embedding Zoom meeting into a page. Joining the meeting works except

  1. there is no display on the page prior to joining the meeting. The
  <!-- For Component View -->
  <div id="meetingSDKElement">
    <!-- Zoom Meeting SDK Component View Rendered Here -->

displays nothing initially.

  1. Once the meeting has been joined, the Zoom component is shown in a small popup window

  1. The complete html
<div class="data-container">
  <div fxLayout="column" fxLayoutAlign="start center">
    <span class="page-title">Virtual Dome</span>
    <!-- For Component View -->
    <div id="meetingSDKElement">
      <!-- Zoom Meeting SDK Component View Rendered Here -->
    <button mat-flat-button color="primary" (click)="getSignature()">JOIN VIA ZOOM</button>
  1. The complete component
import {Component, Inject, OnInit} from '@angular/core';
import ZoomMtgEmbedded from '@zoomus/websdk/embedded';
import {HttpClient} from '@angular/common/http';
import {DOCUMENT} from '@angular/common';
import {Constants} from '../shared/constants';
import {BackendService} from '../services/backend.service';

  selector: 'app-zoom',
  templateUrl: './zoom.component.html',
  styleUrls: ['./zoom.component.scss']
export class ZoomComponent implements OnInit {
  userName = 'Mike Robinson';
  userEmail = '';
  password = '1gMsNU';
  client = ZoomMtgEmbedded.createClient();

  constructor(private backendService: BackendService,
              public httpClient: HttpClient,
              @Inject(DOCUMENT) document: any) {

  ngOnInit() {
    let meetingSDKElement = document.getElementById('meetingSDKElement')!;

      debug: true,
      zoomAppRoot: meetingSDKElement,
      language: 'en-US',
      customize: {
        meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
        toolbar: {
          buttons: [
              text: 'Custom Button',
              className: 'CustomButton',
              onClick: () => {
                console.log('custom button');

  getSignature() {
      .subscribe((result) => {
          const signature = result as String;
          console.log("state operation status " + signature);
          if (signature != null && signature.length > 0) {

  startMeeting(signature: any) {
      apiKey: Constants.ZOOM_API_KEY,
      signature: signature,
      meetingNumber: Constants.ZOOM_MEETING_ID,
      password: this.password,
      userName: this.userName,
      userEmail: this.userEmail

There are other errors that occur once the meeting is joined, but those are for another time.

1 Like

+100 I have the same issue

@mrobinson @carles.nunez

Are you able to provide a bit more detail on the issues you’re seeing? With the Component View, the meeting window won’t display until the meeting is joined.


The issue I am having has to do with after the meeting is joined. The Zoom UI is displaying a popup view whereas I was assuming that it would be displayed within the component that invoked it. Why would it be displayed as a popup? The code I provided is exactly what I was using to generate the screenshot.

The screenshots that are provided in the documentation for the Zoom embedded view are good but there is no code that shows how they are generated. That would really be a nice addition.

I would be happy to provide any further information you might require.

Hey @mrobinson,

Our team is planning to add more built-in customization tools but for the time being, you’ll want to adjust the CSS applied to the elements under #meetingSDKElement. Have you tested repositioning the element by changing the CSS/JS of that div?


Thanks Max,

I have decided to wait until your team adds more extensive customization tools. Happy holidays!

Hey @mrobinson,

Happy Holidays! For the use case described here, it sounds like we would need a flag to determine if the window is floating or displayed where it’s placed in the DOM. I’ll bring this up during a team meeting to make sure this would be covered by the upcoming changes.


I am also seeing the same type of issue I was able to get the draggable ribbon zoom element to be confined to the div I selected as the root. But according to this webpage we should be able to see more than just the minimized view and speaker view in the draggable ribbon zoom element. I cant find where to change that in the documentation.

@MaxM - is there a documentation page similar to but for this new component view so I can see all the available params for methods within ZoomMtgEmbedded.createClient()?

I see this reference but its really confusing, is there a different reference with code examples?

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