Documentation

You don’t need to be a programmer, just read this page!

How it Works:

Replace my.matterport.com with mpembed.com in any Matterport link or embed code:

Before:
https://my.matterport.com/show/?m=JGPnGQ6hosj

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

All of the standard Matterport parameters work with MPEmbed!

Enable Features with URL Parameters

Adding MPEmbed features works by adding parameters to the end of your space link — just like normal Matterport options.

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

The advanced infobox replaces the standard Matterport infobox and adds tabbed boxes containing additional features.  Set the sort order by specifying 1, 2, or 3 as the values for each tab.

&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
&mdirsearch=1Show the Mattertags Filter box in the Mattertag Directory tab
https://mpembed.com/show/?m=JGPnGQ6hosj&details=3&mdir=1&mdirsearch=1&hdir=2

Combine with &mt=0 to hide Mattertags in your space and automatically activate showing Mattertag content in the ‘Tags’ tab.

logo
https://…Display a Company Logo on the left side of the title box. (32 x 32 PNG / JPG / SVG)
https://mpembed.com/show/?m=JGPnGQ6hosj&logo=https://mpembed.com/wp-content/uploads/2018/03/Logo.png

image
https://…Display a Company Logo on the left side of the title box. (Max Width: 330px)  (GIF / SVG / PNG / JPG)
https://mpembed.com/show/?m=JGPnGQ6hosj&image=https://mpembed.com/img/mp_sdk.png

If you’ve created multiple Matterport Spaces that you would like to present as one large space, you can link them together with Mattertags — or you can use MPEmbed’s combined highlight reel feature to merge highlight reels to allow seamless jumping between tours.

reels
SpaceID,SpaceID,SpaceID,…Join multiple highlight reels from a comma separated list of spaces.
https://mpembed.com/show/?m=kKpiGmQKHF6&info=hdir&reels=kKpiGmQKHF6,pGAM6U7AGB8,AHLcxHouYtp,PuyiJAwAvg2&qs=1&play=1

You will need to enable the highlight directory (&info=hdir) and if you are setting options using hidden Mattertags, you’ll need to setup the same options throughout all linked tours.

It also might be a good idea to enable quickstart (&qs=1) to skip the dollhouse and immediately display the tour.

Matterport Showcase automatically fades out its UI elements when a viewer is moving and fades the UI elements back when a viewer is stationary (or turning). This behavior is replicated with approximately the same timing with an attempt to keep things consistent. You may want to turn this off if it’s annoying.

nofade
1Do not automatically fade overlay elements when moving.
https://mpembed.com/show/?m=JGPnGQ6hosj&nofade=1

With MPEmbed, you can finally track engagement inside of your Matterport Space using Google Analytics!

ga
UA-XXXXXXXIntegrate Google Analytics using an id that was provided by Google.
https://mpembed.com/show/?m=JGPnGQ6hosj&ga=UA-115897772-1

Using the Live Events feature of Google Analytics, you can even see as people are navigating your spaces in real time!

Events Logged:

  • Showcase Events: Entering panos, changing modes (floorplan/dollhouse/inside/360 Views), highlight reel (start/stop/end/step), changing floors, clicking Mattertags
  • MP.Embed Events: Mini Map Hotspot Click, Highlight Dropdown select

The format of how events are logged may change during beta based on feedback. More documentation coming post-beta.

Use filter presets to adjust / enhance the display of the entire tour.  This will adjust all elements except the Advanced Infobox and the Mini Map – therefore changes also affect the help screen and terms of service.

This feature is scheduled to be superceded in Premium by allowing users to create custom filters.

filter
favoriteChris Hickman’s Favorite (Brightness 125%, Saturation 115%)
lightenlessBrightness 125%
lightenBrightness 150%
lightenmoreBrightness 175%
darkenBrightness 90%
darkenmoreBrightness 75%
saturateSaturation 125%
oversaturateSaturation 150%
desaturateSaturation 50%
invertInvert Colors
blackandwhiteGray Scale
sepiaSepia
hueshift90Rotatoes the Hue by 90 Degrees
hueshift180Rotatoes the Hue by 180 Degrees
hueshift270Rotates the Hue by 270 Degrees
reduceyellowIncrease Blue Channel to 120%, reducing yellowness
https://mpembed.com/show/?m=JGPnGQ6hosj&minimap=1&minimapfilter=reduceyellow
minimap
1Display mini map, start minimized.
2Display mini map, start closed.
3Display mini map, start maximized.
https://mpembed.com/show/?m=JGPnGQ6hosj&minimap=1

