Menu

Hooking Into Course Player V2 Events From Site Footer Code

Thinkific allows you to write your own custom javascript and use it to interact with our Course Player. You can use this to send data on student course navigation, and course and lesson completion, to Mixpanel and other analytics tools.


Below is an example:


<script>
    $(function() {
        if(typeof(CoursePlayerV2) !== 'undefined') {
            CoursePlayerV2.on('hooks:contentDidChange', function(data) {
               console.log("Content changed: " + data);
            });
            CoursePlayerV2.on('hooks:contentWillChange', function(data, abortTransitionCallback) {
               console.log("Content will change: " + data);
               abortTransitionCallback(confirm('You want to abort the transition?'));
            });
            CoursePlayerV2.on('hooks:contentWasCompleted', function(data) {
                console.log("Complete: " + data);
            });
            CoursePlayerV2.on('hooks:contentWasMarkedIncomplete', function(data) {
                console.log("Incomplete: " + data);
            });
            CoursePlayerV2.on('hooks:enrollmentWasCompleted', function(data) {
                console.log("Enrollment completed: " + data);
            });
        }
    });
</script>


This code can be placed in your site's "Site Footer Code", which is under Advanced Settings > Site Footer Code in your Thinkific admin dashboard.


We allow you to hook into 5 different events. All 5 events pass the same data:


var data = {        
   lesson: {} //object containing lesson attributes,
   chapter:  {} //object containing chapter attributes,
   course:  {} //object containing course attributes,
   enrollment:  {} //object containing enrollment attributes,
   user: {} //object containing student attributes
}


Below are the hooks currently available:

  1. hooks:contentDidChange - this is fired after a student has navigated to a new lesson.
  2. hooks:contentWillChange - this is fired just before a student navigates to a new lesson. You function will receive a second parameter call abortTransactionCallback. If you choose to, you can call this function with a boolean value. If you call it with true, the transition to the new lesson will be cancelled. If you call it with false, the transition will continue. If you do not call it, the transition will continue.
  3. hooks:contentWasCompleted - this is fired when the student clicks the "Next" button and completes the lesson.
  4. hooks:contentWasMarkedIncomplete - this is fired when the student clicks the 'Mark Incomplete' button on a previously completed lesson.
  5. hooks:enrollmentWasCompleted - this is fired when the student completes the entire course and their enrollment percentage complete reaches 100%.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.