Laura Niebel Headshot | Laura Niebel Web Design

Matterport: What it is and how you can integrate it into your next Webflow project

Let me introduce you to Matterport, a tool/service that can be quite useful for websites in a variety of industries. Matterport lets you create interactive walkthroughs for physical spaces. Or, to say it in Matterport's own words: "Simply pair a compatible camera with a Matterport subscription plan and you’re one click away from publishing your 3D space. Matterport’s powerful platform makes it easy to create, customize, publish, and maintain a highly accurate digital twin of any space, such as a room, floor, or building". This could be real estate properties, restaurants, hotels, stores, museums or any other space that would benefit from a virtual visit on its premises. If you want to see this in action, check out a walkthrough of Milan's Nike Store. You can also add so called "Mattertags" inside a virtual walkthrough that give you specific information about a particular object (for instance a particular feature in a property). You can learn more about Matterport here: www.matterport.com

So since I have just utilized a Matterport walkthrough on realtor Webflow site I am working on, I thought I'd give you a brief rundown of how I implemented Matterport in Webflow - via the CMS. If you've read my recent blog post about integrating background images via the CMS (you can read it here if you haven't done so already), then you'll discover the process for Matterport isn't that different. Nevertheless, I'm providing a step-by-step guide below:

  • I assume you've opened and paid for your Matterport account, taken your images, and your walkthrough is now available on the Matterport platform. You will require your unique Matterport walkthrough ID, which is different for each of your walkthroughs. Now insert a "plain text" field in your CMS collection (you could call it "Matterport ID), go to your individual CMS item and insert your Matterport ID in the appropriate "plain text" field.
  • Now go to your CMS collection page template, insert a CMS collection element and connect it to your CMS collection
  • Select your CMS collection list on the page, change the layout in the element settings to "full width".
  • In order to only show the video for your current collection item, you will need to go to filters in the element settings and click the little plus. In the drop down menu choose the name of your CMS collection (not one of your collection fields) and select "Collection Name" is current "Collection Name. This might sound a bit confusing, but check out the screenshot below to see how this is done.

Select the appropriate CMS collection that contains the Matterport ID

  • In the collection item insert the (HTML) embed element

Place the HTML embed element in your collection item

  • Open the code editor and paste the following code snippet:

    <iframe width='853' height='480' src='https://my.matterport.com/show/?m={{wf {&quot;path&quot;:&quot;matterport-id&quot;,&quot;type&quot;:&quot;PlainText&quot;} }}' frameborder='0' allowfullscreen allow='vr'></iframe>
Use Webflow's code editor to insert the appropriate code snippet and connect it to the Matterport plain text field in your CMS collection

  • Now delete anything between show/?m= and ' frameborder (shown in bold). You can now press the "insert CMS field" button and link to the "Matterport ID" CMS field. You can obviously change the size of the walkthrough on the page by amending the width and height values.
  • That's it! The Matterport walkthrough should now appear on your Webflow site.

Let me know if this has helped you and if integrating Matterport into your next client project might be something that could be valuable for you and your clients.

This might also interest you...

Tuesday, December 31, 2019

Matterport: What it is and how you can integrate it into your next Webflow project

Ever heard of Matterport? The service allows you to place virtual walkthroughs on your client's website. This could be especially useful for real estate agents and tourism businesses. Let me show you how to easily integrate this feature into your next Webflow project.

Read more...
Thursday, December 26, 2019

How to source a background video from the Webflow CMS

Would you like to use a dynamic background video on your site? Maybe even use it on your CMS collection page? I show you how this is done in just 8-9 steps! Let's get started...

Read more...
Tuesday, December 24, 2019

How to create a cool slide in out hover interaction with Webflow

Want to do a fun hover animation with slide in text for your next project? I've made a short video to show you how it's done and there's also a link to the cloneable example project.

Read more...

Join the newsletter for Webflow & Web Design updates.

Thanks for subscribing! Your first newsletter will arrive in your inbox soon.
Oops! Something went wrong! Try again or get in touch via the form below, so I can add you manually!

Have questions or want to talk about a project idea?

Just send an email to laura.s.niebel@gmail.com or fill out the form below. I'm looking forward to hear from you!

Thanks! I'll get back to you as soon as possible!
Oops! Something went wrong while submitting the form. Please try again or contact me via email.