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();

});

• Prevent the course failed pop-up from displaying

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

e.preventDefault();

});

• Prevent both the course completion and failed pop-up from displaying

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

e.preventDefault();

});

5. Click Update to save your changes.