Tip: Open Guide (or Resource Centre) on a desired Step (or RC article).

Stefano D'Avascio

Updated November 28, 2022 12:11

Hi there 👋,

This post explains how to open a Guide (or the Resource Centre) and land directly on the desired Guide step (or Resource Centre article).

A quick note before you keep reading: I'm not a developer! The following suggestion worked for me but I take no responsibility if the world collapses because you used this script 🌋.

Let's cut to the chase, here is the simple JS snippet I made up:

// Create a custom function to include to your web page
// Parsing 2 props guide and step
// No need to change the following code
function toggleGuide(guide,step) {
    // Well, show the guide by using its ID.
    // It's also possible to use its name pendo.showGuideByName(guide).
    pendo.showGuideById(guide);
    // Snippet for defining the step destination 
    pendo.goToStep({destinationStepId: pendo.getActiveGuide().guide.steps[step-1].id});
}

If the above is not working try this update here -> https://support.pendo.io/hc/en-us/community/posts/1260803980810/comments/10719811764635

Then you only need to customise the props on the element click (via JS or inline HTML), for this example, I'll use the inline HTML:

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

NOTE 1:
The YOUR-GUIDE-ID-HERE is a string, the STEP-NUMBER is a number.

NOTE 2:
Things to double-check and test in case it may not be working:
- Is the Guide live?
- Is the Guide Segment excluding your account?
- Is the Guide URL restricted to a specific page?

NOTE 3:
Where do I find the Guide ID?
Go to your Guide page and you'll find the ID within the browser URL (see the image below).

Opening a Resource Centre article

The great thing is that the above script also works for the Resource Centre!

You'll only need to replace the ID, while the STEP-NUMBER should be 1.

NOTE 1:
Where do I find the Resource Centre article ID?
Go to your Resource Centre page and you'll find the ID within the browser URL (see the image below).

Thanks for reading and I hope this helps. Add questions, feedback, or success stories in the comments below!

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