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

Hi there 👋,

This post explains how to open a Guide (or the Resource Centre) and land directly on a 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});
}

 

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 image below).

 

Opening a Resource Centre article

The great thing is that the above script work for the Resource Centre as well!

You'll only need to replace the ID, while the STEP-NUMBER should be set as 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 image below).

 

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

4

Comments

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

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

    0
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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

Please sign in to leave a comment.

Didn't find what you were looking for?

New post