Hosting 360° Presentation on your own server

To host presentations from your own server you need:

access to your server (to copy files and configure HTTP server)
your own copy of ORBITVU VIEWER (you have to buy the license or use the ORBITVU VIEWER Free360)
360° presentations
some technical knowledge on HTML and server administration
you have to understand what is ORBITVU PRESENTATION and what is ORBITVU VIEWER.

Deployment

VIEWER
- Copy ORBITVU VIEWER to your server (copy orbitvu12/ folder)
- Configure your web server to serve files from orbitvu12/ directory (make sure these are publicly accessible under some URL, e.g.: http://yourdomain.com/orbitvu12/)
Presentations
- Copy Presentations to your server (usually you'll use some FTP client)
- Configure your web server to serve presentation files under some publicly accessible URLs, e.g.: http://yourdomain.com/presentations/
Server configuration
- Add Access-Control-Allow-Origin *; header to both VIEWER and Presentations URLs to avoid possible CORS (Cross-origin resource sharing) issues
Coding
- Create web pages that are using your ORBITVU VIEWER and your presentations URLs (see below for details)

You might also want to get and configure SSL certificate for your domain which is required e.g. if you'll want to add Facebook integration.

This page describes the classic script bundle, which puts its injection functions on window. If your site is built with a bundler (Vite, webpack, Next.js, …), use the ES module bundle instead — the same orbitvu12/ folder also contains orbitvu.esm.js.

Load ORBITVU VIEWER helper scripts You can add scripts to the <head> section of the page.

<script type="text/javascript" src="http://yourdomain.com/orbitvu12/orbitvu.js"></script>

Create container element for the presentation Create a container element that your presentation will be inserted to. It is necessary to set the unique id for this container.

<div id="presentation1-container"></div>

If you want to have multiple presentations at your page then just create container with unique id for each of these

Initialize presentation The last step is to call JavaScript function inject_orbitvu that will inject the presentation into the container.

<script type="text/javascript">
    inject_orbitvu(
        'presentation1-container',
        'http://yourdomain.com/orbitvu12/',
        '',
        {
            ovus_folder: "http://yourdomain.com/presentations/presentation1/",
            content2: 'yes',
            width: "500",
            height: "400"
        });
</script>

Line 3:

id of the container element

Line 4:

URL of the ORBITVU VIEWER folder (hosted at your server). ORBITVU VIEWER loads its stylesheet, viewer5.css, from this folder, so point it at the directory holding orbitvu.js and keep the trailing slash.

Line 5:

Not used — a leftover from older VIEWER releases, kept so that the parameters stay in the fourth position. Leave the empty string in place.

Line 7:

URL to the presentation directory (hosted at your server)

Line 8:

Set to yes if there is content2.xml file in your presentation’s directory, otherwise set to no or remove

Line 9-10:

Other ORBITVU VIEWER parameters. For more see parameters reference.

Helper script has to be loaded BEFORE you call inject_orbitvu

The VIEWER folder on line 4 is what ORBITVU VIEWER loads viewer5.css from. If you pass an empty string there, set viewer_base yourself or link the stylesheet from your page — otherwise the presentation renders unstyled.

If you have multiple presentations at your page then you need to call inject_orbitvu for each of them

You might want to call inject_orbitvu inside onready event handler

Complete example

Example uses jQuery to defer JavaScript execution on page load

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />

        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="http://yourdomain.com/orbitvu12/orbitvu.js"></script>

        <script type="text/javascript">
            $(function() {
                inject_orbitvu(
                  'presentation1-container',
                  'http://yourdomain.com/orbitvu12/',
                  '',
                  {
                      ovus_folder: "http://yourdomain.com/presentations/presentation1/",
                      content2: "yes",
                      width: "500",
                      height: "400"
                  });
            });
        </script>
    </head>
    <body>
        <h1>Some text</h1>

        <div id="presentation1-container"></div>
    </body>
</html>

Take care of setting proper DOCTYPE for your page especially for Internet Explorer

Hosting 360° Presentation on your own server

Deployment

Web page coding

Complete example

On this page