Activate guide steps on different pages

In most cases, guides appear on the page where they're activated.  This article explains how to show a guide on a different page than where the activation occurs—for example, when a visitor completes an action on one page and you want the guide to appear after they arrive on another. This approach is useful for multi-step workflows that start on one page and continue on another. Visit the Pendo Academy if you prefer this article in video form. 

If your goal is instead to guide visitors step-by-step across multiple pages within a single guide, this isn’t the right approach. For that use case, see this other Pendo Academy video on creating multi-page walkthroughs. It explains how to use guide button actions to move visitors to the next page, or use tooltips to teach visitors how to navigate between 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:

      if (!pendo.designerEnabled){
      opacity:0;
      }

4. Select Done to finish. Although the guide step is visible in Designer, it will be hidden when the guide is displayed. 

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.