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 will be released by September 30th.  It will start at $9.95/mo.  It will allow you to visually configure options without needing to learn to use parameters.  You will also be able to use new, premium-only features like panorama events and custom image filters.

How do I Use MPEmbed?

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

There are 4 other ways to use MPEmbed:

Hidden Mattertags

Free

Matterport Shortcode

Free WordPress Plugin

MPEmbed Premium

Starting at $9.95/mo

WP3D Models

$199/yr

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)
https://mpembed.com/show/?m=JGPnGQ6hosj&details=3&mdir=1&mdirsearch=1&stats=4&hdir=2


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.

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

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

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

image
&image=https://mpembed.com/img/mp_sdk.pngDisplay a larger image at the beginning of the details panel.
(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
&hdir=1&reels=kKpiGmQKHF6,pGAM6U7AGB8,AHLcxHouYtpJoin 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

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
&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 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.
https://mpembed.com/show/?m=JGPnGQ6hosj&ga=UA-115897772-1

It’s easy to setup a Google Analytics account.

Visit https://analytics.google.com and use https://mpembed.com 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.  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’s Favorite (Brightness 115%, 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.
3Feature has been removed.  Was display mini map / start opened.
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

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.

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

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.

Example:

  • https://yourdomain.com/path/minimapfile-000.jpg
  • https://yourdomain.com/path/minimapfile-001.jpg
  • https://yourdomain.com/path/minimapfile-002.jpg
minimapurl
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:

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,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 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