Web sdk iframe not working as aspected in React js app

After integrating zoom websdk when I try to implement join by iframe option , the created iframe displays nothing instead on the background i.e. on the body zoom view starts to appear while checking by inspect element I found that there are 2 objects with zmmtg-root id one inside iframe and one outside the iframe and the one outside has all the content inside while the one inside the iframe is empty , am I missing something while integrating ?
Any help will be truly appreciated , Thanks

wedsdk version : 1.7.10
react version : 16.10.2

Hey @awais1304,

Can you clarify what you mean by the iFrame option?

Thanks,
Tommy

Hi @tommy

When I call this : testTool.createZoomNode(“websdk-iframe”, joinUrl);

Hey @awais1304,

Can you provide steps to reproduce the issue, or a sample GitHub repo with your code so I can understand and test the issue?

Thanks,
Tommy

I integrated the sdk in react app after that copy pasted the following files from the sample project into my react project :
/js/index.js
/js/meeting.js
/js/tool.js

and from my script called join_iframe click listener i.e.
const signature = ZoomMtg.generateSignature({
meetingNumber: meetingConfig.mn,
apiKey: API_KEY,
apiSecret: API_SECRET,
role: meetingConfig.role,
success: function (res) {
console.log(res.result);
meetingConfig.signature = res.result;
meetingConfig.apiKey = API_KEY;
const joinUrl =
testTool.getCurrentDomain() +
“/meeting.html?” +
testTool.serialize(meetingConfig);
testTool.createZoomNode(“websdk-iframe”, joinUrl);
},
});
Upon calling this function iframe is placed in the center of screen but the meeting actually starts in the background which covers the whole view and not in the iframe view

Hey @awais1304,

The Web SDK was not designed to work within an iFrame. Checkout my tips here for best practices using the Web SDK in your React App:

Thanks,
Tommy

1 Like