Screenr for Support Sites

API Examples

Set recorder properties using settings parameter and appendTo an element

<div id="placeholder"></div>
<script type="text/javascript">
Screenr.Recorder({id:"your_recorder_id", userName:"Peter Parker", userEmail:"peter@thebugle.com",
                  subject:"My first screencast", description:"A really good description"})
                  .appendTo("placeholder");
</script>

Use the helper functions to set recorder options:

<script type="text/javascript">
var recorder = Screenr.Recorder({id:"your_recorder_id"});
recorder.setUserName("Peter Parker");
recorder.setUserEmail("peter@thebugle.com", false); //sets and hides field
recorder.setSubject("My first screencaste");
recorder.setDescription("A really good description");
recorder.appendTo("placeHolder");
</script>

Add custom data to a screencast

<script type="text/javascript">
var recorder = Screenr.Recorder({id:"your_recorder_id"});
//here we add custom data for both 'ticketId' and 'product' key
recorder.addCustomData("ticketId", 1);
recorder.addCustomData("product", "WidgetMaker");
recorder.record(); //launch the recorder
</script>

Use the onComplete event do embed your screencast on the page

<div id="placeholder"></div>

<script type="text/javascript">
var recorder = Screenr.Recorder({id:"your_recorder_id"});

//set the onComplete callback
recorder.setOnComplete(function(screencast) {
     var placeHolder = document.getElementById("placeholder");
     //set the HTML of placeholder to our embed code
     placeHolder.innerHTML = screencast.embed;
});
</script>

Use the onCancel event to show an alert

<script type="text/javascript">
var recorder = Screenr.Recorder({id:"your_recorder_id"});

//set the onCancel callback
recorder.setOnCancel(function(screencast) {
    alert("You cancelled the recording");
});
</script>