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.
