A checklist with a progress bar that ticks off as members finish setup.
Where this fits
The tour shows members around once. A checklist keeps them moving, and it saves their progress in member JSON, like the data you worked with in the last journey.
By the end of this lesson you can
Build a checklist that saves completed steps to member JSON
Add a progress label, percentage and bar that update as steps are ticked
Celebrate when every step is done
Lesson notes
How it works
How the onboarding checklist remembers progress
MemberScript #212 saves progress in the member's JSON under a key called onboardingProgress. It holds steps, a list of the step IDs the member has completed, and dismissed, which turns true when they close the finished checklist. Because it's saved on the member, progress follows them to any device.
When a member clicks an item, the script adds or removes that item's step ID, saves the JSON and redraws the checklist. It counts completed steps against the total, then updates the label (for example "2 of 4 steps completed"), the percentage and the width of the progress bar. Completed items get data-ms-completed, which the script's CSS uses to strike through the text and fill the checkbox.
Set up the checklist in Webflow
Paste MemberScript #212 into the page or site body code, then add the attributes.
1Wrap the checklist in a div with data-ms-code="checklist-container".
2Add a progress label with data-ms-code="progress-label", a percentage with data-ms-code="progress-percent" and the inner bar with data-ms-code="progress-bar".
3Give each item data-ms-code="checklist-item" and a unique ms-code-step, like ms-code-step="profile" or ms-code-step="workspace". These IDs are what appear in member JSON.
4Inside each item, put data-ms-code="checkbox" on the checkbox and data-ms-code="item-content" on the text.
5Publish, tick items as a test member and check the member's JSON in the dashboard.
What happens when every step is done
The current script shows an element with data-ms-code="celebration-overlay" when progress hits 100%. A button with data-ms-code="dismiss-btn" sets dismissed to true and hides the checklist for good. To send members on to their dashboard, put a link to it in the overlay. The completed styles (strike-through colour, checkbox fill) are CSS rules at the top of the script, so edit them there to match your site.
Before you move on
0 of 5
Tick these off on your own site. Done with all of them? You’re ready for the next lesson.
Up next: Next, you’ll group members by plan, activity and more with Segments.
Chapters
Common questions
Where does the onboarding checklist save progress?
In the member's JSON in Memberstack, under onboardingProgress, as a list of completed step IDs plus a dismissed flag.
Will members lose their progress if they switch devices?
No. Progress is stored on the member, not in the browser, so it loads wherever they log in.
Can I add more steps later?
Yes. Add another item with a new ms-code-step ID. The total and percentage are counted from the items on the page.
Hey, Mah Memberstack here and welcome to members group 212. In this video, I’m going to show you how to create a simple onboarding checklist like this. Users will be able to mark off items that they have completed during the onboarding process. And once they’ve fully completed the onboarding checklist, they will then be redirected to their dashboard. All right, let me show you how to set all of this up inside of Webflow. In Webflow, you are going to need to add members script 212. And it should look like this. If you’re watching this on YouTube, the
0:30
link to that code should be in the description below. And if you’re watching this on the members site, then you should have already seen the code. You can either add this sitewide or on a specific page depending on your specific use case. On the page itself, you are going to need to add the following attributes in order to make this work. We’ll have a div that will essentially act as our checklist container. And on that, you’re going to add the attribute of data MS code checklist container. Within that, there is an onboarding heading. You can title this whatever you want. And then we have
1:01
the progress bar. So for the progress bar, we have over here our progress label with the attributes of data MS code progress label and then our percentage will have the attribute of data MS code percentage or progress percent. And then for our actual progress bar inside we have a progress bar here with the attribute of data MS progress bar. Okay. Now to set up the checklist items.
1:32
On each item you’re going to add the attribute of data MS code checklist item. And then for each item it will have a specific um identifier. For example, this is to complete your profile. So this will have MS code step profile. And the next one will have MS code step workspace. And you can just title them this way in order to have them displayed in the users’s JSON like this. So in the user’s member JSON, you’ll be able to see the steps that that user has completed. And then when they have fully completed all their
2:04
onboarding checks, then this dismissed will be set to true. Okay. For the checklist itself, we have a checkbox over here and that has the attribute of data MS code checkbox and then when every time a user has completed a checklist item, these items get stripped out. So we have an item content wrapper over here with the attribute of data is code item content. Certain styles like when a user has marked off an item as
2:35
completed will be controlled by the script over here. So if you head over to the script, you’ll be able to see that there is a little bit of CSS here when a item is marked off as completed as well as when that checkbox item is completed over here. And then we also redirect a user to a certain page. And you can either leave them on this page or just redirect them to a completely different page by changing this different page by changing this URL over here. Okay, that is it. If you have
3:06
any questions on this, feel free to reach out in the Slack 2.0 channel. Bye.
This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.