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.
How do I Use MPEmbed (Free)?
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
MPEmbed has a Premium Version.
Visually configure options without needing to learn to use parameters. Set color filters on individual panoramas, customize which panoramas display on the mini map, sort Mattertags, provide horizontally flipped versions of your spaces — and of course, so much more.
Five ways to use MPEmbed:
URL Parameters
Free
Hidden Mattertags
Free
Matterport Shortcode
Free WordPress Plugin
WP3D Models
Premium WordPress Plugin
MPEmbed Premium
Starting at $9.95/mo
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! 🙂
Advanced About Panel
The Advanced About Panel adds tabs with new features. Enable different panels with values of 1 to 4 to define their order:
| &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 |
| &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&hdir=2&mdirsearch=1 | |
Mattertags Panel Options
Add a search box to the Mattertags Directory Tab:
| &mdirsearch=1 | Show the Mattertags Filter box in the Mattertag Directory tab |
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. |
Custom Logo by Title
Display a logo on the left side of your Matterport Spaces’s title.
Image Size: 32 x 32, format: PNG / JPG / SVG
&logo=https://mpembed.com/favicon.png
https://mpembed.com/show/?m=JGPnGQ6hosj&logo=https://mpembed.com/wp-content/uploads/2018/03/Logo.png
Featured Image in Details Panel
Display a larger image at the beginning of the details panel.
Max Width: 330px, format: GIF / SVG / PNG / JPG
&image=https://mpembed.com/img/mp_sdk.png
https://mpembed.com/show/?m=JGPnGQ6hosj&image=https://mpembed.com/img/mp_sdk.png
Minimap
Display an interactive minimap with labels, mattertags and current position.
| &minimap=1 | Display mini map, start minimized. |
| &minimap=2 | Display mini map, start closed. |
https://mpembed.com/show/?m=JGPnGQ6hosj&minimap=1
Minimap Customizations
| &minimaptags=1 | Display Mattertags on the Minimap |
| &minimaprotation=1 | Display rotation buttons for minimap |
| &minimapsetrotation=90 | Rotate minimap by degrees (1 – 359) |
| &minimapnopano=1 | Hide Panoramas from Minimap (Only show Labels / Mattertags) |
| &fadehotspots=1 | Hide inactive Hotspots until mini map is hovered over. Inactive hotspots display at 50% size. (Desktop Only) |
| &hotspots=2 | 1/2 Size Hotspots |
Color Filters
Adjust the colors on the entire tour and/or the minimap.
| &filter and &minimapfilter | |
| favorite | Brightness 115%, Saturation 115% |
| lightenless | Brightness 120% |
| lighten | Brightness 140% |
| lightenmore | Brightness 160% |
| darken | Brightness 90%, Contrast 110% |
| darkenmore | Brightness 75%, Contrast 125% |
| saturate | Saturation 125% |
| oversaturate | Saturation 150% |
| desaturate | Saturation 75% / Brightness 115% |
| desaturatemore | Saturation 50% / Brightness 115% |
| invert | Invert Colors |
| blackandwhite | Gray Scale |
| sepia | Sepia |
| hueshift90 | Rotates the Hue by 90 Degrees |
| hueshift180 | Rotates the Hue by 180 Degrees |
| hueshift270 | Rotates the Hue by 270 Degrees |
| reduceyellow | Brightness 80%, Blue +20% |
Image shows color settings in MPEmbed Premium to boost saturation and adjust white balance and tint by a margin.
This feature can come in handy to fix incorrectly darkened or brightened tours as well as to boost saturation as many come out a little bit dull.
Premium does not have a divided 2/up display mode. Image is to show before/after only.
Background Music
Plays background music or an audio welcome and adds a music on/off icon.
This feature will not work as expected with &play=1 due to browser security that prevents auto play of content. If you do combine both, music will begin when any UI element is clicked — but not when the user begins navigating the space. In other words, don’t use &play=1.
https://mpembed.com/show/?m=JGPnGQ6hosj&bgmusic=https://
| &bgmusic=https://… | Filename of audio file (mp3, wav, or OGG) |
| &bgmusicloop=1 | Loop background audio |
| &bgmusicvol=0.5 | Set volume from 0.1 (10%) to 1 (100%) |
User Interface Options
Customize more!
https://mpembed.com/show/?m=JGPnGQ6hosj&nofade=1
| &fadeui=1 | Fade User Interface during movement. |
| &scaleui=1 | Increase user interface size to 150% for touch screens |
| &tint=RRGGBB | Change the color of the user interface (Learn more) |
Add Spaces to the Highlight Panel
If you would like to ‘bridge’ multiple tours together, MPEmbed’s highlight panel can do this for you. Simply list the space IDs with a | (pipe) separating them.
&spaces=kKpiGmQKHF6|pGAM6U7AGB8|AHLcxHouYtp
https://mpembed.com/show/?m=kKpiGmQKHF6&hdir=1&spaces=kKpiGmQKHF6|pGAM6U7AGB8|AHLcxHouYtp|PuyiJAwAvg2
If you would like to show all of the highlights from these tours as well, add &spacereels=1.
Google Analytics
Track every move and interaction within your space with Google Analytics.
&ga=UA-XXXXXXXX-X
https://mpembed.com/show/?m=JGPnGQ6hosj&ga=UA-115897772-1
Visit https://analytics.google.com and use https://mpembed.com as the website url that you wish to track data from.
&aa=ACCOUNTNUMBER
Photographer Copyright
Custom brand your work with your photography copyright. Like Street View. Use %20 for a space (because spaces aren’t allowed in parameters).
©right=Company%20Name
https://mpembed.com/show/?m=JGPnGQ6hosj©right=Snorlax%20&%20Co%20Virtual%20Tours
Use Chinese CDN
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 & Facts
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.
Showcase v3.0 Only
Since the SDK is a part of Showcase 3, MPEmbed does not support Showcase 2. You can still have Showcase 2 setup for your normal my.matterport.com links — we automatically force Showcase 3. Showcase 2 is a bit smoother and handles imperfections within Matterport Spaces a little bit nicer, so many people prefer it.
W3C Compliant
MPEmbed has been run through W3C tests to ensure that all code is 100% compliant. Not even Showcase is compliant!
Daily Backups
This site and all premium configurations are backed up nightly at 4am! Data is retained for 3 weeks. We’re safeguarded against catastrophic failure.
Payments via Stripe.com
Stripe.com is used for processing payments securely. Your credit card information is never received or stored by mpembed.com. Stripe is the bomb. It really is. It’s amazing and is so easy to manage subscriptions with, issue refunds (when necessary) and resolve issues.