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.

MPEmbed is Free.

You can use many of the most popular features for free!  You will need to learn how to use it by reading the documentation on this page.

MPEmbed Premium 

Visually configure options without needing to learn to use parameters.  Set color filters on individual panoramas, customize which panoramas display on the mini map, lock your space from being used with MPEmbed with different settings — and of course, so much more.

How do I Use MPEmbed?

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

1. Take any normal Matterport link:

2. Change to


3. Add parameters to add new features:

There are 4 other ways to use MPEmbed:

Hidden Mattertags


Matterport Shortcode

Free WordPress Plugin

MPEmbed Premium

Starting at $9.95/mo

WP3D Models


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

The Enhanced About Box replaces the standard Matterport About Panel and adds tabbed boxes containing additional features.  Set the sort order by specifying 1, 2, 3, or 4 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
&stats=4Show the Space Stats tab (# of Scans, # of 3D Scans, # of 360 Views, # of Mattertags, # of Labels)

Transitions when clicking on Tags in the Mattertag Directory:

The Showcase SDK may fail to ‘fly-to’ the location of a Mattertag.  When this happens, MPEmbed detects that the user did not change locations and will fly out to the dollhouse view and then attempt to ‘fly-to’ the Mattertag a second time.

We’ve created an alternate transition effect using some SDK quirks that you may prefer!

&mdir=1&mtrans=2Fly-To with Instant 3D Transition on Fail

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.


Display a logo on the left side of your Matterport Spaces’s title.
(32 x 32 PNG / JPG / SVG)

&image= a larger image at the beginning of the details panel.
(Max Width: 330px)

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.

&hdir=1&reels=kKpiGmQKHF6,pGAM6U7AGB8,AHLcxHouYtpJoin multiple highlight reels from a comma separated list of spaces.,pGAM6U7AGB8,AHLcxHouYtp,PuyiJAwAvg2&qs=1&play=1

Matterport Showcase automatically fades out the about panel and navigation icons when a viewer is moving in a space.

MPEmbed replicates this behavior with the Enhanced About Panel, custom copyright message and additional icons.

You may want to turn this off if you find it annoying. 🙂

&nofade=1Do not automatically fade overlay elements when moving.

With MPEmbed, you can finally track engagement inside of your Matterport Space using 3rd party analytics tools! We started with Google Analytics and are experimenting with Adobe Analytics. We hope to support any additional platforms that may be of use to users.

&ga=UA-XXXXXXXIntegrate Google Analytics using an id that was provided by Google.
&aa=ACCOUNTNUMBERIntegrate Adobe Analytics using an id that was provided by Adobe.

It’s easy to setup a Google Analytics account.

Visit and use as the website url that you wish to track data from.

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

Events Logged:

  • Event: Tour Loaded
  • Event: Enter Pano – Pano # / Pano ID
  • Event: Floor Change – Floor # / Floor Name
  • Button: Enter Fullscreen
  • Button: Exit Fullscreen
  • Button: Show Infobox
  • Button: Enter Mirror Mode (Premium)
  • Button: Exit Mirror Mode (Premium)
  • Button: Infobox – More
  • Button: Infobox – Less
  • Button: Infobox – Hide
  • Button: Infobox – Show
  • Mode Change: dollhouse, outside, inside, floorplan
  • Minimap: Clicked Pano # / Pano ID
  • Minimap: Minimize
  • Minimize: Show
  • Minimap: Minimize
  • Minimap: Hide
  • Guided Tour: Started
  • Guided Tour: Stopped
  • Guided Tour: Ended
  • Guided Tour: Step #
  • Effect: Confetti / Pano # / Pano ID (Premium)
  • Mattertag Directory: Click / Label / Tag ID
  • Mattertag Directory: Mobile / Label / Tag ID

Use filter presets to adjust / enhance the display of the entire tour — or the Minimap.  Premium users are able to use or create custom filters and apply them on individual panos.

&filter= — or &minimapfilter=
favoriteChris’s Favorite (Brightness 115%, Saturation 115%)
lightenlessBrightness 120%
lightenBrightness 140%
lightenmoreBrightness 160%
darkenBrightness 90%, Contrast 110%
darkenmoreBrightness 75%, Contrast 125%
saturateSaturation 125%
oversaturateSaturation 150%
desaturateSaturation 75% / Brightness 115%
desaturatemoreSaturation 50% / Brightness 115%
invertInvert Colors
blackandwhiteGray Scale
hueshift90Rotates the Hue by 90 Degrees
hueshift180Rotates the Hue by 180 Degrees
hueshift270Rotates the Hue by 270 Degrees
reduceyellowBrightness 80%, Blue +20%
1Display mini map, start minimized.
2Display mini map, start closed.
3Feature has been removed.  Was display mini map / start opened.

minimaptags (Added 10/20/18)
1Display Mattertags on the Minimap
minimapnopano (Added 10/28/18)
1Hide Minimap while viewing 360 Views
1Hide inactive Hotspots until mini map is hovered over.  Inactive hotspots display at 50% size. (Desktop Only)

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

2Display hotspots at 50% size.

The Matterport Showcase UI icons look TINY on massive touchscreen displays.  We’ve created a workaround.

scaleui (Added 10/20/18)
1Display alternate UI for large touchscreen displays (200% size)

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.

Your Company NameAdd your company’s name to the bottom right of Showcase with a © symbol.

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:

RRGGBBTint the UI with a color of your choice!,mdir,hdir,mdirsearch&tint=330033&minimap=1


Experimental Features

These are features that could use a little bit more work, but you are welcome to try.

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.

90Rotate Mini Map 90 degrees
180Rotate Mini Map 180 degrees
270Rotate Mini Map 270 degrees

You can replace the mini map with your own custom image.  By default, your custom map file should be 100% proportional to the minimap that is displayed while navigating your tour.

If your space has multiple floors and you would like to use multiple maps, you can label your files ending with a three digit numbering sequence 000, 001, 002, etc.  MPEmbed will automatically swap the map file as you swap floors.


https://…Replace the mini map with a custom mini map.

If your custom minimaps are proportional, but have a border, you can fine tune how the hotspots overlay by width and offset:

Width %,Height %,X offset %,Y offset %Align hotspots with custom map,81,9,16

In the above example, the portion of the custom minimap that the Matterport Space fits into was 75.5% x 81% of the image size — and then in order to place it correctly, it needed to be offset 9% from the left and 16% from the top.

It’s a bit tricky, but you can visually find these values using Chrome’s Developer Tools.

After setting up some rough values with &minimapoffset, 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. 

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

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.  The highlight reel kinda gets in the way

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 – the service that Matterport uses for providing safe embedding of multimedia content within Mattertags.  This means that in a Mattertag, you can place an link and have an enhanced 3D space inside of a normal, or enhanced 3D space.  Inception!

oEmbed Support for Content Management Systems

Insert your 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