This page is outdated, please see our new Player installation instructions here: Player installation


Single page applications (SPA) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app without a page refresh.


Bare.js player

First, include the Inline Manual JS library file (or replace the previous standard player) in your HTML head element. We will be using the "bare" player, which is the player without init.


The [api_key] in the code should be replaced by your site API key. You can find the API Key under: Sites > Site > Settings tab > Player installation > Integration via API


<script>
!function(){
var e=document.createElement("script"),t=document.getElementsByTagName("script")[0];
e.async=1,e.src="https://cdn.inlinemanual.com/embed/player.[api_key].bare.js",e.charset="UTF-8",t.parentNode.insertBefore(e,t)}();
</script>


Set the people tracking

Once the user is logged in you can prepare the inlineManualTracking object as:


<script>
  window.inlineManualTracking = {
    uid: "1",
    email: "john@doe.com",
    username: "johndoe",
    name: "John Doe",
    created: 1360610467,
    updated: 1433168312,
    roles: ["admin", "editor"],
    group: "Doe & Partners Inc.",
    plan: "Gold"
  }
</script>


The inlineManualTracking object should be placed before the player initialization. It must be a global variable in your application's code.


To initialize the Player for the very first time, call:


createInlineManualPlayer(window.inlineManualPlayerData);


window.inlineManualPlayerData is already part of the bare.js player, no need to define it.


On state change

When the application moves to a different page (or there is a state change) where you want to re-check the metadata and automation, you will need to call the update method.


inline_manual_player.update();


This will check for the latest profile with stats about plays and then it will trigger re-running the autolaunchers against latest data. The code should be placed wherever the state of your app changes which usually is within the router of your application.


Further help

If you need to wait for createInlineManualPlayer and you don't have any functionalities within your current framework, you can use the script below. Or get in touch to verify your installation.


var retries = 0;
var timer = setInterval(function () {
if (typeof window.createInlineManualPlayer !== 'undefined') {
   createInlineManualPlayer(window.inlineManualPlayerData);
   clearInterval(timer);
 } else if (retries > 100) {
   clearInterval(timer);
 }
 retries++;
}, 50);