Onboarding module - URL redirect after clicking checklist item
I have an Onboarding Module for setting up a specific part of our site, but each checklist item needs to direct the user to a different page of the site. How can I set a Guide hyperlink in the Onboarding Module to go to a URL first and then display the guide? Right now, if a user opens the Resource Center on the dashboard and clicks 'step 1' which is specific to a certain page, the guide just opens on the dashboard completely out of context. I need to take the user to that page. I would prefer to not do multiple guides to point to the navigation items to get there, I want it to take them directly there.
0
Comments
Hi Anna Luckey, if your app does not have dynamic URLs for example something like the following.
cust1.app.com or cust2.app.com then you can use guide permalinks directly, follow the instruction provided in the link to redirect the user to any page you want and trigger the first step of your onboarding guide on that page.
If in case your apps URL is dynamic and changes with every customer like it did in my case (see example above), then we can solve this using code blocks provided you are getting the dynamic value used within the app URL passed via a metadata to pendo agent from your application.
In my case our URL was cust_name.app.com and we are passing the cust_name metadata to pendo agent as well.
In order to build the custom permalinks user the below code snippet in a code block in your guide.
HTML
<!--Exposing hidden metadata from the guides HTML-->
<span class="_pendo-hidden-account_"><%= metadata.account.name %></span>
CSS
/* use the bellw line to hide the metadeta value fetched by the html code */
._pendo-hidden-account_ {
display: none;
}
Javascript
(function wireNextGuideButton(step) {
step && step.attachEvent(step.guideElement[0], 'click', function(e) {
// use 1 or more button of same category like primary buttons in your guides then use the unique id of the targete button you want to trigger the dynamic permalink, if you just have 1 primary button
// then you can directly using the button class.
var advanceButton = pendo.dom(e.target || e.srcElement).closest('button_class_goes_here');
if (advanceButton.length) {
// get the text value of the fetched metadata to be used ahead.
var account_name = document.getElementsByClassName("_pendo-hidden-account_")[0].innerHTML
// build your URL by using the variable above, you can use the same method to place the valriable anywhere in the URL as per required.
var newurl = "https://" + account_name + ".abm.app.com/settings/manage?pendo=guide_id_goes_here"
//Finally dismissing the current guide to trigger the permalink.
pendo.onGuideDismissed();
// Opening the dynamic permalink url in the same browser tab.
window.open(newurl, "_self");
}
});
})(step, guide);
PS: Adding this code into any guide with button will result in relading of the target page and trigger the next guide in sequence, emaple below.
How to get button_class -> open your guide in pendo designer and then right click on top of the button you want to use for permalink and then click on inspect, in the html find <button id="pendo-button-03fd0c49", pendo-button-03fd0c49 is what we what we are looking for, add # before is and then add it to you the code above like #pendo-button-03fd0c49.
Each button in this guide reloads the page with a new URL the page where user has to do the setup.
hope this will solve your issue, feel free to reach out on LinkedIn case if you have any issues.
Hi Rohit, I'm not sure this is solving my problem. I've recorded a quick video walking through what I want it to do and what I'm seeing. The issue is that there is no place to define the URL/permalink or add code to an Onboarding Module in the Resource Center.
https://www.loom.com/share/9318a012b4eb4210a9fedd3c57771344
Thank you
Hi Anna Luckey understood, you will have to combine 2 solutions here.
Step 1: check this link for building a custom code block with the titles of your choice as per your guides.
Step 2: Use permalinks to your guides and add them to the code above.
Anna Luckey did you find a solution? A less elegant one would be add a launch step to your guide that introduces the guide (sitewide) whose NEXT button points to the page where the guide should continue.
Eric Miller yeah that's what I ended up doing. Thanks for checking!
Showing an additional guide as an introduction seems like not the best solution. Did anyone try a different approach?
Please sign in to leave a comment.