Conditionally view a guide step
My manager wants us to offer guide "customization" to our clients, but use a single guide to add the custom content to. For example, let's assume I have a guide with seven standard steps that all customers should see. However, I have a client (Company A) that wants to insert an additional step between steps two and three that other companies should not see. I've read the information on the page linked below about guide variables, but I'm just not getting the syntax of how to program it in a Javascript block.
Would I insert the customized block between steps 2 and 3 and then somehow skip the step for the other companies somehow, or would I insert the custom step at the end of the tour, jump the user to that step if they belong to Company A, and then return them to the main flow after they've read the custom step? Any advice would be appreciated.
Have any of you tried this before?
https://support.pendo.io/hc/en-us/articles/360031869232-How-Do-I-Use-Guide-Variables-#overview
Comments
Hi Jim!
This snippet has been especially helpful to us: https://github.com/pendo-io/snippets/blob/master/guides/goToGuideStep/goToStepNoElement/gotoStepNoElement.js
We would create a new step (say for your example, step 3) that is just a custom code block and insert it. It checks for the element that the NEXT step is targeted to (step 4 in that case) and if it ISN'T present on the page, it skips to step 5. So if you had an element that only customer A has, you target step 4 to that element, and if it's customer A they would have the element present and the guide would go to step 4, and for anyone else that doesn't have it it would skip to step 5. This can also be done with this code: https://github.com/pendo-io/snippets/tree/master/guides/goToGuideStep/goToStepNoElement which does essentially the same thing except you can identify what step you want it to go to rather than just next 1/2 steps.
We have changed around this code to determine different things like if the URL has something (https://github.com/pendo-io/snippets/tree/master/guides/goToGuideStep/goToStepURLCheck). I presume you could check Agent metadata, like create an HTML variable for Account ID and say if Account ID = '2093420' go to step 4, otherwise go to step 5, etc if there isn't a specific element or page that Company A has.
For the skipstepnoelement and "goToStepNoElement" they are both checking for the element that the next step is targeted to, so you wouldn't want to put the custom step at the end of the tour. But you can if you want to - we have also adjusted to have it check for a specific element and identify it in the code. So rather than:
if (results.length === 0 || !pendo._.some(results, pendo.isElementVisible)) {
you instead define the results variable as
var results = dom('#my-element')
if (results.length === 0 || !pendo._.some(results, pendo.isElementVisible)) {
Meaning that you can identify the element that company A would have regardless of the order of the steps and their targeting, and go to any step you want. Not sure if that is the exact syntax for the results variable we are using, so if you end up trying it and it doesn't work let me know and I'll check. Let me know what you end up doing!
Meghann
Please sign in to leave a comment.