What is an iFrame?

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

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.

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 Wonder Space you want on your web page.

  • Title: This will appear on the top of the embedded 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 Space would be embedded, and after registering the users 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. 💥

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

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

  • 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.

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

Did this answer your question?