Embedding with ORBITVU SUN embed codes

ORBITVU SUN is a platform that lets you manage, reuse and redistribute your ORBITVU Presentations effortlessly. You can set necessary parameters from its interface and just copy & paste desired embed code into your site.

If you need further adjusting it is also possible by tweaking parameter values. Below you’ll find some typical embed codes generated for you by ORBITVU SUN

Standard embed code

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <script type="text/javascript" src="//orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/script?width=auto&content2=yes&height=auto"></script>
    <div class="orbitvu-viewer" style="width: 250px; height: 250px">
        <div id="ovContent-dSz54kMJ7rHKtC6E2YBHpf" class="orbitvu-container" style="background: url(//static.orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/iproc/250/250/img01.png) no-repeat center center #ffffff;"></div>
    </div>
    // YOUR SITE CODE HERE
</body>
</html>

QR Code

<a href="https://orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/view" target="_blank">
    <img src="//orbitvu.co/imageprocessor/qrcode_proccessor?content=aHR0cDovL29yYml0dnUuY28vMDAxL2RTejU0a01KN3JIS3RDNkUyWUJIcGYvb3YzNjAxLzIvdmlldw==">
</a>

Image (rotated)

<img src="//cdn.orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/iproc/md_1530858896/img01?max_width=200&height=179&rotate=45" alt="" />

Max scale

Here we add max_scale to limit maximum possible zoom and viewer_uid to make it possible to use the same presentation multiple times on one page. Compare how much you can zoom here with the first example at this page.

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <script type="text/javascript" src="//orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/script?width=auto&content2=yes&height=auto&max_scale=0.15&viewer_uid=xl2&force_html5=yes"></script>
    <div class="orbitvu-viewer" style="border:1px solid #444444; width: 100%; height: 250px">
        <div id="ovContent-xl2" class="orbitvu-container" style="background: url(//static.orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/iproc/250/250/img01.png) no-repeat center center #ffffff;"></div>
    </div>
    // YOUR SITE CODE HERE
</body>
</html>

HTML5 initial info

Using html5_initial_info to show info window.

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <script type="text/javascript" src="//orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/script?width=auto&content2=yes&height=auto&viewer_uid=xl3_2&html5_inital_info=all"></script>
    <div class="orbitvu-viewer" style="border: 1px solid #444444; width: 100%; height: 250px">
        <div id="ovContent-xl3_2" class="orbitvu-container" style="background: url(//static.orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/iproc/250/250/img01.png) no-repeat center center #ffffff;"></div>
    </div>
    // YOUR SITE CODE HERE
</body>
</html>

HTML5 hint

Using html5_hint to show infographic.

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <script type="text/javascript" src="//orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/script?width=auto&content2=yes&height=auto&viewer_uid=xl3_3&html5_hint=yes"></script>
    <div class="orbitvu-viewer" style="border: 1px solid #444444;width: 100%; height: 250px">
        <div id="ovContent-xl3_3" class="orbitvu-container" style="background: url(//static.orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/iproc/250/250/img01.png) no-repeat center center #ffffff;"></div>
    </div>
    // YOUR SITE CODE HERE
</body>
</html>

Delayed execution

You can defer injection of the presentation into the page using viewer_delayed parameter. For example, you might want to show presentation on button click (note that this requires some programming knowledge).

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <script type="text/javascript" src="//orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/script?width=auto&content2=yes&height=auto&viewer_delayed=yes&viewer_uid=xl4"></script>
    <div class="orbitvu-viewer" style="border: 1px solid #444444; width: 100%; height: 250px">
        <div id="ovContent-xl4" class="orbitvu-container"></div>
    </div>

    <button onclick="inject_viewer_xl4()">Inject presentation</button>
    // YOUR SITE CODE HERE
</body>
</html>

Responsive VIEWER within hidden tab

