Zight Record SDK | Embed Zight in Your Product

Zight Support
Zight Support
  • Updated
Easily add recording capabilities to your website in a few minutes!
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.
Screenshot 2024-04-09 at 9.17.57 AM.png
Example of the Zight SDK integrated within Lucidspark (Lucidchart)
sdk.png
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). 

 

Implementation
  • 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.
Zight 2024-04-09 at 9.02.39 AM.jpg
  • 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
Param Type

Description

apiKey String Your API key
onStatusChange

function returning newStatus

which can be idle, restarting, countdown, or recording

Upon completion of a recording, this function is returning 3 types of urls

(optional)

guestId

string

Must be unique

Specify your own user id for videos

(ex: if you already have a user authenticated on your side, this would help you eventually reconcile accounts)

(optional)

namePrefix

string Add a custom prefix to the name of the final video created

optional)

thumbnailOptions

JSON

{width: 400,height: 0, playicon: true}

Lets you specify the size of the thumbnail that will be returned with thumbnailUrl

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

 

If you need further assistance or have additional questions, we’d be happy to help! Please contact our support team here

 


Was this article helpful?

2 out of 3 found this helpful

Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.