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=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 |
| &stats=4 | Show 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=0 | Hide Mattertags in your 3D Space and show the contents in the Mattertag Panel when clicked. |
| &mdir=1&mt=1 | Show 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. |
| 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.png | Display 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,AHLcxHouYtp | 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 | |
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=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 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-XXXXXXX | Integrate Google Analytics using an id that was provided by Google. |
| &aa=ACCOUNTNUMBER | Integrate 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 | |
| favorite | Chris’s Favorite (Brightness 115%, 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 | Feature 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 | |
| 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
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 | |
| 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 | |
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.