Orbitvu Public Support Site / VIEWER, ORBITTOUR, and 360° Presentations EN / Integration with websites

Hosting 360° Presentation on your own server

Updated on Jun 10, 2019

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
- Add crossdomain.xml file to the domain used to serve presentation files in order to avoid Flash security issues, e.g. https://mydomain.com/crossdomain.xml
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.

Web page coding

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

Lines 4-5:

URLs to ORBITVU VIEWER files (hosted at your server)

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

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

Previous Article Embed ORBITTOUR using ORBITVU SUN embed code

Next Article Server side CORS headers

Hosting 360° Presentation on your own server

Deployment

Web page coding

Complete example

VIEWER, ORBITTOUR, and 360° Presentations EN

Other Resources