This way your Matterport Space will appear in the middle of your webpage, just like a YouTube video. For example:
1) Set your Space to Public. Learn more.
2) Identify the webpage to which you want to add the Matterport Space.
3) Add the following code to the HTML source code for that webpage. Exact instructions depend on your website (see the following sections).
<iframe width="853" height="480" src="https://my.matterport.com/show/?m=xxxxxxxxxxx" frameborder="0" allowfullscreen allow="vr"></iframe>
4) Replace the URL in the src attribute. 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:
- Login to your CMS backend
- Find the post/page/article to edit
- Find an icon that looks like </> to access the source code.
The following example is for Zendesk Help Center.
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 share link to your model into the post in Visual tab and Wordpress will turn it into an embed. For example:
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:
Start by editing the page you want the embed in. Click Add > More > Embed a Site.
A grey box will appear. Drag the grey box to reposition the embed on the page.
Click the Enter Website Address button. Paste the URL to your Matterport Space. You should see 3D Showcase appear in the box.
Medium Blog Post
In the Medium backend, first, find the post or draft that you want to embed the Matterport Space in.
- Click + to add a new section.
- Click <> to specify that you want to add an embed.
- Paste the URL to your Matterport Space.
In the Placester CMS backend, first, open the page you want to embed the Matterport Space in.
- Open the <> HTML icon
- Paste the <iframe> embed code.
- 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 the HTML source code.