Best Practices for Displaying 3D Showcase

Matterport 3D Showcase is an online web player through which you and your audience can explore the 3D models you have scanned. 3D Showcase is a 3D walkthrough  an innovative and immersive media format through which you can attract, engage, and convert users.

Because a 3D walkthrough is a relatively new format compared to pictures and videos, you may be unclear on how to integrate it into your existing marketing. That’s why we’ve compiled this list of best practices on how to implement 3D Showcase so it can have the maximum effect on your users and your marketing.

As the market leader for 3D walkthroughs, we here at Matterport have learned these lessons after years of experimenting, analyzing, and consulting with the thousands of big and small companies we work with every day.

The goal of these best practices is to:

  1. Reduce your bounce rate
  2. Increase exposure (more impressions and visitors)
  3. Increase user engagement (more time in your models and more scans explored)

Ultimately, these will lead to happier, more informed users and a better business for you.


Basic Implementation 

  1. Learn the basics of embedding a 3D Showcase into your website
  2. Use URL parameters to fine-tune behavior of your models inside 3D Showcase. 
  3. Open your model in Workshop to edit and create specific features. 

The rest of the guide will focus on design tips you can use to implement your model and maximize user engagement - keep in mind, if you have a large enough set of visitors, you can A/B test any of the following guidelines until you find your specific winning formula. 

Clear and Direct Call-to-Action to Enter 3D 

Goal: Reduce bounce rate 

Users who are explicitly told what they're going to experience are more likely to explore your 3D model. By contrast, people who don't know what a 3D walkthrough is will "bounce" - this means they will enter, become confused, and leave immediately. 

You can reduce this bounce rate by signaling a 3D tour to the user, instead of immediately dropping them into it (which can be jarring and/or confusing). Follow the tips below. 

  1. Separate Showcase from your photo carousel. 
    • Make sure the way users choose to enter 3D showcase is distinctively different from the rest of your space. 
  2. Write short, concise copy that instructs users to enter Showcase. 
  3. Use a clear, visual icon that indicates 3D photos. 

Calls-to-Action: Example


User interface icons: Examples


Gratify Users Immediately 

Goal: Reduce bounce rate, increase user engagement 

Users who do understand the concept of a 3D model will want to explore immediately - as such, if your model takes too long to load, the user will get impatient and click away. 

To stop this from happening, we suggest using the quick start URL parameter (&qs=1) - quick start loads the model faster so that users can start exploring almost immediately. 

The drawback? There's no fly-in from the dollhouse to the start position at the beginning of the tour, meaning users will not be explicitly introduced to the concept of Dollhouse view - learn more about the difference here, or reference the Matterport models below.

Quick start disabled (default behavior): 

Quick start enabled (no fly-in):

Deliberately Design the User Experience to Explicitly Show How 3D Helps Users  

Goal: Increase user engagement, align with business goals and OKRs

A 3D model shouldn't appear to be gimmicky or tacked-on - take some time to consider the best time and place for your model that makes the most sense for the specific users considering your business. Remember, 3D models are tools designed to help user achieve their goals, which, in the case of Matterport, is a mutually tied to meeting your goals.

Design tips

  1. Make the entrance to your 3D model persistent. 
  2. Create a visual icon that signifies 3D Showcase's purpose. 
  3. Use commanding (but friendly) copy that tells users why they should enter 3D space, and what to expect. 
    • Remember, 3D models are typically used after the user gets an initial impression of the property after viewing 2D photos. 

Persistent iconography: Example 


Concise, short copy: Example 


"Explore the 3D model" is another short, concise description. 

Make it Easy to Discover Immersive Content 

Goal: Increase number of views, differentiate your business 

By making it easier for users to discover your scans, you can increase total view numbers across all of your 3D models. In this day and age, using true 3D content positions you as an innovative and forward-looking business person, which adds value to your business by differentiating from competitors.  

Discoverable content: Example 



Encourage User Interactivity 

Matterport 3D models are primarily designed as a read-only medium - they are not interactive in ways that a chat room or forum are. That being said, there are a few steps you can take to encourage interactivity - see below. 

  1. Include your contact details (metadata)
    • You can append your name, address, phone number, and website in each of your models - this encourages users to interact with your models more by giving them additional information to click on. 
    • This also helps with sharing - because some users may end up sharing your model on social media, users who see it there will also see the URL to your website.metadata-chicago-condo.png
  2. Creatively place Mattertags at key points 
    • Add links in your Mattertag posts with specific calls to action - this will direct users to models on other pages, like the listing webpage. 
    • You can also use Mattertags to link out to other landing pages, like a "Sign up for an open house" page. 

Remember, if you are worried about complying with MLS rules on links and branding, then we highly suggest adding the &mls=1 URL parameter to the end of the URL - this will remove the offending data and keep your model compliant.

Share 3D models on your business' social media feeds 

You can send them to the listing page or embed the 3D model itself - remember to fill out all of your model details so users can find a way back to your website.

Sharing 3D models on social media: Example 


3D Enablement: Technical Implementation Documents 

  1. Instructions on Embedding 3D Showcase on a Webpage
  2. Details on Built-in Representations in 3D Showcase
  3. Embed a Space Directly in a Mobile App
Have more questions? Submit a request