Use filter presets to adjust / enhance the display of the mini map. Filters are the same as the main tour filters.

This feature is scheduled to be superceded in Premium by allowing users to create custom filters.

minimapfilter
favoriteChris Hickman’s Favorite (Brightness 125%, Saturation 115%)
lightenlessBrightness 125%
lightenBrightness 150%
lightenmoreBrightness 175%
darkenBrightness 90%
darkenmoreBrightness 75%
saturateSaturation 125%
oversaturateSaturation 150%
desaturateSaturation 50%
invertInvert Colors
blackandwhiteGray Scale
sepiaSepia
hueshift90Rotatoes the Hue by 90 Degrees
hueshift180Rotatoes the Hue by 180 Degrees
hueshift270Rotates the Hue by 270 Degrees
reduceyellowIncrease Blue Channel to 120%, reducing yellowness
https://mpembed.com/show/?m=JGPnGQ6hosj&minimap=1&minimapfilter=reduceyellow
&fadehotspots=
1Hide inactive Hotspots until mini map is hovered over.  Inactive hotspots display at 50% size. (Desktop Only)
https://mpembed.com/show/?m=JGPnGQ6hosj&minimap=1&fadehotspots=1

Hotspots too big?  There’s an option to display small ones.

hotspots
2Display hotspots at 50% size.
https://mpembed.com/show/?m=JGPnGQ6hosj&minimap=1&hotspots=2

Add your copyright next to the Matterport Terms and Help links. This replicates the way that Google Street View displays a photographer’s copyright on his or her imagery.

copyright
Your Company NameAdd your company’s name to the bottom right of Showcase with a © symbol.
https://mpembed.com/show/?m=JGPnGQ6hosj&copyright=Your%20Company%20Name

Note: As links should not contain spaces or symbols, you’ll need to replace your spaces with %20 and perhaps URI Encode your company’s name.

If you would like to add a tint to the UI so that it is not black and white, you can use a HEX Code to recolor all elements!  Need some help?  Visit: https://htmlcolorcodes.com/

tint
RRGGBBTint the UI with a color of your choice!
https://mpembed.com/show/?m=JGPnGQ6hosj&info=details,mdir,hdir,mdirsearch&tint=330033&minimap=1

&tint=330033

Experimental Features

Sometimes the mini map orientation is not ideal.  This feature is not ideal either and is rather buggy.  I’ll work on it later, but feel free to try it out.  Mileage varies based on the size of the map.

minimaprotate
90Rotate Mini Map 90 degrees
180Rotate Mini Map 180 degrees
270Rotate Mini Map 270 degrees
https://mpembed.com/show/?m=JGPnGQ6hosj&minimap=1&minimaprotate=90
minimapurl
https://…Replace the mini map with a custom mini map.

This will work very well if your custom mini map was created and aligned to match the automatically generated mini map. If the map is different, you can tweak some offset values …

minimapoffset
Width %,Height %,X offset %,Y offset %Align hotspots with custom map
https://mpembed.com/show/?m=m1319eH3Ke9&minimap=1&minimapurl=https://mpembed.com/img/m1319eH3Ke9-000.jpg&hotspots=2&minimapoffset=75.5,81,15,9

Really confusing, right? There’s a way to figure out the mini map offset values using Chrome’s Developer Tools. Right click on the minimap and click inspect. Use the developer tools to find div id=”hotspots” and click this. In the right column you should be able to play around with the width, height, left and top % values. When you find the right values, you can use them in the parameters. Very confusing.

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 easy!

Tips & Tricks

Disabling the Highlights Reel

Consider disabling the highlight reel in Workshop if you’d like to use the Highlight Reel directory, but not the guided tour feature.

Integrated MatterTags

You can experience Mattertags in an entirely new way by hiding them all (&mt=0) and using the MatterTag Directory (&info=mdir).  Now Mattertags serve only as a navigational menu and when clicked, their content will appear in a panel in the infobox until the viewer clicks ‘back’. 

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