Sometimes you might want to place ORBITVU VIEWER into the separate tab that is initially hidden and you still want ORBITVU VIEWER to scale responsively. Starting from version 3.0.32 of ORBITVU VIEWER such situation will be handled automatically and VIEWER will delay it's initialization until it is shown.

 <!DOCTYPE html>
 <html>
 <head>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
     <style type="text/css">
         #tabs-container {
             height: 300px;
         }

         /* make tabs width responsive */
         #tabs {
             width: 200px;
             height: 100%;
             box-sizing: border-box;
         }

         @media (min-width:800px) {
             #tabs {
                 width: 300px;
             }
         }

         @media (min-width:1000px) {
             #tabs {
                 width: 350px;
             }
         }

         @media (min-width:1200px) {
             #tabs {
                 width: 500px;
             }
         }
     </style>
 </head>
 <body>
     // YOUR SITE CODE HERE
     <div id="tabs-container">  <!-- use container to set tabs height -->
         <div id="tabs">
             <ul>
                 <li><a href="#tabs-1">First tab</a></li>
                 <li><a href="#tabs-2">360&deg;</a></li>
             </ul>
             <div id="tabs-1">
                 <p>Switch to second tab to see 360&deg; view</p>
             </div>
             <div id="tabs-2">
                 <div id="ovContent-xl7" class="orbitvu-container"></div>
             </div>
         </div>
     </div>
     <!-- Use jQuery UI tabs plugin -->
     <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
     <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
     <script type="text/javascript">
         // jQuery tabs
         $("#tabs").tabs({
             heightStyle: "fill"
             }
         );
     </script>
     <script type="text/javascript" src="//orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/script?width=auto&content2=yes&height=auto"></script>
     // YOUR SITE CODE HERE
</body>
</html>

Switch to second tab to see 360° view

ORBITTOUR in a hidden container

If you need to initialize ORBITTOUR in a hidden container that will be shown dynamically later (e.g. on button click), then you do it as usual. ORBITTOUR will detect dynamically when it is shown and will adjust its size properly. Another option is to use orbittour_width and orbittour_height parameters that will force ORBITTOUR dimensions.

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <div class="orbitwrapper" style="width: 400px; height: 400px; background-color: #eaeaea; border: 1px solid #888888;">
         <div id="hidden-orbittour-wrapper" style="display: none; height: 100%;">
             <div id="orbittour-dSz54kMJ7rHKtC6E2YBHpf" class="orbittour-container"></div>
             <script type="text/javascript" src="//orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/2/orbittour/468/script?force_html5=yes"></script>
         </div>
     </div>
     <button onclick="document.getElementById('hidden-orbittour-wrapper').style.display='block';">Show orbittour</button>
    // YOUR SITE CODE HERE
</body>
</html>

Responsive layout

It is possible to use ORBITVU VIEWER in responsive layouts using width and height set to auto. ORBITVU VIEWER will fit itself into container element.

Container with height of 0px. ORBITVU VIEWER will be shown using 16:9 proportion:

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <script type="text/javascript" src="//orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/script?width=auto&content2=yes&height=auto&viewer_uid=xl5"></script>
    <div class="orbitvu-viewer" style="width: 100%; height: 100%">
        <div id="ovContent-xl5" class="orbitvu-container"></div>
    </div>
    // YOUR SITE CODE HERE
</body>
</html>

Container element with height set using media queries.

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <style type="text/css">
        .media-query-viewer-wrapper {
            height: 100px;
        }

        @media (min-height:200px) {
            .media-query-viewer-wrapper {
                height: 200px;
            }
        }

        @media (min-height:300px) {
            .media-query-viewer-wrapper {
                height: 300px;
            }
        }
    </style>

    <div class="media-query-viewer-wrapper" style="width: 50%;">
        <script type="text/javascript" src="//orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/script?width=auto&content2=yes&height=auto&viewer_uid=xl6"></script>
        <div class="orbitvu-viewer" style="width: 100%; height: 100%">
            <div id="ovContent-xl6" class="orbitvu-container"></div>
        </div>
    </div>
    // YOUR SITE CODE HERE
</body>
</html>