The Spirable video player enables clients to access content from the Spirable Video Library. The player retrieves video content, poster images and clickable data to create interactive web video. Clickable hotspots can be included on top of the products in the video on desktop, and clickable product thumbnails can be included for mobile browsers.

To add the Spirable video player to your website, just follow the steps below:

1. Towards the bottom of your landing page, just before closing body tag </body>, add the following code snippet.

<script>

(function (d, id) {

var js, h = d.getElementsByTagName('head')[0]; if (d.getElementById(id)) { return; } js = d.createElement('script'); js.id = id; js.onload = function () {

bootstrap(); }; js.src = "//psvm.co/static/js/ps-bootstrap.min.js"; h.appendChild(js); }(document, 'ps-bootstrap')); </script>

2. Within your landing page, add a placeholder for Spirable video using the snippet below.

<div id="ps-player">

<ps-video></ps-video> </div>

In addition to the above setup, Spirable requires a unique video identifier in order to play the correct video. This can be specified via either of the two methods below:

1. Passing video identifier (psid) as parameter in URL: To use this method, all you need is to construct the URL to your page as below (where the video identifier is ‘abcd1234’) http://www.yourwebsite.com/yourpage.html?psid=abcd1234

2. Passing video identifier (psid) as attribute: This is accomplished by adding ‘psid’

attribute to ‘ps-video’ HTML element as below

<ps-video psid="abcd1234"></ps-video>

The Spirable Player includes share buttons for email, Facebook and Twitter. How the video is shared and displayed on social platforms is configurable. Due to restrictions imposed by the webcrawler, this configuration has to be done server-side at your end for the sharing to work properly.

It's important that you mark up the landing page with Open Graph (OG) tags to take control over how your content appears on Facebook when shared.

To enable the video to be shared on Facebook these OG tags must be set in the landing page’s head section from the server side.

The steps for setting up Facebook video sharing from your landing page are below:

1. Extract the parameters from the URL

The URL to the landing page will contain two parameters that can be used to construct the OG tags dynamically.

• psid: Spirable video slug

• ppid: Spirable poster image slug

2. Set the following OG tags in the landing page head section from the server side

Title: Set title to a value you would like displayed when shared in Facebook:

<meta property="og:title" content="YOUR_TITLE"/>

Description: Set description to a value you would like displayed:

<meta property="og:description" content="YOUR_DESCRIPTION" />

Type: Set type to 'video.other':

<meta property="og:type" content="video.other" />

Video Type: Set video type to 'video/mp4':

<meta property="og:video:type" content="video/mp4" />

URL: Set url to the URL for that landing page including the dynamic parameters:

<meta property="og:url" content="page_base_url?psid={{psid}}&ppid={{ppid}}" />

Image: Set image to the Spirable poster image URL adding the 'ppid':

<meta property="og:image" content="https://psvm.co/u/{{ppid}}/" />

Video: Set video to the Spirable video image URL adding the 'psid':

<meta property="og:video" content="https://psvm.co/u/{{psid}}/" />

The following Twitter meta tags must be set in the landing page head section.

The steps for setting up Twitter video sharing from your landing page are below:

1. Extract the parameters from the URL The URL to the landing page will contain two parameters that can be used to construct the Twitter tags dynamically.

• psid: Spirable video slug

• ppid: Spirable poster image slug

2. Set the following OG tags in the landing page head section from the server side

Card: Set twitter:card to "player"

<meta name="twitter:card" content="player"/>

Title: Set title to a value you would like displayed when shared in Twitter:

<meta name="twitter:title" content="YOUR_TITLE"/>

Description: Set description to a value you would like displayed:

<meta name="twitter:description" content="YOUR_DESCRIPTION" />

Content Type: Set type to 'video.other':

<meta property="twitter:player:stream:content_type" content="video/mp4" />

Player Stream: Set video to the Spirable video image URL adding the 'psid':

<meta property="twitter:player:stream" content="https://psvm.co/u/{{psid}}/" />

Player: Set url to the URL for that landing page including the dynamic parameters:

<meta property="twitter:player" content="page_base_url?psid={{psid}}&ppid={{ppid}}" />

Image: Set image to the Spirable poster image URL adding the 'ppid':

<meta name="twitter:image" content="https://psvm.co/u/{{ppid}}/">