Back to the Shapespark home page

Room with Zoom: Embeding a Zoom meeting - a short guide

Zoom has a web client that can be embedded in websites as an iframe. In this guide we’ll show you how to embed a Zoom meeting in an HTML label opened after clicking on a marker (anchor) inside the scene.

  1. Open your Zoom account settings in a web browser, navigate to Settings > Meetings tab and:
    a. Allow anybody to join your meeting using the web client: image
    b. Disable the waiting room: image Alternatively, you can leave the waiting room enabled here and disable it only for the meeting to be embedded, using the regular Zoom client after having joined the meeting.

  2. Create a Zoom meeting using the regular Zoom client (desktop/mobile).

  3. Open the Shapespark editor for the scene you’d like to embed the meeting in.

  4. Add an HTML label for the meeting:

    using the following content:

     <iframe src="https://zoom.us/wc/YOUR-MEETING-ID/join?prefer=0&pwd=YOUR-MEETING-PASSWORD"
            style="border: 0; width: 60vw; height:60vh;"
            allow="microphone; camera; fullscreen"
            sandbox="allow-forms allow-scripts allow-same-origin">
     </iframe>

and replacing YOUR-MEETING-ID and YOUR-MEETING-PASSWORD with the meeting ID and password. Don’t use dashes in the meeting ID - digits only. Optionally, you can adjust the width and height of the iframe to match your requirements.

  1. Save the scene and upload it.

The Zoom web client works only in Chrome, so you have to open the uploaded scene using Chrome. The embed requires that the scene is opened with the secure HTTPS protocol, so it will not work if the scene is opened in the Shapespark desktop application.

This guide is based on a discusion on Zoom developer’s forum: https://devforum.zoom.us/t/embed-zoom-video-to-a-web-server/2882

3 Likes

Hi @wojtek, in this scene I use this technic but nothings happens when I try to go to meeting in android? This is normal or I’m doing something wrong? In Chrome on my pc everything is fine!

https://tinyurl.com/Stand001

I think the Zoom web client works only in Chrome on desktop.

1 Like

I want to use them to trigger a iFrame window, como hago eso? similar to zoom window like here

@jorgearq, do you mean you can’t find these icons while configuring an HTML label with an iframe inside? Or do you need help with embedding an iframe inside a HTML label?

I need help with embedding an iframe inside a HTML label.
I remind you that I do not want to leave the scene, I want a pop-up window to open that allows me to interact with Skype, WhatsApp zomm or some other social media!

By the way, the procedure indicated for Zoom works well from shapespark but when I upload it sometimes it works and sometimes it doesn’t! I don’t know if it’s a Zoom or shapespark problem !?
Examples to test

https://tinyurl.com/Stand001

https://tinyurl.com/oficinaejemplo (in this one I use a trigger to play and pause a video in a TV, works very well!),

What kind of interaction you’d like to achieve? Would you like a link inside the pop-up that starts a call in the Skype or Zoom desktop client (the Shapespark scene would not be closed).

Do you use the same computer and browser (Chrome?) all the time? If I recall correctly Zoom’s web client is experimental, so perhaps there are some cases that it doesn’t handle. That said, when I tested the client, it worked reliably for me on Chrome/Windows.

I like a link inside the pop-up that starts a call in the Skype or Zoom desktop client

Yes I use Chrome in Windows, but most of the time the iframe is Grey square box! If I touch the trigger directly from shapespark software looks like this :arrow_down: but when I go in Chrome nothing happens!

A link to start a Skype call, provided that Skype desktop is installed, can be added with:

<a href="skype:<USERNAME>?call">Skype</a>

More information: https://ourcodeworld.com/articles/read/480/how-to-create-a-html-link-that-interacts-with-skype-call-chat-view-profile-add-to-contacts

Similarly, a link to start a Zoom call, provided that Zoom desktop client is installed, can be added with:

<a href="https://zoom.us/j/<MEETING-ID>">Zoom</a>

Could you double-check if:

  1. Your meeting ID and password are correct.
  2. You have configured your Zoom account as shown in the first post.
  3. The meeting is active. If the meeting hasn’t been started yet (by the host), Zoom web client will not work.
1 Like

A post was split to a new topic: Embedding Facebook Messanger

@wojtek could the zoom chat be mapped to a plane? (Like a video can be embeded like a material to play on the geometry of a TV model in the scene)

We have been thinking about setting up a learning environment, which students can explore and thought either a whiteboard model or a display in a stand might be quite a neat way of having the zoom meeting window fixed in the scene.

Just a thought for now, but would be interested to try if possible.

@njay, unforutnately not. The Zoom client, embeddable as an HTML <iframe>, can be placed only inside an HTML label.

I am having the same problem as jorgearq.

I used to be able to embed a zoom iframe as per above instructions.
Now, the zoom doesnt appear.
The zoom iframe appears in Shapespark Editor.
But once uploaded to website and clicking on the zoom icon,
it pops up the iframe window WITHOUT any zoom website in the grey box.

its just empty

See these 2 screen grabs

It only seems to work IF on another browser tab, i log into my zoom account firs via website.
Only then will the zoom iframe show fully in the uploaded shapespark.


The issue is caused by some recent changes in Zoom. Unfortunately, according to Zoom staff using the Zoom web client inside an iframe is “no longer a reliable solution”:

Embedding the Zoom web client is still possible, though without a password, so that the visitor will have to enter the it manually. Please try changing the iframe code to:

     <iframe src="https://zoom.us/wc/join/YOUR-MEETING-ID"
            style="border: 0; width: 60vw; height:60vh;"
            allow="microphone; camera; fullscreen"
            sandbox="allow-forms allow-scripts allow-same-origin">
     </iframe>