Integrate a Virtual Tour into your WSC Survey using Kuula

Kuula is a popular 3D and 360 virtual tour software that facilitates the creation of web-based virtual tours.
Reference Guide
Virtual tours from the Kuula platform can be embedded directly into WSC survey pages with HTML and JavaScript, allowing respondents to navigate through a pre-made 3D or 360 virtual tour on a WSC survey page. Visit kuula.co to make an account.
This guide will demonstrate the steps to embed a virtual tour into your own WSC survey page:
  • 1. When viewing a virtual tour project at kuula.co, click on the Share button located on the right-hand side of the page:
    Kuula Integration Share Tour
  • 2. Click on the "Get Link or Embed Code" button:
    Kuula Integration Get Embed Code
  • 3. At the bottom of the screen, select the "Embed HTML" button and copy the iframe HTML code:
    Kuula Integration Copy Embed Code
  • 4. In your WSC survey, add a new JavaScript script to the page. Click on the "Show a Content Container for this Javascript to use" checkbox. Select the "Execute Javascript when Survey Page has Loaded" scripting event.
    Kuula Integration Show Content Container and Execute on Page Load
  • 5. Create a new Question Container and append the virtual tour iframe HTML code that was copied in step 3 to the container:
    ///Adjust the height of the Question Container
    $('#{QuestionContainer}').height(650);

    ///Append the virtual tour iframe to the Question Container
    $('#{QuestionContainer}').append('<iframe width="100%" height="640" style="width: 100%; height: 640px; border: none; max-width: 100%;" frameborder="0" allowfullscreen allow="xr-spatial-tracking; gyroscope; accelerometer" scrolling="no" src="https://kuula.co/share/collection/7kvZ8?logo=1&info=1&fs=1&vr=0&sd=1&thumbs=1"></iframe>');

    args.isValid = true;
After saving the script, the virtual tour will now be embedded directly into your survey page

To view our sample click here.

Kuula Integration Example