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 the 3D Space or the Mattertag Panel.

Premium Feature Premium users can sort Mattertags and categorize them in lists.

Custom Billboard

Shows Mattertags media in a new way. Opens up the tag media in a large frame when clicked.

Add &custombillboard=1

Premium Feature Premium users can also enable URL links to open in the billboard or integrate an audio player in the tag.

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

Premium Feature Premium users can add their logo during the space load as well as in the details panel.

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

Premium Feature Premium users can add tooltips to panoramas with custom text, rotate the minimap, add rotate buttons and set the visibility of hotspots individually.

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%

Premium Feature Premium users can assign filters to panoramas individually and create their own filters using brightness, contrast, saturation, hue shift, invert, sepia, blur, whitebalance and tint sliders.

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://www.bensound.com/bensound-music/bensound-summer.mp3

&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)

Premium Feature Premium users can also add a compass and set north!

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.

We also have Adobe Analytics support (and need some user feedback / testers!)

&aa=ACCOUNTNUMBER

Premium Feature Premium users can activate an option for the user to accept Google Analytics tracking.

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).

&copyright=Company%20Name

https://mpembed.com/show/?m=JGPnGQ6hosj&copyright=Snorlax%20&%20Co%20Virtual%20Tours

Use Chinese CDN

Optimized server speeds for users in China.

&c=cn

https://mpembed.com/show/?m=JGPnGQ6hosj&c=cn

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.