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