Create interactive online shopping experiences
Keeping customers engaged and excited is what every business owner wants and the longer your end users stay on your website, the better.
What you can see below is something that I have put together by repurposing existing technology. Matterport is a 3D scanning company that has a booming business in the retail and real estate markets. What they offer is a Google Street Viewesque experience in a space of your choosing.
The best thing about this is that it is completely free to use for your first “space”. This means you can give it a go and see if it is of value before diving into your wallet.
1. Sign up to Matterport
Let’s start with creating an account with Matterport so that we have access to the relevant content. Click here to get signed up to Matterport
Note: You may receive a confirmation email asking to confirm your account so keep an eye out for that and check your junk box
2. Download the app for your mobile device
You need a supported mobile device to capture the space you have in mind and you need the Matterport app in order to do all the clever stuff and upload it to the cloud.
Click on the corresponding link to download the app
3. Create and markup your scan
I created a video for the remaining steps as I prefer to follow along to tutorials rather than read... Some might say that's a little odd as I write a blog but then again, I am a little odd.
Note: I also like speedy videos so if its too quick feel free to pause or reduce the playback speed with the cog icon.
4. Publish and Share
In the clip above you see I chose the "unlisted" option when it came to sharing the content. This means that only people with the direct link can access the experience or if I have embedded it into a webpage as I have on this post.
I have documented how to embed the experience below. I use Wix to manage this site but I can imagine the process is almost identical for other platforms too. If you've built your site from scratch then I doubt you even need the guide.
5. Embed Content into your site
1. Head to the "Spaces" page while logged into your Matterport account
2. Select the desired scanned location
3. Cleck the "Share" Button in the top right of the screen
4. In the "Share and Invite" pop up window, ensure you have granted Unlisted/Password Protected access rights
5. Select the "Copy Embed" text in the top right of the dialog box (The will copy the necassary HTML code to your clipboard)
6. On your Wix Webpage/Blog Page select "Add" and find the option "HTML Code"
Note: This may also be listed as an "Embed" or "Embed HTML" option on other platformms.
7. Paste the copied code from Matterport into the dialog box that appears.
Note: In the code that there are both a width and height value (shown as width='853' & height='480' in my case) You can change these values to alter the size of window that the experiance sits within
Comments