Can I have a guide advance to another guide?

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:

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);