**Thinkific** is an online course platform that allows businesses or individuals to create and deliver online courses. In addition to course creation, Thinkific provides tools for course marketing, student engagement, and the ability to monetize your courses.
There is a unique challenge to comes with Thinkific and your Rise course. It is that the learners can quickly opt out of consuming your course content by just quickly clicking the Complete & Continue button. In order to combat this, we have build some Javascript that you can use to quickly hide this button when your course launches, and then again reveal whenever your ready.
This video will help explain the exact steps that you will go through in order to achieve this. Below are the specific steps and the Javascript snippets that you can use to get started!
In Thinkific, go to your Settings > Code & analytics and append this script into your Site Footer code.
<script src="[<https://cdn.jsdelivr.net/gh/robgalvinco/[email protected]/playeah/event-manager.min.js>](<https://cdn.jsdelivr.net/gh/robgalvinco/[email protected]/playeah/event-manager.min.js>)"></script>
<aside> ⚠️ Note that this script is not managed by the Mighty team but by **Rob Galvin ❤️** and is a community-based script that is managed by him and his team.
</aside>
In Rise, go to your course, then Theme > Custom Code and add in this Javascript. Make sure to replace your Block CSS Selector.
/**
* This function will fire once your course in rendered and
* will emit a message to the event-manager.js script
* which hides the Complete and Continue button.
*/
(() => {
try {
window.parent.postMessage("hide_complete", "*");
} catch (e) {
console.error("Failed to hide complete button", e);
}
})();
/**
* This function will setup a listener event to your course and
* when your complete button is available and clicked, it will
* reveal the Complete and Continue button again.
*/
(() => {
const observer = new MutationObserver(() => {
const completeButton = document.querySelector(
// ---> INSERT YOUR BLOCK ID HERE
`[data-block-id="clu8cec6m00dm3bbsdbsphp8f"] button`
);
if (completeButton) {
// We attach to our button and when clicked, show the complete button
completeButton.addEventListener("click", () => {
try {
window.parent.postMessage("show_complete", "*");
} catch (e) {
console.error("Failed to show complete button", e);
}
});
// We disconnect from the page and stop watching for our button
observer.disconnect();
}
});
/**
* This listens to new elements being added to your course
* as your learners progress throughout your lessons
*/
observer.observe(document.body, {
childList: true,
subtree: true,
});
})()
Publish to Web using Mighty, load into Thinkific as Multimedia
<aside> 💡 You may have to unzip the Rise output, navigate into the content folder and then re-zip all the contents within there as Thinkific has had issues reading zips with folders.
</aside>
Preview the Lesson and ensure your Complete and Continue button is hiding and being revealed at the correct time.