MP Embed Dev Blog
Feature Requests, Changelog and Tentative Roadmap
Polish UI Translation Available – We’re a little bit ahead of Matterport in offering this, but now &lang=pl will provide polish labels for all MPEmbed Elements. (Courtesy: Marcin Baran)
Tint now works with Hidden Mattertags – You can customize the tint of MPEmbed’s UI elements with &tint=RRGGBB (i.e. &tint=FF0000 would be a very ugly red!). All MPEmbed features can be implemented using Mattertags (see the docs) – but tint was not working! Fixed! (Courtesy: Inge Van Hoof)
The Matterport SDK has a handly feature called ‘navigateToTag’. In theory, this will move you directly to a Mattertag, however, it fails if there is no clear path between where you are standing and where the tag is.
I suspect that internally, this function is what happens when you CLICK on a Mattertag, therefore, when used via the SDK, it can only be expected to work if the tag would be clickable.
It is for this reason that MPEmbed does a few clever things to make it work. When you click on a Mattertag Directory link, it will attempt to ‘navigateToTag’.
When MPEmbed determines that the desired outcome did NOT happen, it will then swap to dollhouse mode, because in dollhouse mode, all tags are accessible via a click.
A user wrote to me saying that it was not working and that MPEmbed became unstable when clicking on links. I tried out their space and confirmed that this was true (and panicked!)
What I realized was that they had disabled the dollhouse feature. For this reason, I have added ‘floorplan’ mode as a fallback for resolving Mattertag links. In the case that both dollhouse and floorplan have been disabled, you’re currently out of luck and the Mattertag directory will gracefully not work. No more
We’re in an https:// world and mixing https:// and http:// creates an error message in your browser. We’re pointing users in the right direction by showing an error when a space loads if their hosted images are using an http:// url. Standards, standards!
Multi-Floor Custom Mini Maps
Did you know that you can replace the minimap with your own? Simply use &minimapurl=https://somedomain.com/path/filename.png.
If you would like to use multiple floors, label each file with 000.png (first floor), 001.png (second floor), 002.png (third floor).
Be sure that your custom mini map lines up with the generated one. This can be tricky and you can read the docs to learn about &minimapoffset to fine tune if your map isn’t a 1:1 match.
The Return of Tooltips
At some point the tool tips that appeared when different elements were hovered stopped appearing. I did not notice.
One of our user’s suggested that we add tool tips. Now we have tooltips again.
Space Title now fades upon start
Before it faded after the dollhouse transition… which was kind of weird, right?
Highlight Reel Fixed
It stopped working. Now it works again! I love when people contact me and let me know 🙂
Labels on Mini Map Fixed
They were appearing under panoramas. That’s not useful. I fixed that.
As Matterport Showcase requires a secure URL (https://), it is important that your custom logo or infobox image is also served via https. While this is documented, a few of our users missed this and I am now filtering out non https URLs and showing a “friendly” error message.
Darker Background for Infobox Mattertags
Many users love the using &mdir=1&mt=0 to hide Mattertags in their space, but provide access to them in the infobox. I’ve increased the weight of the background to add a bit more contrast and also enlarged the ‘Close’ button. It was a little small before, wasn’t it?
The &reels= parameter — which allows you to combine highlight reels from multiple models into the highlight directory box — is an incredibly useful tool. I have a client whose website only accommodates one embedded tour per location page. Using the &reels parameter, I am able to link several tours together for a smooth experience.
I was a little bit baffled last night when I attempted to use a hidden mattertag to set this up. It just wouldn’t work! Ouch! I located the problem — so simple! If anyone else out there encountered this issue, I’d love to apologize for any hair loss it may have caused from scratching your head too much!
Google Analytics integration now logs clicking on Mattertags! This feature previously didn’t work. I’m not sure if the SDK wasn’t behaving properly, but I had written the code and disabled it due to it not working. I restored it and was pleasantly surprised that it was now working. You should be pleasantly surprised too!
WP3D Models Support Coming Soon!
MPEmbed support for WP3D Models is now in a limited beta. I am super excited as all free features of MPEmbed are supported and easily configured in an amazing way. Ross Peterson has made Google Analytics integration seamless as well as tying in many other features. I cannot wait for this to be released!
There were some issues with cached data not being refreshed. This is now resolved! &reels= is now working properly again too!
Some users may have noticed that Matterport Spaces that use MPEmbed do not look as crisp as tours that do not. Some of those users may have also noticed that when you resize your browser window, that suddenly your tour will get sharper.
This is due to a bug in Showcase v3.0 that happens whenever a space is embedded in an iframe. It loads 512k tiles and only 512k tiles. By resizing the iframe, it will force Showcase to check what the best tile size is to serve. I’ve added in code that automatically trips the ‘onresize’ function by ‘wiggling’ the iframe a little bit when each space loads. You can’t tell that it’s doing this — all you’ll notice is that your tour is looking a lot better 🙂
Matterport released Showcase v3.0.3 which contains several undocumented changes to how the SDK works along with some pretty exciting features.
Both the Mattertag Directory and the Minimap Hotspots were affected by changes to the SDK namespaces and these issues have been resolved with feedback to the team at Matterport.
WP Matterport Shortcode + MPEmbed
With WP Matterport Shortcode, you can embed Matterport Spaces in WordPress with a click-to-start thumbnail that opens your space above the site in a distraction-free mode. It speeds up your site’s load time and allows you to rapidly build a responsive gallery with columns. What’s even better is that you can use the plugin to apply MPEmbed settings to all of the tours in the gallery at once!
Oh, and here’s a preview of a feature that you will be seeing in premium:
Ever wanted two spaces for the price of one? 🙂 For apartments and homebuilders, it’s common to flip the orientation of a floorplan — so why not flip the orientation of a Matterport Space? There’s still some work to do on fixing the UI elements 🙂
New ‘saturate’ Filter:
Oh, and I added &filter=saturate — 125% saturation. &filter=oversaturate is 150% saturation and that’s sometimes a bit too much.
The system default scrollbars in the Mattertag Directory and Highlights Directory have been replaced with some pretty sexy scrollbars that autohide – cleaning up the UI a bit more!
In addition, the fading UI has always been a little bit buggy. I optimized and recoded it! Half the code, twice the stability!
You can now choose the order that about panels appear by using an alternate method for enabling panels.
This change has been made possible due to a new, unified method for creating parameters that now checks to make sure that values provided are valid. This new system powers both parameters and hidden mattertags and is a foundation for the upcoming ‘configurator’ inside of MP Embed Premium.
The ‘old’ info= parameter is and will always be supported, but is now undocumented as it is a legacy feature.
I’m excited to announce that we’ve been accepted as an embed provider by Embed.ly. Embed.ly is a service that provides standardization for embedding content within web apps — and is used by Matterport’s Multimedia Mattertags.
What this means is that you can now embed a space that uses mpembed.com INSIDE of a Matterport tour! How cool is that?
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/
|RRGGBB||Tint the UI with a color of your choice!|
I also fixed a bug with the fullscreen button.
MPEmbed overlays a hidden fullscreen button on top of the default Matterport one. This is necessary because otherwise, the default fullscreen button would take the tour fullscreen and leave behind all overlay features. Not cool!
One problem has been that if you are using the highlight reel, the fullscreen button can move. So – simple solution! I’ve added a second hidden fullscreen button. Yes, it’s always there 🙁 If the SDK has a feature wherein I can tell if the highlight reel is or is not open, I can do this properly. For now – problem solved!
The infobox was too big.
I have nipped and tucked as well as replaced much of the visible content with icons that will display information when a user rolls the mouse over. The only thing I find odd is that the Contact Name seems to be sort of hanging there without any context… which in the default Matterport Infobox, it has context as it is an equal citizen with everything else. As I’ve turned all other information into icons, this little bit of left over text looks a bit odd. I’m thinking about what to do here.
Join the highlight reels from multiple tours into one highlight directory!
Be sure to enable the highlight directory (&info=hdir)
Update 5/24 – If you use a tour that does NOT have a highlight reel, the tour’s thumbnail image will be used instead and a single highlight reel entry will be created for the tour. (Requested by: Gerald Smith)
Thank you, Benoit Penicaut.
You can zoom into the minimap with the mouse wheel and drag the floorplan around as well as resize the map box with the lower left handle.
You can now adjust the position of the panos for use on custom maps that are not proportional to the generated map. &minimapoffset=w,h,x,y (width, height, x offset, y offset). All values are in %. This feature is definitely for the PROs out there as correctly moving your pano map and aligning it will take some tweaking. If you are familiar with using your browser’s debug tools, you can fine tune by playing with the CSS and seeing the live preview as you do this. Premium will have a GUI for this!
Minimap now features a draggable resize handler on the bottom left!
Also – The details panel image is now responsive on mobile screens.
You can now swap the generated map with your own
Hotspots too large?
1/2 Size Hotspots – &hotspots=2
MPEmbed on Facebook
Things I Cannot Do Right Now
Mattertags cannot be opened via SDK. This feature will be available VERY soon as well as the ability to instantly transition to where Mattertags are located instead of ‘flying’ to the point. I’m waiting on the Showcase v3.0.6 / SDK v3.0.6 release to enable this.
I cannot change the URL that is shown when clicking the ‘share’ icon or hitting ‘u’ to get a deep link.
I cannot do anything to fix issues caused by the VR Modal Box, Terms of Service or Help Modal Boxes.