Activate guide steps on different pages

In most cases, guides appear on the Page where they're activated. In this case, we want the guide to activate after an interaction on one Page, but to display when the user arrives at a different Page. This approach is useful for guiding users through multi-step processes that start on one Page and continue on another.

Visit the Pendo Academy for a video on how to activate guides steps on different pages.

Configure guide segment and activation

To start, create and configure a guide. 

1. Create a guide in Pendo.
2. Define your target user segment for the guide to ensure its relevance.
3. Go to the initial Page in your product where you want the guide to activate.
4. Select View Steps and then select the Edit icon on the Activation step.
5. Set the activation method to Target element and select the specific button or element on the initial Page that'll start the guide.
6. Confirm that the activation was set to the correct target element.

Configure a hidden starting step

Now configure the first guide step to act as a hidden step for advancing the guide to the second Page. Your guide now has a first guide step already created, and you're still on the initial Page in your product where you want the guide to activate.

1. Ensure the backdrop option under Styling is turned off.
2. In the Location tab, set the Page location to Only on this page.
3. Add a code block to your step.
   1. In the Javascript tab, add the following rule to move the hidden guide step forward without requiring any action from the user:

      pendo.onGuideAdvanced();

   2. In the CSS tab, add the following rule to make the guide invisible:

      opacity:0;

4. Select Done to finish. The hidden step is invisible and you can only see it in the guide steps.

Create a visible guide step

Add a new step to the guide. This will be the second step of the guide, but the first visible step to users.

1. In the Visual Design Studio, select Navigate and go to the Page where you want to display the first visible guide step.
2. Select View Steps and then select Add Step.
3. In the Add New Step page, select the required layout for the new step.
4. Select your target element.
5. In the Location tab, set the Page location to Only on this page.
6. Customize this step to match the specific context of the user's journey on this Page.
   
   
7. Add any additional guide steps as needed.

Test the guide

Your guide is now set up to start with a button selection on one Page and deliver guidance on another. To ensure a seamless experience, it's highly recommended to test the guide and its transitions between Pages.