Embed a Space with an <iframe>

Introduction

While you can always share a link to a Matterport Space and even customize the link, an even better option is to directly embed a Space on your website.

This way your Matterport Space will appear in the middle of your webpage, just like a YouTube video. For example:

 

Basic Instructions

1) Set your Space to Public. Learn more.

2) Identify the webpage you want to add the Matterport Space to.

3) Add the following code to the HTML source code for that webpage. Exact instructions depends on your website (see the following sections).

<iframe width="700" height="400" src="https://my.matterport.com/show/?m=xxxxxxxxxxx" allowfullscreen allow="vr"></iframe>

4) Replace with the URL to your Space. Instead of https://my.matterport.com/show/?m=xxxxxxxxxxx as shown above, use the URL to your own Matterport Space. You can add URL parameters here too.

Always add allowfullscreen to the iframe code when embedding. This is important for your audience who's visiting on mobile because they need to go full screen to enter VR mode. Learn more about how users enter VR.

 

Using a 3rd Party CMS

If you use a third party CMS (content management system) such as Wordpress, Drupal, Wix, Zendesk, Medium, etc to manage your website then you need to open the HTML source code for that page.

The general steps are:

  1. Login to your CMS backend
  2. Find the post/page/article to edit
  3. Find an icon that looks like </> to open the source code.

The following example is for Zendesk Help Center.

zendesk-open-source-code.png

You'll need some HTML knowledge to navigate through the code to find exactly where to paste the <iframe> code.

Some CMSs (such as Zendesk) require you to "allow unsafe HTML" for an iframe to run. Don't worry, a Matterport Space is not dangerous :)

 

Wordpress.com or Wordpress CMS

Wordpress.com does not allow iframes by default, so the easiest way to embed 3D Showcase is to put the my.matterport.com URL into the post in Visual tab and Wordpress will turn it into an embed. For example:

HTMLExample.png

Websites that use the Wordpress CMS do allow iframes, so you can paste the iframe code directly into the post. For more customization you can also try the following plug-ins:

 

Wix

Start by editing the page you want the embed in. Click Add > More > Embed a Site.

A grey box will appear. Move the grey box to where on the page you want the embed.

Click Enter Website Address over the grey box. Paste the URL to your Matterport Space. You should see 3D Showcase should appear in the box. 

Wix_Example.png

 

Medium Blog Post

In the Medium backend, first find the post or draft that you want to embed the Matterport Space in.

  1. Click + to add a new section. 
  2. Click <> to specify that you want to add an embed. 
  3. Paste the URL to your Matterport Space.

MediumEmbed123.png

  

Placester

In the Placester CMS backend, first open the page that you want to embed the Matterport Space in.

open-html-code-on-placester.png

  1. Open the <> HTML icon
  2. Paste the <iframe> embed code.
  3. Click the <> HTML icon again to return to the visual editor. 

You'll now see your iframe embedded in the editor view. Save your changes and the embed will be live.

Visit Placester support for more details.

 

Direct Access to the HTML Source Code

If you don't have a CMS where you can make changes, contact your site's webmaster and ask for help.

If you are the webmaster (or if you have direct access to edit the HTML) you can just add the <iframe> code directly to HTML source code.

Have more questions? Submit a request