How to Use MPEmbed

Documentation with Examples.

What is MPEmbed?

MPEmbed is an overlay for Matterport Showcase.

Matterport Spaces are 3D Tours that you can navigate in your web browser.  When you interact with a Matterport Space, you are using a web-based application called ‘Matterport Showcase’.

MPEmbed adds new features to Matterport Showcase.

It does this by adding a layer where new features can be added including an enhanced About Box and a Minimap.  It also has the ability to add photo filters to the embedded space to increase saturation, adjust brightness and even correct whitebalance.

How do I Use MPEmbed (Free)?

The original, free and most common way to use MPEmbed is:

1. Take any normal Matterport link:
Ex: https://my.matterport.com/show/?m=JGPnGQ6hosj

2. Change my.matterport.com to mpembed.com:

Ex: https://mpembed.com/show/?m=JGPnGQ6hosj

3. Add parameters to add new features:

https://mpembed.com/show/?m=JGPnGQ6hosj&minimap=1

MPEmbed has a Premium Version. 

Visually configure options without needing to learn to use parameters.  Set color filters on individual panoramas, customize which panoramas display on the mini map, sort Mattertags, provide horizontally flipped versions of your spaces — and of course, so much more.

Five ways to use MPEmbed:

URL Parameters

Free

Hidden Mattertags

Free

Matterport Shortcode

Free WordPress Plugin

WP3D Models

Premium WordPress Plugin

MPEmbed Premium

Starting at $9.95/mo

Enable Features with URL Parameters

If you are familiar with Matterport Showcase, you may have already learned how to use Matterport’s URL Parameters.

MPEmbed works the same way.  Not only can you use all of Matterport’s standard parameters – you now have access to additional parameters that add MPEmbed’s overlay features.  Try any space with MPEmbed and add &minimap=1 to it! 🙂

Advanced About Panel

The Advanced About Panel adds tabs with new features.  Enable different panels with values of 1 to 4 to define their order:

&details=1Show the Details tab with standard Matterport Content + Address with Google Maps Link
&hdir=2Show the Highlights Reel tab (alternate way to display highlights)
&mdir=3Show the Mattertags Directory tab
  
