How to Create Dynamic Progress Tracking in Memberstack and Webflow CMS Collections Answered
EDIT:
I figured it out myself.
If anyone is reading this I can help you do this too, I figure there are probably more people out there looking to do this same thing: Mark as complete functional buttons, as well as completion percentage displayed as a progress bar using webflow cms items with dynamic JSON values from current memberstack user.
Works on multiple levels of hierarchy; mine has Course, Module, and Lesson structure, so both Courses and Modules have their own completion percentage display, even though modules live inside courses. Also updates in live time, so as they click to mark something complete, it updates across the site.
email gfxblake@gmail.com to get help with this.
______________
I haven't found a comprehensive way to do this with low-to-no code. Some JS is ok, but the site we are building is in webflow, so any custom code would preferably be no larger than the usual memberstack API stuff, plus a script to calculate the percentage based on current member JSON data.
I have seen some posts online having to do with custom js that constructs the course manually by JSON groups and values, then does the math, but... one, I havent been able to get those to work; and two, we need this to be able to live inside of a cms collection on webflow so that when we add to it or change it, the code (and the math) don't break.
Essentially needs to be completely dynamic. Even if that means the custom code lives in an embed that pulls the code from rich text elements inside of collections.
What we need is to
- pull current user json data for course modules completed (right now that json group looks like: xxmodule1-lesson1: true [where xx is a manually generated 2-letter code to identify the course])
- pull the total number of lessons in a module [and # of modules in a course] from the cms in webflow
- do the math (so if: 10 lessons in module 1 [via cms data entry]; current user json data shows 2 lessons marked complete [via memberstack json]; then 2/10 = 0.2 [or 20%])
- then display that value as a % of width on a webflow div (where the outer div width is 100% and the inner div called 'fill' represents the progress bar, so that it's width is set to 20% to match the math from the custom code)
- and work for items in a collection so that uniformity can be achieved
This must be possible because other sites like kajabi and teachable have this feature and it only makes sense that the user json data is driving whatever script makes it work.
I do have a working code that adds a combo class to buttons that mark items in the course as complete, that fully functions with memberstack and elements inside a webflow cms collection, where the data attribute value is actually pulled from a custom field inside the collection, and accurately shows items marked as complete via custom styling on webflow to match the json data in the backend of memberstack. I can share this code with you if it helps, but what I'm saying is this does work with dynamic collection items. I suppose the hard part is making it do math on dynamic items.
The deadline for this project is coming up in a few weeks and this feature is at the top of our list. We would definitely pay for in-depth help on this, as this issue likely requires more time and skill than most forum quick-fixes. Email Blake at gfxblake(at)gmail(dot)com for this kind of thing.
Comments
10 comments
Hey Luke Alexander 👋 Have you tried working with the AI chat tool yet? It's pretty good at creating custom code. https://rey.memberstack.com/
Memberstack Team so far, I can't get past the public key question. I'm finding chat gpt more useful but the code chat gpt spits out never actually works. If I could get your bot to answer the question I'd let you know how its going...
> I ask the question
> it asks for pk
> I send pk
> "Let me think about that..." in the top right
> Something went wrong. Please try again
So in the last 2 weeks I posted job applications, posted in various forums, asked for help from a bunch of different webflow SaaS guys. Nobody even took a crack at it... So I figured it out myself.
If anyone is reading this I can help you do this since nobody helped me, I figure there's probably more people out there looking to do this same thing: Mark as complete functionality, displayed as a progress bar using webflow cms items with dynamic JSON values from current memberstack user.
Works on multiple levels of hierarchy; mine has Course, Module, and Lesson structure, so both Courses and Modules have their own completion percentage display, even though modules live inside courses. Also updates in live time, so as they click to mark something complete, it updates across the site.
email gfxblake@gmail.com to get help with this.
Hello Luke!
I've been looking for this solution as well. I've sent you an e-mail about this. Looking forward to your answer.
Best Regards,
Emil Rindell
Luke- I'm in the same boat. sent you an email. Love to hear what you came up with.
Hi guys, I need help. I want to show course progress like Webflow does on the Webflow university site. Can anyone tell me how I can do the same on my website?
In case, you have less number of courses or a single course, you can leverage CMS to store the progress of each user and have a custom tracker element on the front-end dashboard where you can link the progress value via CMS.
can you explain it little bit more, do you have any tutorial or something?
I am actually a No-Code Developer myself, I implemented this for a client by trying a lot of things. I am not sure if there is a dedicated tutorial for this yet.
But the idea here is to track each video's completion and add on to the % completed in the CMS for each user per course. You can then use this % value and tie it up on the front-end via html
I would use the JSON feature for this 👍 Rey the AI might be able to help you with the code. https://rey.memberstack.com/
Please sign in to leave a comment.