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.

‍

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

‍

‍

• 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>
  ‍

‍

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