Shape 1 Shape 2 Shape 3

Progress Tracking

Products inside Kajabi have what is called progress tracking. With this system a user is able to mark posts as complete when they finish and that is stored in the system and lets you display how much of the course the user has completed.

Progress is marked by the user by adding a button with the following code that can be clicked upon completion of the post material.

<a href="#" data-complete-text=" Mark As Complete " data-incomplete-text=" Completed " data-post-completion-toggle="{{ post.completed? }}" data-token="{{ post.completion_token }}" class="btn"> {% if post.completed? %} Completed {% else %} Mark As Complete {% endif %} </a>

With this completion information you can display it however you like but one application would be to create a progress bar.

<div class="progress"> <div class="progress-done" style="width: {{ current_product.completion.percent }}%"></div> </div>

Progress tracking is also great if you want to add functionality into your theme that allows the user to pick up where they last left off.

{% assign product_completion_next = current_product.completion.next_post.url %} {% if product_completion == 0 %} {% assign resume_text = "Start Course" %} {% elsif product_completion == 100 %} {% assign resume_text = "Retake Course" %} {% assign product_completion_next = current_product.categories.first.posts.first.url %} {% else %} {% assign resume_text = "Resume Course" %} {% endif %} <a href="{{ product_completion_next }}" class="btn">{{ resume_text }}</a>

Here on the UX Team, we are so grateful for your time and we look forward to making the process of developing Kajabi themes simpler than ever before!

If you have any questions, feel free to reach out to us at themes@kajabi.com

Join Feedback Community

Enter your email below so that we can give you access to the Theme Developer Feedback Community.