Zight Record SDK | Embed Zight in Your Product

Allow your users to better communicate and collaborate at scale by embedding, playing and recording videos directly into your product with our SDK

Whether you want to collect videos from your customers or let your customers embed videos to skip lengthy documentation, our SDK will get you these functionalities in a few minutes and avoid customers leaving your website.

Example of the Zight SDK integrated within Lucidspark (Lucidchart)

Example of the Zight SDK code

Features

• Quick setup
• No download is needed for your users, just click record!
• No need to signup to start recording
• Simple user interface
• Pause and restart recordings at any time

What's an SDK?

• An SDK is a piece of code you can add to any website you own, letting you extend its capabilities.

How do we enroll?

• Review the 'Implementation' section below to get your API key

How long does it take to setup

• With under 50 lines of code to set it up, any developer can get it up and running in a few minutes

How much does it cost?

• For free accounts
  • Users will be subject to usage limits
  • 5 minutes videos before having to signup, then up to 25 videos for free
• For enterprise accounts
  • We can customize all limits as needed for you, please get in touch with our sales team

Compatibility

• Zight’s web recorder is currently compatible with Chrome/Chromium browsers (Chrome, Brave, Opera, Firefox 100 and Edge). 

• Getting the API Key
  • First, signup for a Zight account if you haven’t done so yet. You can then get your API Key in Zight settings > Applications.
  • To avoid cross-domain issues, we recommend setting up an API key per domain that you plan on using.

• Quick setup
  
  • Import the Script

<script src="https://downloads.zight.com/webrecorder/v7.114.0/zight.js"></script>

• Check for Browser Compatibility
  • CloudAppRecorder.isSupported returns a boolean wether or not we support the browser. This lets you show/hide recording capabilities within your own interface

• Add the Recording action

const options = {
apiKey: <YOUR API KEY>,
onCompleted: function({ shareUrl, thumbnailUrl, embedUrl }) {
// Use the share url which is Zight's url : share.zight.com/<hashid>
// use the embed url which lets you add an iframe to playback the video
// Use the thumbnail url which lets you show a preview of the video (ex: on a clickable element)

// Opens the link in a new tab
window.open(shareUrl, "_blank");
},
onStatusChange: function(newStatus) {
if (newStatus == "recording") {
// Disable the start recording button since we are already recording
}
},
}
// Element that triggers the Zight recorder
const el = document.getElementById("recorder-button");

el.addEventListener("click", ()=>{
CloudAppRecorder.start(options)
});

Note : console.logs in the SDK callback methods won’t log anything. You should use debugger or breakpoints to see them in action

• Options

Frequently Asked Questions

• How long does it take to setup
  • With under 50 lines of code to set it up, any developer can get it up and running in a few minutes
• How much does it cost?
  • Currently, the functionality is available on any Zight plan. Please note that end users making recordings would be subject to usage limits (currently, up to 9 x 90 seconds videos before having to signup, then up to 25 videos for free)
• Compatibility
  • Zight web recorder is currently compatible with Chrome/Chromium browsers (Chrome, Brave, Opera, Firefox 100 and Edge). Support for Safari to come later.
• Does it work on mobile/tablets?
  • As we do not have Safari compatibility yet, the SDK currently doesn't trigger for most iOS users.
• Do I get notified when someone views the video created?
• • If you are logged in on a Zight account when recording, you get a notification when someone views/comments later on. Otherwise, these recordings are logged out/anonymous