Web

The Help Lightning Web SDK is a javascript SDK that allows Help Lightning calls to be embedded into your web application.

Prerequisites

Before you can use the SDK, you must have an API Key which requires a Help Lightning site with an Enterprise Tier.

Installing the SDK

The Latest version of the web SDK is 5.22.1

The Help Lightning web SDK is available from Help Lightning’s CDN.

Often, it is beneficial to decide on your own terms when you want to upgrade the Help Lightning SDK. Instead of always pointing to the most recent release, you can “pin” to a specific release by including the release version in the URL. For example, to pin to 5.22.1, you can change the above to:

<!-- Load help lightning JS SDK -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://helplightning.net/sdk/5.22.1/helplightning.min.js"></script>
<script src="https://helplightning.net/sdk/5.22.1/opentok-enterprise/opentok.min.js"></script>
<script src="https://helplightning.net/sdk/5.22.1/pdf_viewer/build/pdf.min.js"></script>

However, for testing, it is possible to always point to the latest version of the SDK:

This will point to the latest available SDK version. Please only do this for testing!

<!-- Load help lightning JS SDK -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://helplightning.net/sdk/helplightning.min.js"></script>
<script src="https://helplightning.net/sdk/opentok-enterprise/opentok.min.js"></script>
<script src="https://helplightning.net/sdk/pdf_viewer/build/pdf.min.js"></script>

Using the SDK

The SDK exposes the HL namespace by default.

The first step is to create your CallClient from the factory, and set up your delegate, which will handle callbacks:

const delegate = {
  onCallEnded: (reason) => {
    console.log('HelpLightning call has ended', reason);
  },
  onActiveSessionsChanged: (sessions) => {
    console.log('Active sessions changed', sessions);
  },
  onWillJoinCall: (sessionId) => {
    console.log('Will join call', sessionId);
  },
  setMinimizingView: (toggle) => {
    console.log('Set minimizing view', toggle);
  },
  onScreenCaptureCreated: (img) => {
    console.log('HelpLightning captured a screenshot');
    // TODO: save this or upload it somewhere
  },
  onRecordingUpdated: (recordingEnabled) => {
    console.log('HelpLightning recording status changed to:', recordingEnabled)
  },
  onSelectShareKnowledge: (fileTypes) => {
    // The user is trying to share knowledge (image or pdf)
    //  from a custom knowledge library as the task field
    return new Promise((success, failure) => {
        success({'type': 'IMAGE', 'url': 'https://path/to/knowledge'});
    });
  },
  onSelectKnowledgeOverlay: (fileTypes) => {
    // The user is trying to share knowledge (image or pdf)
    //  from a custom knowledge library as a telestration overlay
    return new Promise((success, failure) => {
        success({'type': 'IMAGE', 'url': 'https://path/to/knowledge'});
    });
  }
};

let callClient = HL.CallClientFactory.CallClient;
callClient.delegate = delegate;

Then you need to create a Call object. This should have all the necessary tokens and URLs of the server to join. This information is obtained by interacting with the server RESTful API to create a call/session between users. Typically, this is handled by your integration server.

const call = new HL.Call(session_id, session_token, user_token,
                      ws_url, api_key, name, avatarUrl);
                      
// start the call, we also need to pass in a reference to our <div>
//  container where the Help Lightning call will be embedded
const container = document.getElementById('hlcall');

callClient.startCall(call, container).then((callID) => {
  console.log("Call started...", callID);
}).catch(err => {
  console.error("Error starting Help Lightning call", err);
});

Full Examples

Help Lightning maintains a working example in javascript. Please read through the documentation in the top level of the repository as it is necessary run the sample integration server!

Javascript Sample