React Zoom embebbed

Meeting SDK Web
1

Hi! i think that doing this question i missed some documentation, but i wasn’t able to find it.

So, how to embed a zoom meeting inside a webpage? I got a react application working so i know that using React component that is not possible, it generates a new div that covers the whole screen

But i have seen this topic: https://devforum.zoom.us/t/embed-zoom-into-website/1035 in which you guys talk about embed it with an iframe.

I tested it but im getting an 403

return (
    <iframe
      title="test"
      style={{ border: 'none', height: '600px', width: '100%;' }}
      src="https://zoom.us/wc/92784453940/join?prefer=1&un=TWluZGF1Z2Fz&pwd=840126"
      sandbox="allow-forms allow-scripts allow-same-origin"
      allow="microphone; camera"
    />
  );

Is there some kind of documentation about how to implement that iframe?

I have to build four buttons, each button should open a metting, so the user that press that button should be enter in the same meeting of every user that pressed it before. Is that possible?
Could i have 4 meetings working at the same time invoked via iframe?

Many thanks for all your help!

Edit 1:

This is the console output for this:

return (
    <iframe
      title="test"
      src="https://zoom.us/wc/96257676995/join?prefer=1&un=TWluZGF1Z2Fz"
      sandbox="allow-forms allow-scripts"
      allow="microphone; camera; fullscreen"
    />
  );

