Can I have a guide advance to another guide?

Last updated:

First you’ll want to take note of the class of the HTML button you would like to pick up this functionality. It is recommended that you create a new button rather than using one provided by Pendo in order to avoid any code collisions. Below is an example of what that button code might look like:

<button class="your-button-class">Next Guide</button>
 

You’ll also need the ID of the guide you would like to call. You can find an example of where to locate the ID of your guide below:

guideId.png

Once you’ve taken note of your button’s class and the target guide ID you can simply copy the below Javascript snippet and replace the BUTTON-CLASS-HERE (leaving the initial period) with the actual class of your button and the GUIDE-ID-HERE with the ID of the target guide:

(function wireNextGuideButton(step) {
    step && step.attachEvent(step.guideElement[0], 'click', function (e) {
        var advanceButton = pendo.dom(e.target || e.srcElement).closest('.BUTTON-CLASS-HERE');
        if (advanceButton.length) {
            pendo.onGuideDismissed(); //This command dismisses the current active guide
            pendo.showGuideById('GUIDE-ID-HERE'); // This command will show the guide of the ID provided
        }
    });
})(step,guide);
 

Items to note:

  • The above code snippet is offered as-is.
  • The guide you are targeting must be included on the page you click this button from.
  • The snippet is designed to be included in the JS tab of your guide

This above process is not to be confused with a general transition to the next step of a walkthrough guide. If that is the desired effect, then you would use the default code for a transition based off the next button javascript outlined below which is included in every advance-button by default:

(function wireGuideAdvanceButton(step) {
    step && step.attachEvent(step.guideElement[0], 'click', function (e) {
        var advanceButton = pendo.dom(e.target || e.srcElement).closest('.BUTTON-CLASS-HERE');
        if (advanceButton.length) {
            pendo.onGuideAdvanced();
        }
    });
})(step,guide);
 
 
Was this article helpful?
1 out of 4 found this helpful