how to append zmmtg-root inside meetingSDKElement DOM

Question

I am implementing zoom meeting inside my website. I am using zoom meeting SDK. Everything works well but DOM is appending just above the closing </html> tag. HOwever, In my view, I have defined DOM as per zoom instruction.

I am using Codeigniter, jQuery. Below is my code

//This is view

<div id="meetingSDKElement"></div>

//This is footer
<script src="https://source.zoom.us/2.18.2/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/2.18.2/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/2.18.2/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/2.18.2/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/2.18.2/lib/vendor/lodash.min.js"></script>
<script src="https://source.zoom.us/zoom-meeting-2.18.2.min.js"></script>
<script type="text/javascript" src="<?php echo base_url('assets/js/client-view.js'); ?>?v=<?php echo VERSION; ?>"></script>

//This is Javascript
$(document).ready(function(){
   getSignature();
});
function getSignature() {
  fetch(authEndpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      meetingNumber: meetingNumber,
      role: role,
      password:passWord
    })
  }).then((response) => {
    return response.json()
  }).then((data) => {
    console.log(data)
    startMeeting(data.signature)
  }).catch((error) => {
    console.log(error)
  })
}

function startMeeting(signature) {
$(".meeting-loader").css("visibility", "hidden");
  document.getElementById('zmmtg-root').style.display = 'block'

  ZoomMtg.init({
    leaveUrl: leaveUrl,
    success: (success) => {
      console.log(success)
      ZoomMtg.join({
        signature: signature,
        sdkKey: sdkKey,
        meetingNumber: meetingNumber,
        passWord: passWord,
        userName: userName,
        userEmail: userEmail,
        tk: registrantToken,
        zak: zakToken,
        success: (success) => {
          console.log(success)
        },
        error: (error) => {
          console.log(error)
        },
      })
    },
    error: (error) => {
      console.log(error)
    }
  })
}

I want zmmtg-root to be appended inside meetingSDKElement.

After choosing iFrame Solution mypage is not loading full video, instead a small window of video canvas and there is this big blue banner appeared

I would like the meeting UI to fit inside the iFrame.

Answer 1

Zoom Developer Advocate here. Since the Zoom Meeting SDK web Client View is designed to take up the whole page, it does not support being appended to a given HTML element.

However, there are two approaches to append the Meeting SDK inside a given HTML element:

1. Embed the Meeting SDK web Client View in an iFrame, keeping your existing code, but hosting and setting it as the iframe src:

   <div id="meetingSDKElement">
      <iframe src="https://example.com/meetingsdk" allow="camera; microphone"></iframe>
   </div>
   

2. Use the Meeting SDK web Component View, which is designed to be appended in a given HTML element:

   <div id="meetingSDKElement">
     <!-- Meeting SDK renders here when a user starts or joins a Zoom meeting -->
   </div>
   

   const client = ZoomMtgEmbedded.createClient()
   
   let meetingSDKElement = document.getElementById('meetingSDKElement')
   
   client.init({ zoomAppRoot: meetingSDKElement, language: 'en-US' })
   
   client.join({
      sdkKey: sdkKey,
      signature: signature,
      meetingNumber: meetingNumber,
      password: password,
      userName: userName,
      zak: zakToken
   })
   

For questions specific to the Zoom Developer Platform, feel free to ask on the Zoom devforum.