&stats=4Show the Space Stats tab (# of Scans, # of 3D Scans, # of 360 Views, # of Mattertags, # of Labels)
https://mpembed.com/show/?m=JGPnGQ6hosj&details=3&mdir=1&hdir=2&mdirsearch=1

Mattertags Panel Options

Add a search box to the Mattertags Directory Tab:

&mdirsearch=1Show the Mattertags Filter box in the Mattertag Directory tab

Show Mattertag Content in the Infobox

&mdir=1&mt=0Hide Mattertags in your 3D Space and show the contents in the Mattertag Panel when clicked.
&mdir=1&mt=1Show Mattertags and their contents in both the 3D Space and the Mattertag Panel.

Custom Logo by Title

Display a logo on the left side of your Matterport Spaces’s title. 
Image Size: 32 x 32, format:  PNG / JPG / SVG

&logo=https://mpembed.com/favicon.png

https://mpembed.com/show/?m=JGPnGQ6hosj&logo=https://mpembed.com/wp-content/uploads/2018/03/Logo.png

Featured Image in Details Panel

Display a larger image at the beginning of the details panel.
Max Width: 330px, format: GIF / SVG / PNG / JPG

&image=https://mpembed.com/img/mp_sdk.png

https://mpembed.com/show/?m=JGPnGQ6hosj&image=https://mpembed.com/img/mp_sdk.png

Minimap

Display an interactive minimap with labels, mattertags and current position.

&minimap=1Display mini map, start minimized.
&minimap=2Display mini map, start closed.

https://mpembed.com/show/?m=JGPnGQ6hosj&minimap=1

Minimap Customizations

&minimaptags=1Display Mattertags on the Minimap
&minimaprotation=1Display rotation buttons for minimap
&minimapsetrotation=90Rotate minimap by degrees (1 – 359)
&minimapnopano=1Hide Panoramas from Minimap (Only show Labels / Mattertags)
&fadehotspots=1Hide inactive Hotspots until mini map is hovered over.  Inactive hotspots display at 50% size. (Desktop Only)
&hotspots=21/2 Size Hotspots

Color Filters

Adjust the colors on the entire tour and/or the minimap.

&filter and &minimapfilter
favorite Brightness 115%, Saturation 115%
lightenless Brightness 120%
lighten Brightness 140%
lightenmore Brightness 160%
darken Brightness 90%, Contrast 110%
darkenmore Brightness 75%, Contrast 125%
saturate Saturation 125%
oversaturate Saturation 150%
desaturate Saturation 75% / Brightness 115%
desaturatemore Saturation 50% / Brightness 115%
invert Invert Colors
blackandwhite Gray Scale
sepia Sepia
hueshift90 Rotates the Hue by 90 Degrees
hueshift180 Rotates the Hue by 180 Degrees
hueshift270 Rotates the Hue by 270 Degrees
reduceyellow Brightness 80%, Blue +20%

Image shows color settings in MPEmbed Premium to boost saturation and adjust white balance and tint by a margin.

This feature can come in handy to fix incorrectly darkened or brightened tours as well as to boost saturation as many come out a little bit dull.

Premium does not have a divided 2/up display mode.  Image is to show before/after only.

Background Music

Plays background music or an audio welcome and adds a music on/off icon.

This feature will not work as expected with &play=1 due to browser security that prevents auto play of content.  If you do combine both, music will begin when any UI element is clicked — but not when the user begins navigating the space.  In other words, don’t use &play=1.

https://mpembed.com/show/?m=JGPnGQ6hosj&bgmusic=https://

&bgmusic=https://…Filename of audio file (mp3, wav, or OGG)
&bgmusicloop=1Loop background audio
&bgmusicvol=0.5Set volume from 0.1 (10%) to 1 (100%)

User Interface Options

Customize more!

https://mpembed.com/show/?m=JGPnGQ6hosj&nofade=1

&fadeui=1Fade User Interface during movement.
&scaleui=1Increase user interface size to 150% for touch screens
&tint=RRGGBBChange the color of the user interface (Learn more)

Add Spaces to the Highlight Panel

If you would like to ‘bridge’ multiple tours together, MPEmbed’s highlight panel can  do this for you.  Simply list the space IDs with a | (pipe) separating them.

&spaces=kKpiGmQKHF6|pGAM6U7AGB8|AHLcxHouYtp

https://mpembed.com/show/?m=kKpiGmQKHF6&hdir=1&spaces=kKpiGmQKHF6|pGAM6U7AGB8|AHLcxHouYtp|PuyiJAwAvg2

If you would like to show all of the highlights from these tours as well, add &spacereels=1. 

Google Analytics

Track every move and interaction within your space with Google Analytics. 

&ga=UA-XXXXXXXX-X

https://mpembed.com/show/?m=JGPnGQ6hosj&ga=UA-115897772-1

Visit https://analytics.google.com and use https://mpembed.com as the website url that you wish to track data from.

We also have Adobe Analytics support (and need some user feedback / testers!)

&aa=ACCOUNTNUMBER

Photographer Copyright

Custom brand your work with your photography copyright.  Like Street View.  Use %20 for a space (because spaces aren’t allowed in parameters).

&copyright=Company%20Name

https://mpembed.com/show/?m=JGPnGQ6hosj&copyright=Snorlax%20&%20Co%20Virtual%20Tours

Use Chinese CDN

Optimized server speeds for users in China.

&c=cn

https://mpembed.com/show/?m=JGPnGQ6hosj&c=cn

Set Parameters With Hidden Mattertags

If you would like to use MPEmbed without creating a CRAZY long link, you can use hidden Mattertags to configure your tour.

One of the amazing advantages of using hidden Mattertags is that you can update a tour that is already embedded on your website or a client’s site.  

Simply create a Mattertag, type the parameter name as the title. (minimap), then use the details field to enter the desired value.  If you’re configuring the image or logo parameters, use the ‘media’ field instead.

Note – Premium users can configure tours via our member area, which is extremely fast and easy!

Please view these tutorial videos to see how it works!

Tips & Tricks & Facts

Try My Favorite Photo Filter

Most photo filters create cheesy effects, but if you’d like to boost your brightness and saturation just a bit, try &filter=favorite

Embed on Social Media

MPEmbed links will embed on Facebook, Twitter or any site that supports OpenGraph.

Embed MPEmbed in a Matterport Space!

MPEmbed is supported by Embed.ly – the service that Matterport uses for providing safe embedding of multimedia content within Mattertags.  This means that in a Mattertag, you can place an mpembed.com link and have an enhanced 3D space inside of a normal, or enhanced 3D space.  Inception!

oEmbed Support for Content Management Systems

Insert your mpembed.com link to automatically insert your tour in your site if it supports oEmbed.  

WordPress only supports whitelisted oEmbed providers, of which neither Matterport or MPEmbed are.  I made a plugin that fixes that and allows embedding Matterport and MPEmbed urls simply by pasting them to a blank line in WordPress.  Download it here

Showcase v3.0 Only

Since the SDK is a part of Showcase 3, MPEmbed does not support Showcase 2.  You can still have Showcase 2 setup for your normal my.matterport.com links — we automatically force Showcase 3.  Showcase 2 is a bit smoother and handles imperfections within Matterport Spaces a little bit nicer, so many people prefer it.

W3C Compliant

MPEmbed has been run through W3C tests to ensure that all code is 100% compliant.  Not even Showcase is compliant!

Daily Backups

This site and all premium configurations are backed up nightly at 4am!  Data is retained for 3 weeks.  We’re safeguarded against catastrophic failure.

Payments via Stripe.com

Stripe.com is used for processing payments securely.  Your credit card information is never received or stored by mpembed.com.  Stripe is the bomb.  It really is.  It’s amazing and is so easy to manage subscriptions with, issue refunds (when necessary) and resolve issues.