360 tours a great way to increase engagement on your website, especially when it comes to real-estate listings, travel blogs or photographer or 3D visualisation agency services.
And with Webflow having taken the world by storm, many businesses are investing in new sites to spruce up their brand and online experience.
We love Webflow (you're reading this on a Webflow site) and want to share how to create, embed and style a tour in under 5 minutes - the only assumption is that you already have the images!
This post outlines the steps in writing, but if you'd prefer to watch the video we have that for you too!
Here's a quick overview of the steps:
Alright, let's dive in.
The first step is to prepare your 360 images - they can be photos from 360 cameras or drones or 3D renderings from Blender, Unity or other popular 3D software.
You'll be able to tell if the image is a 360 if it looks like this👇
Make sure the images have a 2:1 ratio and up to 25MB each. The lower the file size the faster your tour will load.
If you're completely new to the world of 360 images you can check out this guide for a complete overview of different setups. If you have an Android phone you can use the photosphere mode in the camera.
Now you need a place to upload your 360° images and create a tour. We'll be using Koala360. If you already have an account you can jump to the dashboard and if not, you can create an account for free. Once on the dashboard you can complete the "CREATE A TOUR" form to create the tour.
With the tour created and images prepared, simply drag and drop all your images into the tour builder. The images will be uploaded and you can edit the names of each image within the builder.
Create your tour walkthrough by linking each image together. Simply drag a thumbnail of the image you'd like to link to into the current 360 image. Bam, a hotspot is created! Now you can navigate through the images by clicking on the hotspots. Add as many hotspots as you need.
.avif)
Give your tour a bit of personality by clicking the ⚙️ button and enable the features you'd like. You can add auto-rotate, fullscreen mode, hide the thumbnails or use bunch more PRO features, with more being added each week. Adjust to your liking and then get ready to publish!
Once you have created your tour, it's time to publish it. Just press the "PUBLISH" button at the top right when in edit mode and voila, your tour is live and can be accessed directly via the link or the embed code.
Click the 🚀 button to bring up the embed code that contains an iFrame. Click on it to copy it and paste the code directly into an embed element on your Webflow website.
By default, the width and height are set in pixels, but we suggest setting the tour iFrame to width=100% and height=100% and styling the embed element to control the size of the tour.
By following these steps you will have successfully created and embedded your 360 tour on your Webflow website. Your users can now explore your your 360 experience across all their devices.
Some general tips:
As you can see, embedding a 360 tour on your Webflow website has never been easier. Koala360 is a powerful tool that can help you enhance your website and give your audience a memorable and immersive experience.
Here is a Webflow embed element with the Koala360 tour embed code.