Adding a Screenjelly button to your site

If you have a website to which you would like to add Screenjelly, this section is for you.

You just need to add the following JavaScript snippet to your website where you want the button to be added: 

<script type="text/javascript">
 var protocol = (document.location.protocol == 'https:') ? 'https:' : 'http:';
document.write(unescape("%3Cscript src='"+ protocol +"//www.screenjelly.com/widget/recorder.js' type='text/javascript'%3E%3C/script%3E"));
 </script>

This code will add the following button to your page:


Go ahead and click it to see what it does!

SPOILER: It opens a pop-up window with a "mini-version" of Screenjelly, which allows your visitors to create a screen recording right there and then, and add the link or the embed code to your website (in comments, forums posts, or anywhere else.)

Advanced Options

You have access to couple more options to have a better control of what happens once the recording is uploaded.

By default, as seen above, the user will get a link or an embed code to copy and paste in your site. You can make the integration even better by writing a callback function which will take care of adding that link or embed code wherever you need it.

For example, if you have a blog and you want your users to be able to add a recording in the comments, the callback function could automatically insert the embed code in the body of the comment when the user clicks "Use it".

After adding the JavaScript snippet from above, you can declare two callback functions:

recorder.onSuccess = function(video)

This function is called when the recording has been successfully uploaded.
video is an object with the following methods: 

  • getPageLink()
    returns the URI of the video on the ScreenJelly website (e.g. http://screenjel.ly/D24q1oJoKat)
  • getEmbedCode(width, height)
    returns the embed code for the recording. 'width' and 'height' default respectively to 577 and 403.
  • getId()
    returns the Id of the recording

 

recorder.onCancel = function()

This function is called when the recorder has been closed without uploading a recording.

Example

The example below will add the Screenjelly button, and, once the recording is uploaded, update the HTML elements with id 'videoUrl' and 'videoEmbed'. If the recorder is closed before finishing, an alert is displayed.

You just need to adapt these callback functions to your own page. 

<script type="text/javascript">
var protocol = (document.location.protocol == 'https:') ? 'https:' : 'http:';
document.write(unescape("%3Cscript src='"+ protocol +"//www.screenjelly.com/widget/recorder.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
recorder.onSuccess = function(video) {
    // adds link
    document.getElementById('videoUrl').value = video.getPageLink();
    // adds embed code
    document.getElementById('videoEmbed').innerHTML = video.getEmbedCode();
}
recorder.onCancel = function() {
    alert("Why didn't you record your screen?");
}
</script>