How to customize the course completion pop-up with JavaScript

If you’re handy with JavaScript, you can use the TalentLMS theme editor to customize the dialog box that pops up every time a user completes a course.

To modify the course completion pop-up, follow these steps:

1. Sign in to your TalentLMS account as Administrator and go to Home > Account & Settings.
2. Go to the Themes tab and, from the Theme drop-down list, choose your active theme.
3. Go to the Javascript tab.
4. In the code area, add your custom JavaScript code.

First, paste the code that fetches the show event for the modal:

$('#tl-course-completed-modal').on('show.bs.modal', function (event) {  

  var modal = $(this);  

});

Then, modify it depending on what you want to do. For example, here are some basic tweaks:

• Change the default image with an image pulled from an external URL

$('#tl-course-completed-modal').on('show.bs.modal', function (event) {  

  var modal = $(this); 

  modal.find('img').attr('src', 'your_new_image_url');

});

• Change the header

$('#tl-course-completed-modal').on('show.bs.modal', function (event) {  

  var modal = $(this); 

  modal.find('h1').html('your_ new_header_text');

});

• Change the subtitle

$('#tl-course-completed-modal').on('show.bs.modal', function (event) {  

  var modal = $(this); 

  modal.find('h2').html('your_new_subtitle_text');

});

• Combine all your changes in a single block of code

$('#tl-course-completed-modal').on('show.bs.modal', function (event) {  

  var modal = $(this); 

  modal.find('img').attr('src', 'your_new_image_url');

  modal.find('h1').html('your_ new_header_text');

  modal.find('h2').html('your_new_subtitle_text');

});

• Prevent the course completion pop-up from displaying

$('#tl-course-completed-modal').on('show.bs.modal', function (e) {

  e.preventDefault();

});

5. Click Update to save your changes.

You did it!

Now you can make any customizations you need to your course completion dialog box with only a few lines of code.