HomeLogin

360 Player - Custom

The quickest method to get started is to use our hosted embed/iframes versions.

The following guidance is intended for custom integration purposes and will require developer experience to integrate and maintain.

This guidance demonstrates how to include the required JS Script and then initialise the script to show a 360 based on its style number.

Enable Integration

Our player and APIs are restricted to only work with whitelisted URLs. Please contact your ORB360 account manager to request your URL is enabled.

  • Login to the ORB360 manage interface.

  • Select the shoot you wish to use and ensure that the "findByTag" is enabled for public integration access. If its not enabled contact your ORB360 account manager to request it be enabled.

Create a HTML Page

For the purpose of the guidance we will create a new file called "index.html" with the following contents

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>ORB360-Embed Player</title>
  </head>
  <body></body>
</html>

Include Script Library from our CDN

Add the following script block to the index.html page in the <HEAD> block.

<script src="https://cdn.orb360.tech/orb360embed/v1.3.2/orb360embed.js"></script>

Create a target component

Next we add a component to hold our 360 player. Add the following block to the index.html page in the <BODY> block. The orb360-embed script works by targeting this HTML component and will automatically fill the target component. For simplicity we will add a style inline on the html element, but in production we would recommend the use of separate style sheets (CSS).

<div id="embed" style="width: 400px; height: 400px;"></div>

Initialise the script

Next we initialise the script by adding the following script block to the page. Replacing the tenant id placeholder

Note: To improve page loading and rendering we recommend its added toward the end of the page.

<script type="application/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    new Orb360Embed({
      target: document.getElementById('embed'),
      tenant: '#####################',
      endpoint: '/api/integrations/public/findByTag?videosV2=true',
      query: {
        tags: [{ key: 'StyleNumber', value: 'I_AM_A_STYLE_NUMBER' }]
      }
    });
  });
</script>

Lets break down the script above:

The addEventListener line provides a lazy loading capability in that the player will only begin to load the frames once the rest of the page has rendered. This is in order to avoid the frames blocking the download of other assets on the page.

new Orb360Embed({ ...props }) Creates a new 360 player with the provided options.

Lets break down the options supplied:

Note: More options exist than defined here, please refer to the ORB360Embed.js Docs for a full listing

target: Set the component the player will be created within, in this case we get the div element by its id.

tenant: You should provide the tenant id which is available via the management interface here. This links the script to your account.

endpoint: Set the API endpoint to use, in this case it uses the public/findByTag endpoint. The 'public' part of the endpoint means that only shoots defined as published and public will be accessible and searchable. The public API also checks the origin header of any http requests and must match the whitelist. Please contact your account manager to get any domains added to the whitelist. The "findByTag" part defines the expected structure of the query which is to be performed.

query: Sets the query which will be submitted to the findByTag endpoint. In this case we wish to display all media with a StyleNumber matching 'I_AM_A_STYLE_NUMBER'. The key and value strings are case sensitive and must be an exact match. Where multiple media is found the player will provide 'next' and 'previous' controls to move between all matched media. Multiple values can be provide by adding them to the tags array. By default the condition between each tag will be an 'AND'. please refer to the ORB360Embed.js docs for details of how to submit an 'OR' query.

The Final Result

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Embed 360 - with findByTag</title>
    <script src="https://cdn.orb360.tech/orb360embed/v1.3.2/orb360embed.js"></script>
  </head>
  <body>
    <div id="embed" style="width: 400px; height: 400px;"></div>
    <script type="application/javascript">
      document.addEventListener('DOMContentLoaded', function () {
        new Orb360Embed({
          target: document.getElementById('embed'),
          tenant: '#####################',
          endpoint: '/api/integrations/public/findByTag?videosV2=true',
          query: {
            tags: [{ key: 'StyleNumber', value: 'I_AM_A_STYLE_NUMBER' }],
          },
        });
      });
    </script>
  </body>
</html>

Advanced Use Cases (with orb360embed.js)

1. Using the player to display images hosted externally to the ORB360 platform.

Initialise the Orb360Embed player and provide a images array. Providing an images array disables API lookup features.

This approach is suitable for the use case where the API request can happened server side rather than in the clients browser.

The player will also directly accept the images response attribute from the findById and findByTag endpoints.

new Orb360Embed({
  target: document.getElementById('embed'),
  images: [
    {
      type: '360_V2',
      baseURL: 'https://#########', // Browser accessible URL
      sizes: {
        800: {
          // 800 width - Used for spin images (no zoom)
          urls: ['img01.jpg', 'img02.jpg', ...'img71.jpg', 'img72.jpg'],
        },
        1600: {
          // 1600px Width - Used for Zoomed Image Replacement
          urls: ['img01.jpg', 'img02.jpg', ...'img71.jpg', 'img72.jpg'],
        },
      },
    },
  ],
});

2. Using different image sizes while providing images.

new Orb360Embed({
  target: document.getElementById('embed'),
  canvas: {
    initialImageSize: 'SIZE1', // The value must match the name of an object, within the images[].sizes object below.
    zoomedImageSize: 'SIZE2', // The value must match the name of an object, within the images[].sizes object below.
  },
  images: [
    {
      type: '360_V2', // Capture Device Version - Set to 360_V2 if not known
      baseURL: 'https://#########', // Browser accessible URL
      sizes: {
        SIZE1: {
          urls: ['img01.jpg', 'img02.jpg', ...'img71.jpg', 'img72.jpg'],
        },
        SIZE2: {
          urls: ['img01.jpg', 'img02.jpg', ...'img71.jpg', 'img72.jpg'],
        },
      },
    },
  ],
});

orb360embed.js - Constructor Options

  • tenant: string - REQUIRED (unless images is defined) - tenant id

  • endpoint: string - REQUIRED (unless images is defined) - api integration endpoint to be used, (supported options: '/api/integrations/public/findById?videosV2=true', '/api/integrations/public/findByTag?videosV2=true' )

  • images: array - REQUIRED (when tenant and endpoint not used) - images frames to display

  • query: object - Integration API request body

  • allowFullscreen: boolean - DEFAULT=true - allows fullscreen controls

  • hideControls: boolean - DEFAULT=true - hides controls when not in focus

  • hideAudioControls: boolean - DEFAULT=false - hides audio mute button and volume slider

  • canvas:

    • initialImageSize: int, - DEFAULT=800, The initial image size/path from images to use

    • zoomedImageSize: int, - DEFAULT=1600, The zoomed image size/path from images to use

    • rotationDuration: int, - DEFAULT=5000, time to complete one spin in milliseconds

    • playMode: string - DEFAULT='once'

      • 'none' - no auto rotate/play, start stopped

      • 'once' - rotate once and stop

      • 'continuous' - keep rotating continuous

    • defaultZoom: int|float, - DEFAULT=1, Starting Zoom Factor (multiplier)

    • maxZoom: int|float, - DEFAULT=4, Zoom Factor (multiplier)

    • minZoom: int|float, - DEFAULT=1, Zoom Factor (multiplier)

    • zoomStep: int|float - DEFAULT=0.1, Zoom Increment/Sensitivity (for Wheel and Pinch) (increment)

    • clickZoomStep: int|float - DEFAULT=1, Zoom Increment (for Left Click) (increment)

    • dragPixelsForRotation: int - DEFAULT=30, How many px the drag has to be moved before the frame is changed/rotated (Rotate sensitivity)

    • orientation: int - DEFAULT=0, Apply Degrees of Rotation to all displayed images (only supports options: 0, 90, 180, 270)

PreviousAdvanced 360 - HostedNextIntroduction

Last updated