Currently, Wonder can be iFramed.

But like Uncle Ben said "with great power, comes great responsibility" and the following conditions must be considered:

  • Wonder does not endorse any site currently iFraming a Wonder Space

  • While Wonder ❤️s our iFrame users, we reserve the right to end the use of iFraming of Wonder at any time. We will update you if this should be the case.

  • We do not currently provide consultation on iFraming issues.

  • If you are an Event Management Platform and seeking collaboration or partnerships for iFrame support and beyond, please see here.

What is an iFrame?

IFrame tags within HTML are commonly used to embed external objects like webpages, widget, or in our case, a Wonder space into a website of your choosing.*

🤚🤚*IFraming of a Wonder room is not currently supported in the Safari browser. This is due to how Safari handles cookies.🤚🤚

How to embed your Wonder Space via iFrame:

Step 1: Decide where the Wonder Space should be embedded

The iFrame will be embedded on a specific page where the event organizer and the event guests can access it.

If you're an event management platform, we recommend adding a page where the Wonder Space will be available to guests of the event. This page should easily be accessed by event guests, e.g. through a button in the menu sidebar that's called "Networking" or "Networking with Wonder" or something similar.

Step 2: Add the iFrame code snippet to the web page

Each web page has a source code. To embed a Wonder Space, an extra code snippet will be added to that source code. Put the code snippet on the top of the <body> </body> tag

The snippet looks like this:

<iframe src="insert Space link here" width="100%" height="2000px" frameborder="0" marginheight="0" marginwidth="0" allow="camera;microphone;display-capture">

And here is an example of how it would look like:

<iframe src="https://app.wonder.me/?spaceId=686f1f74-59a1-41d0-9832-a74eb4888462" width="100%" height="2000px" frameborder="0" marginheight="0" marginwidth="0" allow="camera;microphone;display-capture">

*Please scroll left and right in the box to copy and paste the entire code.*

Here's additional info on the items in the code snippet:

  • Src: Link of the event you want on your web page.

  • Title: This will appear on the top of the embedded event page

  • Width & Height: Those properties determine the size of the iframe Wonder will be shown in. You can use percentage units e.g. width="100%" or pixels i.e. width="800".

    • Preferred attributes would be: width="100%" and height="1000".

    • Sensible minimum dimensions: width="800", height="600".

  • Allow: it’s mandatory to use allow="camera;microphone;display-capture" in your iFrame in order for Wonder to have access to the user’s media devices and allow screensharing.

  • Scrolling: set ‘no’ if you don’t want the embedded page to be full, without scroll frame border: Border around the embedding.

  • Where to put this code exactly? Whichever page you think will be best suited for Wonder embedding, go to that page in the source code. Put the code snippet within the <body> </body> tag.

    The complete Wonder event would be embedded, and after registering the participants can access the platform(Reception/Social lounge/Sessions/Booths).

💥Make sure the website developer hasn't blocked/disabled the camera & mic permission on your parent website (The main website where the Wonder event is being embedded).💥

👉Your final page could look something like the image shown below:

Did this answer your question?