csrf_js?t_x_zm_rid=2:437 Ignored call to ‘alert()’. The document is sandboxed, and the ‘allow-modals’ keyword is not set.
(anonymous) @ csrf_js?t_x_zm_rid=2:437
(anonymous) @ csrf_js?t_x_zm_rid=2:439
zoom-components.min.js:33 Uncaught DOMException: Failed to read the ‘cookie’ property from ‘Document’: The document is sandboxed and lacks the ‘allow-same-origin’ flag.
at r (https://st2.zoom.us/static/94142/js/lib/vue/zoom-components.min.js:33:1139)
at Function.o.get (https://st2.zoom.us/static/94142/js/lib/vue/zoom-components.min.js:33:1450)
at Object. (https://st2.zoom.us/static/94142/js/lib/vue/zoom-components.min.js:1:7467)
at o (https://st2.zoom.us/static/94142/js/lib/vue/zoom-components.min.js:1:588)
at Module. (https://st2.zoom.us/static/94142/js/lib/vue/zoom-components.min.js:33:89615)
at o (https://st2.zoom.us/static/94142/js/lib/vue/zoom-components.min.js:1:588)
at Object. (https://st2.zoom.us/static/94142/js/lib/vue/zoom-components.min.js:33:1634)
at o (https://st2.zoom.us/static/94142/js/lib/vue/zoom-components.min.js:1:588)
at https://st2.zoom.us/static/94142/js/lib/vue/zoom-components.min.js:1:2304
at https://st2.zoom.us/static/94142/js/lib/vue/zoom-components.min.js:1:2314
r @ zoom-components.min.js:33
o.get @ zoom-components.min.js:33
(anonymous) @ zoom-components.min.js:1
o @ zoom-components.min.js:1
(anonymous) @ zoom-components.min.js:33
o @ zoom-components.min.js:1
(anonymous) @ zoom-components.min.js:33
o @ zoom-components.min.js:1
(anonymous) @ zoom-components.min.js:1
(anonymous) @ zoom-components.min.js:1
(anonymous) @ zoom-components.min.js:1
(anonymous) @ zoom-components.min.js:1
popup-captcha.min.js:8 Uncaught DOMException: Failed to read the ‘cookie’ property from ‘Document’: The document is sandboxed and lacks the ‘allow-same-origin’ flag.
at a (https://st3.zoom.us/static/94142/js/lib/vue/advanced/popup-captcha/popup-captcha.min.js:8:1139)
at Function.r.get (https://st3.zoom.us/static/94142/js/lib/vue/advanced/popup-captcha/popup-captcha.min.js:8:1450)
at Object. (https://st3.zoom.us/static/94142/js/lib/vue/advanced/popup-captcha/popup-captcha.min.js:1:7768)
at n (https://st3.zoom.us/static/94142/js/lib/vue/advanced/popup-captcha/popup-captcha.min.js:1:340)
at Object. (https://st3.zoom.us/static/94142/js/lib/vue/advanced/popup-captcha/popup-captcha.min.js:8:36455)
at n (https://st3.zoom.us/static/94142/js/lib/vue/advanced/popup-captcha/popup-captcha.min.js:1:340)
at Module. (https://st3.zoom.us/static/94142/js/lib/vue/advanced/popup-captcha/popup-captcha.min.js:8:60539)
at n (https://st3.zoom.us/static/94142/js/lib/vue/advanced/popup-captcha/popup-captcha.min.js:1:340)
at https://st3.zoom.us/static/94142/js/lib/vue/advanced/popup-captcha/popup-captcha.min.js:1:1139
at https://st3.zoom.us/static/94142/js/lib/vue/advanced/popup-captcha/popup-captcha.min.js:1:1150
a @ popup-captcha.min.js:8
r.get @ popup-captcha.min.js:8
(anonymous) @ popup-captcha.min.js:1
n @ popup-captcha.min.js:1
(anonymous) @ popup-captcha.min.js:8
n @ popup-captcha.min.js:1
(anonymous) @ popup-captcha.min.js:8
n @ popup-captcha.min.js:1
(anonymous) @ popup-captcha.min.js:1
(anonymous) @ popup-captcha.min.js:1
(anonymous) @ popup-captcha.min.js:1
(anonymous) @ popup-captcha.min.js:1
all.min.js:7 Uncaught DOMException: Failed to read the ‘cookie’ property from ‘Document’: The document is sandboxed and lacks the ‘allow-same-origin’ flag.
at Function.jQuery.cookie (https://st1.zoom.us/static/94142/js/all.min.js:7:515)
at Zoom meeting on web - Zoom
jQuery.cookie @ all.min.js:7
(anonymous) @ 96257676995?tk=&track_id=&meeting_result=&jmf_code=&wpk=&from=&_x_zm_rtaid=SM8MAzDwRXCyJWZ-EqcdJA.1611196987756.b66617370b3a1defba3369b5711f0549&_x_zm_rhtaid=915:1034
96257676995?tk=&track_id=&meeting_result=&jmf_code=&wpk=&from=&_x_zm_rtaid=SM8MAzDwRXCyJWZ-EqcdJA.1611196987756.b66617370b3a1defba3369b5711f0549&_x_zm_rhtaid=915:742 Uncaught DOMException: Failed to read the ‘cookie’ property from ‘Document’: The document is sandboxed and lacks the ‘allow-same-origin’ flag.
at readCookie (Zoom meeting on web - Zoom)
at HTMLDocument. (Zoom meeting on web - Zoom)
readCookie @ 96257676995?tk=&track_id=&meeting_result=&jmf_code=&wpk=&from=&_x_zm_rtaid=SM8MAzDwRXCyJWZ-EqcdJA.1611196987756.b66617370b3a1defba3369b5711f0549&_x_zm_rhtaid=915:742
(anonymous) @ 96257676995?tk=&track_id=&meeting_result=&jmf_code=&wpk=&from=&_x_zm_rtaid=SM8MAzDwRXCyJWZ-EqcdJA.1611196987756.b66617370b3a1defba3369b5711f0549&_x_zm_rhtaid=915:700
js.cookie.js:109 Uncaught DOMException: Failed to read the ‘cookie’ property from ‘Document’: The document is sandboxed and lacks the ‘allow-same-origin’ flag.
at a (https://static.ada.support/embed.js:1:40198)
at Function.o.get (https://static.ada.support/embed.js:1:40509)
at e.componentDidMount (https://static.ada.support/embed.js:1:47482)
at h (https://static.ada.support/embed.js:1:32155)
at m (https://static.ada.support/embed.js:1:32356)
at Object.A [as render] (https://static.ada.support/embed.js:1:37164)
at Object.freeze.o. [as start] (https://static.ada.support/embed.js:1:8860)
at HTMLDocument. (https://static.ada.support/embed.js:1:9841)
a @ js.cookie.js:109
o.get @ js.cookie.js:144
e.componentDidMount @ index.tsx:106
h @ preact.min.js:1
m @ preact.min.js:1
A @ preact.min.js:1
Object.freeze.o. @ index.ts:202
(anonymous) @ index.ts:297
all.min.js:2 Uncaught DOMException: Failed to read the ‘cookie’ property from ‘Document’: The document is sandboxed and lacks the ‘allow-same-origin’ flag.
at Function.jQuery.cookie (https://st1.zoom.us/static/94142/js/all.min.js:7:515)
at HTMLDocument. (https://st1.zoom.us/static/94142/js/all.min.js:29:38269)
at e (https://st1.zoom.us/static/94142/js/all.min.js:2:29453)
at t (https://st1.zoom.us/static/94142/js/all.min.js:2:29755)
(anonymous) @ all.min.js:2
setTimeout (async)
k.readyException @ all.min.js:2
(anonymous) @ all.min.js:2
e @ all.min.js:2
t @ all.min.js:2
setTimeout (async)
(anonymous) @ all.min.js:2
c @ all.min.js:2
fireWith @ all.min.js:2
fire @ all.min.js:2
c @ all.min.js:2
fireWith @ all.min.js:2
t @ all.min.js:2
setTimeout (async)
(anonymous) @ all.min.js:2
c @ all.min.js:2
fireWith @ all.min.js:2
fire @ all.min.js:2
c @ all.min.js:2
fireWith @ all.min.js:2
ready @ all.min.js:2
B @ all.min.js:2
js_media_ie.min.js:1 Uncaught DOMException: Failed to read the ‘localStorage’ property from ‘Window’: The document is sandboxed and lacks the ‘allow-same-origin’ flag.
at Object. (https://st2.zoom.us/static/94142/webclient/js/av-sdk/js_media_ie.min.js:1:4443)
at n (https://st2.zoom.us/static/94142/webclient/js/av-sdk/js_media_ie.min.js:1:353)
at Object. (https://st2.zoom.us/static/94142/webclient/js/av-sdk/js_media_ie.min.js:1:160438)
at n (https://st2.zoom.us/static/94142/webclient/js/av-sdk/js_media_ie.min.js:1:353)
at Object. (https://st2.zoom.us/static/94142/webclient/js/av-sdk/js_media_ie.min.js:1:160295)
at n (https://st2.zoom.us/static/94142/webclient/js/av-sdk/js_media_ie.min.js:1:353)
at https://st2.zoom.us/static/94142/webclient/js/av-sdk/js_media_ie.min.js:1:1152
at https://st2.zoom.us/static/94142/webclient/js/av-sdk/js_media_ie.min.js:1:1163
at https://st2.zoom.us/static/94142/webclient/js/av-sdk/js_media_ie.min.js:1:215
at https://st2.zoom.us/static/94142/webclient/js/av-sdk/js_media_ie.min.js:1:219
(anonymous) @ js_media_ie.min.js:1
n @ js_media_ie.min.js:1
(anonymous) @ js_media_ie.min.js:1
n @ js_media_ie.min.js:1
(anonymous) @ js_media_ie.min.js:1
n @ js_media_ie.min.js:1
(anonymous) @ js_media_ie.min.js:1
(anonymous) @ js_media_ie.min.js:1
(anonymous) @ js_media_ie.min.js:1
(anonymous) @ js_media_ie.min.js:1
recaptcha__es.js:292 Uncaught DOMException: Failed to construct ‘Worker’: Script at ‘https://www.google.com/recaptcha/api2/webworker.js?hl=es&v=_KUxfxvAoJ4k7SaKyLbja4Mi’ cannot be accessed from origin ‘null’.
at eN. (https://www.gstatic.com/recaptcha/releases/_KUxfxvAoJ4k7SaKyLbja4Mi/recaptcha__es.js:292:214)
at new eN (https://www.gstatic.com/recaptcha/releases/_KUxfxvAoJ4k7SaKyLbja4Mi/recaptcha__es.js:488:267)
at Ol. (https://www.gstatic.com/recaptcha/releases/_KUxfxvAoJ4k7SaKyLbja4Mi/recaptcha__es.js:132:371)
at new Ol (https://www.gstatic.com/recaptcha/releases/_KUxfxvAoJ4k7SaKyLbja4Mi/recaptcha__es.js:429:160)
at Object.init (https://www.gstatic.com/recaptcha/releases/_KUxfxvAoJ4k7SaKyLbja4Mi/recaptcha__es.js:598:422)
at https://www.google.com/recaptcha/api2/anchor?ar=1&k=6LfmSyQUAAAAAFLRDxYjF4navVNB9o2sbSXOCsNy&co=aHR0cHM6Ly96b29tLnVzOjQ0Mw…&hl=es&v=_KUxfxvAoJ4k7SaKyLbja4Mi&size=normal&cb=m8hk93i20lpf:182:29
(anonymous) @ VM6 recaptcha__es.js:292
eN @ VM6 recaptcha__es.js:488
(anonymous) @ VM6 recaptcha__es.js:132
Ol @ VM6 recaptcha__es.js:429
(anonymous) @ VM6 recaptcha__es.js:598
(anonymous) @ www.google.com/recap…cb=m8hk93i20lpf:182
96257676995?tk=&track_id=&meeting_result=&jmf_code=&wpk=&from=&_x_zm_rtaid=SM8MAzDwRXCyJWZ-EqcdJA.1611196987756.b66617370b3a1defba3369b5711f0549&_x_zm_rhtaid=915:891 GET https://st2.zoom.us/static/94142/webclient/js/av-sdk/video_msimd.min.js 403
(anonymous) @ 96257676995?tk=&track_id=&meeting_result=&jmf_code=&wpk=&from=&_x_zm_rtaid=SM8MAzDwRXCyJWZ-EqcdJA.1611196987756.b66617370b3a1defba3369b5711f0549&_x_zm_rhtaid=915:891
e @ all.min.js:2
t @ all.min.js:2
setTimeout (async)
(anonymous) @ all.min.js:2
c @ all.min.js:2
fireWith @ all.min.js:2
fire @ all.min.js:2
c @ all.min.js:2
fireWith @ all.min.js:2
ready @ all.min.js:2
B @ all.min.js:2
96257676995?tk=&track_id=&meeting_result=&jmf_code=&wpk=&from=&_x_zm_rtaid=SM8MAzDwRXCyJWZ-EqcdJA.1611196987756.b66617370b3a1defba3369b5711f0549&_x_zm_rhtaid=915:889 GET https://st1.zoom.us/static/94142/webclient/js/av-sdk/video.msimd.wasm 403
(anonymous) @ 96257676995?tk=&track_id=&meeting_result=&jmf_code=&wpk=&from=&_x_zm_rtaid=SM8MAzDwRXCyJWZ-EqcdJA.1611196987756.b66617370b3a1defba3369b5711f0549&_x_zm_rhtaid=915:889
e @ all.min.js:2
t @ all.min.js:2
setTimeout (async)
(anonymous) @ all.min.js:2
c @ all.min.js:2
fireWith @ all.min.js:2
fire @ all.min.js:2
c @ all.min.js:2
fireWith @ all.min.js:2
ready @ all.min.js:2
B @ all.min.js:2
96257676995?tk=&track_id=&meeting_result=&jmf_code=&wpk=&from=&_x_zm_rtaid=SM8MAzDwRXCyJWZ-EqcdJA.1611196987756.b66617370b3a1defba3369b5711f0549&_x_zm_rhtaid=915:890 GET https://st2.zoom.us/static/94142/webclient/js/av-sdk/sharing_msimd.min.js 403
(anonymous) @ 96257676995?tk=&track_id=&meeting_result=&jmf_code=&wpk=&from=&_x_zm_rtaid=SM8MAzDwRXCyJWZ-EqcdJA.1611196987756.b66617370b3a1defba3369b5711f0549&_x_zm_rhtaid=915:890
e @ all.min.js:2
t @ all.min.js:2
setTimeout (async)
(anonymous) @ all.min.js:2
c @ all.min.js:2
fireWith @ all.min.js:2
fire @ all.min.js:2
c @ all.min.js:2
fireWith @ all.min.js:2
ready @ all.min.js:2
B @ all.min.js:2
recaptcha__es.js:292 Uncaught DOMException: Failed to construct ‘Worker’: Script at ‘https://www.google.com/recaptcha/api2/webworker.js?hl=es&v=_KUxfxvAoJ4k7SaKyLbja4Mi’ cannot be accessed from origin ‘null’.
at eN. (https://www.gstatic.com/recaptcha/releases/_KUxfxvAoJ4k7SaKyLbja4Mi/recaptcha__es.js:292:214)
at new eN (https://www.gstatic.com/recaptcha/releases/_KUxfxvAoJ4k7SaKyLbja4Mi/recaptcha__es.js:488:267)
at Ol. (https://www.gstatic.com/recaptcha/releases/_KUxfxvAoJ4k7SaKyLbja4Mi/recaptcha__es.js:132:371)
at new Ol (https://www.gstatic.com/recaptcha/releases/_KUxfxvAoJ4k7SaKyLbja4Mi/recaptcha__es.js:429:160)
at Object.init (https://www.gstatic.com/recaptcha/releases/_KUxfxvAoJ4k7SaKyLbja4Mi/recaptcha__es.js:598:422)
at https://www.google.com/recaptcha/api2/anchor?ar=1&k=6LfmSyQUAAAAAFLRDxYjF4navVNB9o2sbSXOCsNy&co=aHR0cHM6Ly96b29tLnVzOjQ0Mw…&hl=es&v=_KUxfxvAoJ4k7SaKyLbja4Mi&size=normal&cb=k1dk7i5c4pid:182:29
(anonymous) @ VM6 recaptcha__es.js:292
eN @ VM6 recaptcha__es.js:488
(anonymous) @ VM6 recaptcha__es.js:132
Ol @ VM6 recaptcha__es.js:429
(anonymous) @ VM6 recaptcha__es.js:598
(anonymous) @ www.google.com/recap…cb=k1dk7i5c4pid:182
96257676995?tk=&track_id=&meeting_result=&jmf_code=&wpk=&from=&_x_zm_rtaid=SM8MAzDwRXCyJWZ-EqcdJA.1611196987756.b66617370b3a1defba3369b5711f0549&_x_zm_rhtaid=915:1 Uncaught (in promise) Timeout
setTimeout (async)
(anonymous) @ recaptcha__es.js:54
(anonymous) @ recaptcha__es.js:15
(anonymous) @ recaptcha__es.js:14
(anonymous) @ recaptcha__es.js:51
(anonymous) @ recaptcha__es.js:51
Promise.catch (async)
(anonymous) @ recaptcha__es.js:51
(anonymous) @ recaptcha__es.js:148
(anonymous) @ recaptcha__es.js:111
os @ recaptcha__es.js:401
(anonymous) @ recaptcha__es.js:158
(anonymous) @ recaptcha__es.js:111
(anonymous) @ recaptcha__es.js:111
(anonymous) @ recaptcha__es.js:258
(anonymous) @ recaptcha__es.js:78
(anonymous) @ recaptcha__es.js:191
(anonymous) @ recaptcha__es.js:78
(anonymous) @ recaptcha__es.js:675
(anonymous) @ recaptcha__es.js:688
www.google.com/recaptcha/api/fallback?k=6LfmSyQUAAAAAFLRDxYjF4navVNB9o2sbSXOCsNy&hl=es&v=_KUxfxvAoJ4k7SaKyLbja4Mi&t=40014:1 Failed to load resource: the server responded with a status of 400 ()

hope it helps.

2

Hey @avglive.developer ,

If you note in the iFrame code, it is not using the Web SDK, rather embedding the Web Client URL, which is not supported.

You can try embedding the Web SDK itself in an iFrame, but it could have some issues since it was not designed to work within iFrames.

The supported way to embed the Web SDK is on a full web page, which you can adjust the CSS to your liking. Here is the React Web SDK Sample App:

Thanks,
Tommy

3

@tommy thanks fot your quick response. Is there a way to got multiple simultaneous meetings running at the same time? I know that can host up to 2 meetings at the same time.
But maybe it could be a known scenario with some workaround that you can provide.

Thanks!

4

Hey @avglive.developer,

I responded to this question in the other forum post that we have. Please let me know if you have any questions in that post.

Thanks,
Max

5

Hi @MaxM. Many thanks for you help, i have a question, i’m trying embedding the iframe inside my component via iframe, i think im pretty close to get this working, but im getting a 403 on some sources

image
image1366×530 64.6 KB

Is there a way to fix it?
Im using the following snippet.

<iframe
        width="100%"
        height="100%"
        title="Meeting"
        allow="microphone; camera; fullscreen"
        src="https://zoom.us/wc/94624359028/join?prefer=1&un=YXZnbGl2ZS5kZXZlbG9wZXJAZ21haWwuY29t&pwd=bTlvampSMU1teGFMdFZzYkw5NWJGUT09"
      />

Thanks!

6

Hey @avglive.developer ,

We do not support embedding the Zoom Web Client in an iFrame.

Please use the Web SDK instead. :slight_smile:

Thanks,
Tommy

7

Thanks sir!
Regards.

1 Like
8

You are welcome @avglive.developer ! :slight_smile:

Let us know if you have any questions while implementing the Web SDK! :slight_smile:

Thanks,
Tommy

9

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