Onboarding Module - Customize Checklist
Hi all, we are setting live an onboarding module with 2 product tours that show the progress.
The tours are each around 10 steps, but only 5 are the "main" steps - aka the other guides are substeps or duplicates of the guides attached to different elements to accomodate a user's clicks. Is there a way to show 4 of 5 steps and customize the guide steps that are counted as progress?
0
Comments
Hi Qlik Migration Admin,
Thanks for your post in the Discussion Community and sharing this great use case.
I would recommend using this code snippet: https://github.com/pendo-io/snippets/blob/master/guides/customGuideAssets/progressBarBubble/progressBarBubble.html
You can add this snippets in code blocks on the 4 or 5 specific "main" steps you want to emphasize and leave the other 5 steps alone. Let me know if that works for you!
Thanks Howard! Is this HTML or Javascript? With HTML I am getting the
<li>Support</li>
<li>Investing</li>
<li>Content</li>
<li>Usability</li>
listed out in the step and java I'm still seeing 9 steps here:
Hi Qlik Migration Admin,
This should be HTML and you can tailor the list items to match your steps and are you saying that you see the progress bar account for all 9 steps?
https://github.com/pendo-io/snippets/tree/master/guides/customGuideAssets/progressBarBubble
Hey Howard, Ok, in HTML it is showing the text for support, investing, content, usability. can that part be removed?
I wasn't checking the progress bar but rather the step 1 of 9, still seeing 9 instead of 5
Hi Meghann,
Hi Howard, checking back in on this as I have much more knowledge of using custom code blocks in Pendo now. My goal is to show in the resource center only the steps that are relevant - so, as in the above picture, some of my tours have 9 guide steps, but to a customer I want to show "1 of 5" instead of "1 of 9" in the resource center. The progress bar bubble that you are sending seems to be a visual that shows up on the guides itself. I am trying to target the problem in the Onboarding Module of the Resource Center. Can this snippet still be used?
If not, I am checking these out: https://github.com/pendo-io/snippets/blob/master/resourceCenter/guideCenter%20(Legacy)/onboardingProgress/guideProgress/guideProgress.js
https://github.com/pendo-io/snippets/blob/master/resourceCenter/guideCenter%20(Legacy)/onboardingProgress/overallProgress/updateOverallProgress.js
Which I was hoping would help, but can't seem to figure out where they go - not in the resource center module.
Basically, I'd love to find a code that I can put in each guide step to indicate it as "visible step" or "hidden step", and then the onboarding module would display "<%current-step%> of <%total-visible-steps%>
Qlik Migration Admin,
I faced the same issue but a fellow community member suggested a workaround. Delete the content from the subtitle and don't show any step progress numbers. You will still see the visual circle completion giving a sense of relative completion and the full overall percentage and avoid # of steps confusion.
However if you have steps that don't always get viewed you will still struggle with showing guide and overall completion. The following code was shared with me that if used in a custom code block on the "last step" can trigger Pendo to consider the guide completed. You need a primary button to trigger this and ideally turn off the X to close to there is no other way out. The javascript below adds a listener to that "finish for now" button based on its class, and will mark the guide as complete in the onboarding module if it is clicked. (Thanks to Liz Feller for these resources)
//Find the last step in the guidelet guideLength = guide.steps.length - 1;let lastStep = guide.steps[guideLength];//When the specified button is clicked, dismiss the last step of the guide.//This will mark the guide 100% complete even if all steps were not completeddocument.querySelector('._pendo-button-tertiaryButton').addEventListener('click', function() { pendo.onGuideDismissed(lastStep);});
Please sign in to leave a comment.