How to Use Custom Scripts (Javascript)

Custom JS scripts are an extremely powerful tool to customize your memberships.This tool must be used with caution.

Note: Never copy-paste unknown javascript code found on the internet into your memberships as it may contain malicious scripts which can harm your students. 

In this example we're going to highlight the background of the first course in the Students dashboard to attract their attention three seconds after the page is loaded. 

To do that, go to the Membership Settings and open the Settings tab. Copy over the code provided below and click Done to save your changes.

Example code to copy: 

<script>
 // This code will change the color
 // of the first course card in the dashboard
 // into green 3 seconds after the page is loaded
 //
window.addEventListener('DOMContentLoaded', (event) => {
  setTimeout(function(){
    document
    .getElementsByClassName('course-select-box')[0]
    .style
    .transition = 'background-color 1.5s ease';
    document
    .getElementsByClassName('course-select-box')[0]
    .style
    .backgroundColor = 'lime';
  }, 3000);

  // This code is going to set it back 
  // to the original color
  // 
  setTimeout(function(){
    document
    .getElementsByClassName('course-select-box')[0]
    .style
    .backgroundColor = '#ededf4';
  }, 5000);

});
</script>

After you've saved your changes, login to the membership as a student. You should see the background of the first course card change its color: