Tip: How to Open Specific Guides Steps or Resource Centre Articles

Stefano D'Avascio

Updated March 15, 2024 12:56

Hey there! 👋

Are you looking to streamline your user experience by directly landing your audience on specific Guide steps or Resource Centre articles? Look no further! In this post, I'll guide you through a simple JavaScript snippet that accomplishes just that.

Before we dive in, a quick disclaimer: I'm not a developer, but I've tested and found success with this solution. However, please use it responsibly, and remember that I cannot be held responsible for any unexpected outcomes. Now, let's get started!

The JavaScript Snippet:

Here's the straightforward JavaScript snippet you can use:

// LATEST WORKING UPDATE: 05 March 2024
// Create a custom function to include on your web page
// Parsing 2 props: guideID and stepN
// No need to change the following code
function launchGuide(guideID, stepN) { 
    // Using setInterval to run the guide a few times
    runningGuide = setInterval(() => { 
        // Show the guide using the ID parsed in the launch code
        pendo.showGuideById(guideID);
        // Define the guide variable to be used in the next step
        const guide = pendo.findGuideById(guideID);
        // Skip to the desired Guide Step 
        pendo.goToStep({ destinationStepId: guide.steps[stepN-1].id }); 
        // Run every 10 milliseconds (not ideal, but it works)
    }, 10);

    // Stop running the code after 3 seconds (found this to be effective during testing)
    setTimeout(() => { clearInterval(runningGuide); }, 3000);
}

To use this snippet, simply customise the props on the element click, either via JavaScript or inline HTML.

HTML EXAMPLE:

<button onclick="launchGuide('YOUR-GUIDE-ID-HERE',STEP-NUMBER)">Demo</button>

JS EXAMPLE:

const myButton = document.getElementById('my-button')

myButton.addEventListener("click", () => {
  launchGuide('YOUR-GUIDE-ID-HERE',STEP-NUMBER)
});

Notes:

Replace 'YOUR-GUIDE-ID-HERE' with your Guide's ID (a string), and STEP-NUMBER with the desired step number (a number).
Double-check and test the following in case the script isn't working:
- Is the Guide live?
- Is the Guide Segment excluding your account?
- Is the Guide URL restricted to a specific page?
Where to find the Guide ID:
- You can find the ID within the browser URL when you're on the Guide page.

- Alternatively, open the Pendo debugger by typing the following script in the browser console:

pendo.enableDebugging()

Opening a Resource Centre Article:

The same script can also be used to open Resource Centre articles!
Just replace the ID, while the STEP-NUMBER should be set to 1.

Note:

Where to find the Resource Centre article ID?
Look for the ID within the browser URL when you're on the Resource Centre page.

Thank you for reading! If you have any questions, feedback, or success stories, feel free to share them in the comments below. Happy guiding! 🚀

Comments

20 comments

Howard Lio
June 18, 2021 18:08

This is awesome Stefano D'Avascio! This going to be so helpful for the Community when building out our guides!

0
Carolynn Rodon
June 18, 2021 18:16

This is great Stefano D'Avascio thanks so much for sharing!

0
Lyndsay Farrar
July 13, 2021 14:40 (Edited July 13, 2021 20:04)

Awesome!! This is exactly what we are looking for. I'm not a developer either :) Stefano D'Avascio Can you provide a little more information or screenshots on where to enter this info in the Pendo Designer? We are trying to launch the Resource Center from the last step in a guide. I tried including it in a custom code block but it doesn't seem to work. Any help appreciated. Thanks!

0
Stefano D'Avascio
July 16, 2021 07:09
Hi Lyndsay Farrar! Great to hear this is (hopefully) gonna help you!

To answer you question, the JS snippet illustrated above (toggleGuide(guide,step)) should be added to your app main JS file or a separate JS file that gets loaded by default, if that makes sense?

Below a basic HTML structure to explain where to place the JS snippet:
```
<html>
  <head>
    [Your meta tags here]
  </head>
  <body>
    [Your app content]

    <script src="your-pendo-guide-snippet.js"></script> <-- place your snippet here
  </body>
</html>
```
NOTE: if instead, you wish to open the last step of a specific guide from different guide, you can embed the JS snippet within the JS tab of a code block.

Looking forward to hear from you.

Please do let me know if that wasn't clear!
0
Stefano D'Avascio
July 16, 2021 08:50

Hey Lyndsay Farrar, I've just read again your problem (sorry).

I've been testing the snippet again, and I've got a couple of questions for you:

A. The Resource Centre has an ID, but the Article you want to open also has an ID, the URL looks like this
Are you replacing the ID with the entire thing (articleID+@+resourceCentreID)?

B. Is the Resource Centre Article live?

0
Lyndsay Farrar
July 26, 2021 16:35

Thanks Stefano D'Avascio! Our Resource Center isn't live yet and we wanted to open the Resource Center without going directly to a specific article within it. We were exploring a few options, this being one of them. I think we landed on creating a new separate guide that targets the Resource Center badge. We followed this video https://youtu.be/nwOSWMInd1Y

1
Stefano D'Avascio
July 26, 2021 17:00

Hey Lyndsay Farrar, yeah that's an alternative, but then your users will have to at least click once to open the RC.

The method described in the post opens the RC on a specific article as well as its main view, you'd only need to use the RC ID instead of the article one.

0
Alexis Ordona
November 18, 2021 17:22

Stefano D'Avascio Hello! I am trying to use your steps to open the Resource Center Article but I cannot find my ID. Do I need to open the actual module? I don't see my url change to include the ID. Thanks for your help!

0
Stefano D'Avascio
November 18, 2021 20:07 (Edited November 18, 2021 21:23)

Hello Alexis Ordona! You should see the ID within the URL navigating into your Pendo Resource Center.
So going to Pendo and to your RC, the address bar should display the ID within the URL. Is that not happening to you?

0
Alexis Ordona
December 02, 2021 18:23

Stefano D'Avascio Ah I think I got confused that this opens a particular module, not a specific Help Center article in the Resource Center. I see the module ID in the URL now.

0
Stefano D'Avascio
December 03, 2021 10:51

Alexis Ordona you should be able to target a specific module in the RC:

- Open the RC module details https://share.getcloudapp.com/YEuP2ypR
- Find the module ID in the browser address bar https://share.getcloudapp.com/qGuRWvvQ

Check also the following
- The module has to be live
- The segment chosen may impact who sees this

Hope that helps?

0
Brian Johnson
May 06, 2022 13:45

Stefano D'Avascio great article, thanks for posting. I'm still pretty new to Pendo but this is exactly what I need for one of my use cases. I was able to get your code working to open the guide by ID, but it only opens to the first step and won't open to the step number (numerical value) called by the function. I'm calling the function from a tooltip that is targeted to the same element as the desired step (numerical value) in the guide I'm opening. I'm hoping to use this function so I don't have to duplicate steps from that element forward. Any ideas or suggestions?

0
Stefano D'Avascio
May 06, 2022 15:41

Hi Brian Johnson! I'm glad to hear this article is being helpful!

Before I start looking into it, I've got a question for you, are you entering the step number as a number or a string? If I remember correctly it should be just a number (e.g. 2 and not "2").

0
Brian Johnson
May 06, 2022 16:27

Stefano D'Avascio I appreciate the help. It's definitely a number. I used your HTML sample to keep it simple until it's working. Here is a copy:

<button onclick="toggleGuide('EFQBdmekGXScCHbhom_Jbz2XUaM',6)"><b>Open Guide</b></button>

0
Stefano D'Avascio
May 09, 2022 06:59

Hey Brian Johnson, sorry for the late reply.

I would invite you to double check if everything is active:
- Is the guide published?
- Is the guide active?
- Is the right segment?
- Is the target element on the page?

If all the questions above are checked, I found this interesting Pendo article for the debugger you may want to give it a go? https://support.pendo.io/hc/en-us/articles/360034229512-Why-is-my-Guide-not-displaying-

0
Rick Sapir
October 14, 2022 16:09

Thanks for the snippet Stefano D'Avascio! I'm trying to use this to go from an existing guide to a step in a different guide. For example, on step 4 of guide A, I want to be able to jump to step 6 of guide B.

The toggleGuide function doesn't seem to work if a different guide is already visible. Any suggestions on adapting this for my usecase?

0
Stefano D'Avascio
November 28, 2022 12:07
Rick Sapir I apologise for the late reply, but it wasn't my fault as Pendo had issues with logging in for EU customers!

I tweaked the code a little to make sure Pendo has the time to look into the desired guide you want to pull up. So I delayed the goToStep function:
```
function toggleGuide(guide,step) {
    pendo.findGuideById(guide);
    pendo.showGuideById(guide);  
        
    setTimeout(() => {
        pendo.goToStep({destinationStepId: pendo.getActiveGuide().guide.steps[step-1].id});
    }, "100")
}
```
Demo -> https://www.screencast.com/t/73A5Ko1ysC

Please do let me know if that works for you! I'm really looking forward to your feedback so I can improve this tip!
0
Stefano D'Avascio
November 28, 2022 12:15

Also - I'd recommend not using Pendo Preview feature but rather creating a segment with your email and testing it with the Guides Live!

0
Rick Sapir
June 16, 2023 13:43 (Edited June 16, 2023 13:52)
Stefano D'Avascio: Sorry for the delay, but I'm back on this now.

I'm having a similar issue as noted above, with the link opening only the first step of the target guide.
- My snippet includes: onclick="toggleGuide('q25u73AHYgDH0Zc8Gciq2SchZcY',3)"
- Both guides (source and target) have the same segment and page location
- I'm testing in my staging environment (not from the preview feature)
Experimenting with the delay, I'm able to get target to open to the correct step, but there's a brief "flash" of showing the initial step (1) of the target tour.
0
Stefano D'Avascio
July 04, 2023 14:35

Hi Rick Sapir! Any luck finding the solution that works for you?

I tried looking you up on Pendomonium's Slack workspace but couldn't find you. Perhaps it would be worth it if you'd join to have a more seamless conversation.

0

Please sign in to leave a comment.

Didn't find what you were looking for?

New post