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.
Estimated reading time:
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:
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.
Want to know how I got started and became a Webflow designer? Then, listen up! You'll find a brief rundown of how I got to where I am now, as I haven't only switched continents but also moved from print to web/digital design...
Are you based in Perth, Australia? Great - I've just established the city's first Webflow Meetup Group. Check out this post for all the details and for some more info on how to start a meetup group in your own hometown.