> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.courses-plus.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Customizing Courses Plus pages with Javascript In order to add custom JS code on course pages let's start with creating a snippet in your theme. ![](https://storage.crisp.chat/users/helpdesk/website/3aea62344d5c9200/screenshot2024-06-04at144824_16e01i5.png) | We recommend using the latest version of your theme. Choose Snippets folder and add a new snippet: ![](https://storage.crisp.chat/users/helpdesk/website/3aea62344d5c9200/screenshot2024-06-04at145013_1sfjr4h.png) In a new snippet, let's create a condition that will only launch the JS code only on course pages. This will help to make sure that this snippet won't affect performance of any other pages. ![](https://storage.crisp.chat/users/helpdesk/website/3aea62344d5c9200/screenshot2024-06-04at150441_kt8s6a.png) This code will launch when the page is fully rendered. Here is the full code: ```javascript ``` You can add your custom code as shown on this screenshot: ![](https://storage.crisp.chat/users/helpdesk/website/3aea62344d5c9200/screenshot2024-06-04at151003_1w4ztq8.png) When creating your custom code, you may use the following events: * `onQuizRendered` - quiz has been rendered * `onLessonRendered` - lesson has been rendered * `onOpenLessonRendered` - lesson of the [open course](/en/article/public-open-courses-17a1jqc/) has been rendered * `onCoursesQuizPassed` - quiz has been successfully completed * `onCoursesRendered` - My Courses (main) page has been rendered The code that processes event will look like this: ``` window.addEventListener("onLessonRendered",function() { // your custom code goes here }) ``` You can add it to your snippet like this: ![](https://storage.crisp.chat/users/helpdesk/website/3aea62344d5c9200/screenshot2024-06-04at153603_snj9yf.png) Once the draft for your custom code is ready, include the snippet in your `theme.liquid` file by adding `{% render 'courses_script' %}` in ``: ![](https://storage.crisp.chat/users/helpdesk/website/3aea62344d5c9200/screenshot2024-06-04at154034_17drbon.png) If you have any additional question, please use the chat on this page to communicate with our support team.