Embed a Matterport 3D Model

 

While you can always share a link to a Matterport 3D model and even customize the link, another option is to directly embed the model onto your website.

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

Instructions 

  1. Set your model to Public. 
  2. Identify the webpage where you want to add your model. 
  3. Add the following HTML source code to the webpage. 
    • <iframe width="853" height="480" src="https://my.matterport.com/show/?m=xxxxxxxxxxx" frameborder="0" allowfullscreen allow="vr"></iframe>
    • Exact instructions depend on your website's unique code. 
  4. Replace the URL in the src attribute. 
  5. Include "allowfullscreen" to your iframe code when embedding. 

Using a Third Party CMS (Wordpress, Drupal, Wix, Zendesk, Medium) 

If you're using a third party content management system to manage your website, you'll need to open the HTML source code for that page, then follow the instructions below. 

  1. Log into your CMS backend. 
  2. Find the post/page/article you want to edit. 
  3. Switch your CMS view to look at the source code. 
    • This is almost always by clicking the </> button in your CMS - see below.zendesk-open-source-code.png
    • You will need some basic HTML knowledge in order to navigate the code and determine exactly where to paste the <iframe>.
    • Certain CMSs (like Zendesk, which we use) may require that you select "Allow unsafe HTML"s in order for the iframe to properly run. 

Wordpress CMS 

Wordpress.com does not allow iframes, meaning you can't imbed a Matterport 3D model into a Wordpress post. Websites that use the Wordpress CMS, however, do allow iframes, meaning you can paste the iframe code directly into any given page. You can use the following WP plug-ins to do this: 

  1. Embed.ly plugin 
  2. Embed.ly's Matterport support plugin 
  3. iframe plugin
  4. WP3D Models

Wix 

Follow the instructions below to imbed a Matterport model into your Wix page

  1. Open the Wix page where want to embed the code. 
  2. Click "Add" > "More" > Embed a Site. 
  3. Drag the gray box that appears to reposition the embed on the page. 
  4. Click "Enter Website Address". 
  5. Paste the URL in the field - you will see the 3D showcase appear in the box.Wix_Example.png

Medium Blog Post 

Follow the instructions below to imbed a Matterport model into your Medium blog post. 

  1. Open the Medium page where you want to embed the code. 
  2. Click the "+" button to add a new section. 
  3. Click <> to specify that you want to imbed a code. 
  4. Paste your 3D model's URL.MediumEmbed123.png

Placester 

Follow the instructions below to imbed a Matterport model into Placester

  1. Open the Placester page where you want to imbed the code. 
  2. Click the HTML icon "<>".open-html-code-on-placester.png
  3. Paste the iframe embed code. 
  4. Click the HTML icon "<>" to return to the visual editor. 
    • You should now see your iframe embedded directly. 
  5. Save your changes to make the imbed live on the site. 

Learn more about this process at Placester's support page.

Direct Access to the HTML Source Code 

If your CMS doesn't allow you to make changes, you'll need to contact your site's webmaster and ask for access - if you do have access to edit your site's HTML, add the <iframe> code directly to the HTML source code. 

Have more questions? Submit a request