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=JGPnGQ6hosjAfter:
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=1 | Show the Details tab with standard Matterport Content + Address with Google Maps Link |
| &hdir=2 | Show the Highlights Reel tab (alternate way to display highlights) |
| &mdir=3 | Show the Mattertags Directory tab |
| &mdirsearch=1 | Show 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 | |
| 1 | Do 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-XXXXXXX | Integrate 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 | |
| favorite | Chris Hickman’s Favorite (Brightness 125%, Saturation 115%) |
| lightenless | Brightness 125% |
| lighten | Brightness 150% |
| lightenmore | Brightness 175% |
| darken | Brightness 90% |
| darkenmore | Brightness 75% |
| saturate | Saturation 125% |
| oversaturate | Saturation 150% |
| desaturate | Saturation 50% |
| invert | Invert Colors |
| blackandwhite | Gray Scale |
| sepia | Sepia |
| hueshift90 | Rotatoes the Hue by 90 Degrees |
| hueshift180 | Rotatoes the Hue by 180 Degrees |
| hueshift270 | Rotates the Hue by 270 Degrees |
| reduceyellow | Increase Blue Channel to 120%, reducing yellowness |
| https://mpembed.com/show/?m=JGPnGQ6hosj&minimap=1&minimapfilter=reduceyellow | |
| minimap | |
| 1 | Display mini map, start minimized. |
| 2 | Display mini map, start closed. |
| 3 | Display 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 | |
| favorite | Chris Hickman’s Favorite (Brightness 125%, Saturation 115%) |
| lightenless | Brightness 125% |
| lighten | Brightness 150% |
| lightenmore | Brightness 175% |
| darken | Brightness 90% |
| darkenmore | Brightness 75% |
| saturate | Saturation 125% |
| oversaturate | Saturation 150% |
| desaturate | Saturation 50% |
| invert | Invert Colors |
| blackandwhite | Gray Scale |
| sepia | Sepia |
| hueshift90 | Rotatoes the Hue by 90 Degrees |
| hueshift180 | Rotatoes the Hue by 180 Degrees |
| hueshift270 | Rotates the Hue by 270 Degrees |
| reduceyellow | Increase Blue Channel to 120%, reducing yellowness |
| https://mpembed.com/show/?m=JGPnGQ6hosj&minimap=1&minimapfilter=reduceyellow | |
| &fadehotspots= | |
| 1 | Hide 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 | |
| 2 | Display 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 Name | Add your company’s name to the bottom right of Showcase with a © symbol. |
| https://mpembed.com/show/?m=JGPnGQ6hosj©right=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 | |
| RRGGBB | Tint 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
| c | |
| cn | Use Chinese CDN |
| https://mpembed.com/show/?m=JGPnGQ6hosj&c=cn | |
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 | |
| 90 | Rotate Mini Map 90 degrees |
| 180 | Rotate Mini Map 180 degrees |
| 270 | Rotate 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.