Branching Guide Based on Element Click

I am hitting a roadblock trying to come up with code that will tie to more than one element but function differently based on the element clicked.

I started with

https://github.com/pendo-io/snippets/tree/master/guides/advancingGuides/advanceOnMultiElementClick

but I want to make it so if they click the first element the guide advances two steps ahead, and if they click the other element it only advances one step.

I also tried using code from

https://developers.pendo.io/docs/?bash#onguideadvanced

but that I can't get to work at all with advancing more than one step for some reason even when only connecting it to one of the elements that could be clicked.

Are there any examples of multiple element selection to advance guides differently based on the element clicked?

I also tried using the code from

https://github.com/pendo-io/snippets/tree/master/guides/goToGuideStep/skipStepNoElement

to advance to a specific step but couldn't get that to work either.

 

Here is my last iteration and I am sure I am missing something in a big way...

// Immediately-Invoked Function Expression, named to make debugging easier...

(function wireGuideAdvanceButton(step) {

    // `GuideStep.attachEvent` is a cross-browser compatible version of `addEventListener`...

    step && step.attachEvent(step.guideElement[0], 'click', function (e) {

        // `pendo.dom` is a lightweight jQuery-like DOM selection API...

        var advanceButton = pendo.dom(e.target || e.srcElement)

            .closest('[data-locator="button-save"]');

         var advanceButton2 = pendo.dom(e.target || e.srcElement)

          .closest('[data-locator="button-save-and-close"]');

           

            if (advanceButton.length) {

        // Advance _two_ steps ahead in the current Guide...

            pendo.onGuideAdvanced({ steps: 2 });    

        }
     

           if (advanceButton2.length) {

        // Advance to the next Guide Step...

             pendo.onGuideAdvanced();

        }

    });

})(step, guide);

// The `step` and `guide` are made available inside the Guide JS...
1

Comments

0 comments

Please sign in to leave a comment.

Didn't find what you were looking for?

New post