Kuula Blog Join now!
Posted by on 2017-04-21

5 easy steps to make the virtual tours shine on your website

Kuula Embed Editor

Did you know that Kuula has an easy-to-use Embed Editor? Now you can even create embeds with your own logo and you can adjust the way the embeds look. This post is a quick tutorial how to create embeds and add 360 photos to your website, to an online magazine article or to a blog.

Let's Get Started

After you post a 360 photo to Kuula, you need to go to your profile page and click on the image you want to embed. Once the 360 image is open, select the Share button and choose Embed from the pop-up window that will open. And here you go, Kuula Embed Editor is there for you! Now you can start making the embed look the way you want.

360 Embed editor

Here're the 5 easy steps how to make your virtual tours look the way you want:

Step 1. Adjusting the Size.

360 Embed editor

You can adjust the size of the embed either in pixels or percent. You can make the embed bigger proportionally, or just adjust one of the dimensions. The preview on the left doesn't reflect the final size of the embeded content so make sure to test it on the website where it will be embeded.

Step 2. Adding or Removing Some Options.

Options

In the Options you can adjust whether you want to have a full screen mode added to your embeded post and if you want to have zoom controls enabled. Simply put a tick mark if you want them to appear in your embeded post.

Step 3. Adjusting the Appearance.

Embed editor

In the Appearance you can modify the Margins, Transparency of UI elements and the Logo position.

Margins

Simply move the slider to see how the margins are getting smaller or bigger and adjust them the way you want.

Transparency

Based on your preference you can balance the transparency of the UI elements. By moving the slider you can make them look more transparent or have them fully white.

Logo position

There are three positions where you can have the logo placed. You can have it in the top left corner of the embed, bottom left or bottom right corner. Play with the options to achieve the desired result.

Step 4. Create embeds with your own logo.

Branded embed

If you are a PRO Account user you can also add a custom logo. Simply upload it from your computer and adjust its size by moving the slider. You can also hide credits and instructions by ticking off the box "hide credits and instructions".

It's worth to remember that you can only use one custom logo per account. If you change the logo to a different one, all your existing embeds that use this option will be updated.

Step 5. A final step once you are happy with the settings.

Embed code

After you achieve the desired settings, select the code that is under the 360 image and copy/paste it into your HTML code.

Examples

If you would like to see how Kuula posts look when embeded on other websites, have a look at these examples:

Kuula embed on a website with a custom logo: Mimir, Absolutely Fabulous Photo Booth.

Kuula embed in an online magazine: El Pais, VR Scout.

Kuula embed in a blog post: Beaumonde interactive marketing & creative studio.

Comments?

We appreciate the feedback we get from our users, so if you have any comments or you feel like you would love to have soem additional features, please let us know in the comment section below or send us an email to contact [at] kuula.co.

We hope you will enjoy embeding 360 photos from Kuula. Let us know where you use them, we'd love to see them.

Happy embedding!

This article is based on automatic translation from English.
Back
Recent posts