Technologo 360 vSample Integration API

Overview

Customer Focus’ Interactive Imaging solutions includes the option to seamlessly integrate 360 virtual samples into the customer website experience. This document explains the methodology for showing 360 vSamples in real time.

 

This solution uses a simple combination of HTML and Javascript to show samples on a standard HTML web page. Note that 360 samples must be configured in the Technologo system before they will be usable through this interface. For more information on setting up Technologo 360 vSamples, please contact support at info@technologo.com.

 

Integration

 

To utilize the Technologo 360 vSample API on your web site you will need to include the following JavaScript files in the header of your page(s):

 

http://code.customerfocus.com/libs/codecore/jquery/jquery.codecore.js

http://code.artworktool.com/libs/technologo/jquery/jquery.technologovs.js

 

This will add an easy to use library to work with the Technologo API.

 

<IMG> Tag

To start Technologo 360, add an HTML image tag (<img>) with the following information configured:

 

<img class="technologovs" data-technologovs=“{“sku360”:” [ADD SKU HERE]”}” src=“http://vsclto.technologo.com/to.vision?stor=h&action=3d&encquality=0.7&w=300&sku=[ADD SKU HERE]”&logo= />

 

** replace [your technologo sku here] including brackets with the appropriate SKU configured on Technologo

 

 

Attributes and parameters:

  • class attribute
    • The technologovs class is required for the jQuery and Technologo javascript libraries to work.
  • data-technologovs attribute
    • This is required for the jQuery and Technologo javascript libraries to work. in the example above you would replace the information in the double brackets [] with your Technologo SKU including replacing the brackets.
  • w=300
    • Controls the size of the image returned.
  • encquality=0.7
    • Controls the the quality of the image returned by Technologo.
  • &logo=
    • Add the URL of the image you which to display as a logo after the =.
  • &frame=0
    • Adding this will display just the first frame of the Technologo 360 image instead of the rotating image
  • &sku=[ADD SKU HERE]
    • You would replace the information in the double brackets [] with your Technologo SKU including replacing the brackets.

 

Javascript

** please note you will also need jQuery implemented on your web site.

See https://jquery.com/ for more information about jQuery

 

The following must be called to activate the 360 on the multi frame image; this call initiates the class and activates the Technologo technology. Place this in the document ready function:

 

$(‘.technologovs’).technologovs();

 

Optionally, you can pass any one of the following parameters below in the ‘init’ method:

$('.technologovs').technologovs('init', {showControls: 1, showLoading: true, autoRotate: false});

 

 

Additional methods that can be executed programmatically:

 

Set the logo

$(‘.technologovs’).technologovs('setLogo', ‘[url of image] - do not brackets’)

 

REMOVE the logo

$(‘.technologovs’).technologovs('resetLogo')

 

Start animation

$(‘.technologovs’).technologovs(‘view360_play')

 

stop animation

$(‘.technologovs’).technologovs(‘view360_pause')

 

dynamically play/stop

$(‘.technologovs’).technologovs(‘view360_playPause')

 

go to specific frame

$(‘.technologovs’).technologovs(‘view360_gotoFrame’, [#frame number to go to])

 

move to next frame in animation

$(‘.technologovs’).technologovs(‘view360_nextFrame')

 

move to previous frame in animation

$(‘.technologovs’).technologovs(‘view360_prevFrame')

 

 

HTML Sample

(Remove the brackets [] from SKU sections when putting your SKU in the code sample)

 

<!DOCTYPE HTML>
<html>
<head>
    <title>Technologo 360 Integration Sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.customerfocus.com/libs/codecore/jquery/jquery.codecore.js"></script>
    <script type='text/javascript' src="http://code.artworktool.com/libs/technologo/jquery/jquery.technologovs.js"></script>

    <script>
        $(document).ready(function () {
            $('.technologovs').technologovs('init', {showControls: 1, showLoading: true, autoRotate: false});
        });
    </script>
</head>

<body>
<div class="product_image">
    <img class="technologovs" data-technologovs='{"sku360":"[ADD SKU HERE]"}' src="http://vsclto.technologo.com/to.vision?stor=h&frame=&action=3d&encquality=0.7&w=300&sku=[ADD SKU HERE]" style="width: 600px; height: 600px;"/>
</div>
</body>
</html>