# Web sdk iframe not working as aspected in React js app

**URL:** <https://devforum.zoom.us/t/web-sdk-iframe-not-working-as-aspected-in-react-js-app/24050>\
**Category:** Web\
**Created:** [July 14, 2020, 6:53am UTC](https://devforum.zoom.us/t/web-sdk-iframe-not-working-as-aspected-in-react-js-app/24050 "2020-07-14T06:53:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![awais1304](https://avatars.discourse-cdn.com/v4/letter/a/f19dbf/32.png) [@awais1304](https://devforum.zoom.us/u/awais1304)\
**Post date:** [July 14, 2020, 6:53am UTC](https://devforum.zoom.us/t/web-sdk-iframe-not-working-as-aspected-in-react-js-app/24050/1 "2020-07-14T06:53:54Z")

</div>

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

---

<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:** [July 16, 2020, 7:38pm UTC](https://devforum.zoom.us/t/web-sdk-iframe-not-working-as-aspected-in-react-js-app/24050/2 "2020-07-16T19:38:54Z")

</div>

Hey @awais1304,

Can you clarify what you mean by the iFrame option?

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![awais1304](https://avatars.discourse-cdn.com/v4/letter/a/f19dbf/32.png) [@awais1304](https://devforum.zoom.us/u/awais1304)\
**Post date:** [July 17, 2020, 5:43am UTC](https://devforum.zoom.us/t/web-sdk-iframe-not-working-as-aspected-in-react-js-app/24050/3 "2020-07-17T05:43:33Z")

</div>

Hi @tommy

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

---

<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:** [July 20, 2020, 8:12pm UTC](https://devforum.zoom.us/t/web-sdk-iframe-not-working-as-aspected-in-react-js-app/24050/4 "2020-07-20T20:12:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![awais1304](https://avatars.discourse-cdn.com/v4/letter/a/f19dbf/32.png) [@awais1304](https://devforum.zoom.us/u/awais1304)\
**Post date:** [July 22, 2020, 4:50am UTC](https://devforum.zoom.us/t/web-sdk-iframe-not-working-as-aspected-in-react-js-app/24050/5 "2020-07-22T04:50:28Z")

</div>

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

---

<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:** [July 22, 2020, 6:34pm UTC](https://devforum.zoom.us/t/web-sdk-iframe-not-working-as-aspected-in-react-js-app/24050/6 "2020-07-22T18:34:46Z")

</div>

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:

> [@WEB sdk add inline styles to html and body](https://devforum.zoom.us/t/web-sdk-add-inline-styles-to-html-and-body/23375/9):
>
> Hey @daniel2, @nvivot, @houssam.hammoud, @simonwong, Currently the best way to use the Web SDK without affecting the styling and functionality of your app is to navigate the user to a seperate path or sub domain so it does not interfere with your CSS. Then after the meeting you can navigate back to your main page with the [leaveUrl](https://zoom.github.io/sample-app-web/ZoomMtg.html#init) Thanks, Tommy

Thanks,  
Tommy