360 Tours on your Webflow Website in under 5 minutes.

Screenshot of a 360 tour builder showing how to add a 360 tour to a Webflow website.


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:

  1. Prepare 360°  degree images (photos or 3D renderings).
  2. Create the tour.
  3. Bulk upload the images to Koala360.
  4. Connect hotspots.
  5. Customise!
  6. Publish the tour and copy the iFrame code.
  7. Embed the iFrame and style it's parent wrapper.

Alright, let's dive in.

Step 1: Prepare 360° Images

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.

Step 2: Create the tour

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.

Step 3: Bulk upload your 360° images

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.

Step 4: Connect images with hotspots

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.

Step 5: Customise!

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!

Step 6: Publish and Share Your Tour

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.

Step 7: Embed your 360° Tour on Your Webflow Website

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.

And the tour is now live! (and under this text👇)

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:

  1. Find a balance between file size (quality) and tour speed that you're happy with.
  2. Use the parent container (embed element) to control the width and height of the tour. Make sure you set the width and height to 100% in the embed code.
  3. Any updates you make in the Koala360 tour editor will be pushed wherever it is embedded!

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.

Need a Simple 360 Tour?

Koala 360 is now the best option for uploading and sharing 360 images.

You can make your first tour completely free with NO watermarks.
Try it