Embed Multiple Spaces on One Page

Embedding two or more Matterport Spaces on a single webpage (and setting them to autoplay with &play=1) can cause your webpage to load slowly. At worse, it can cause your browser to be unresponsive or crash.

If you want to build something like matterport.com/gallery to display multiple Matterport Spaces on one page, you have several options:

  • Lightbox
  • 3rd party plugin for your CMS
  • Develop your own

 

Lightbox

A lightbox is a box that opens on top of a webpage. Embedded in the lightbox is the Matterport Space.

  • To open the Matterport Space, the user clicks play.
  • To return to the page, the user clicks X or clicks outside the lightbox.

For an example, open matterport.com/aec and then ENTER SPACE > 

matterport-com-aec.png

The exact way to implement a lightbox depends on how your website or CMS (content management system) is setup.

We suggest using fancybox.js or a similar Javascript library. This will require some basic knowledge of HTML, CSS, and Javascript to implement. Learn how to use Fancybox.

 

3rd Party Plugins

If you use Wordpress, one option is WP3D Models. This is a third-party plugin built specifically for Matterport Spaces.

 

Develop your Own Gallery

If you have enough web design experience or creativity, you can also design your own gallery.

Remember, you can use the thumbnail image for the Matterport Space. Look for it in Matterport Cloud.

thumbnail-image-link.png

Have more questions? Submit a request