activate guide if an on-screen element is MISSING
My application has different features that are enabled only when a user is granted permissions to see that feature in our user management tool elsewhere. For this reason, it's often not obvious to a new user that they're not seeing all the features that they COULD see if they were granted the proper access. For this reason, I'd like to trigger a Pendo guide for my users, but only if the button/link for this feature is missing from their screen. The logical sequence would be something like:
- User loads my application in their browser
- IF the new feature is visible on-screen - Pendo does nothing
- IF the new feature is NOT visible on-screen, then Pendo triggers a guide w/o any further action by the user (i.e., they don't need to click or hover, simply the absence of a visual element activates the Guide)
From my searching it seems like this might be possible using a custom CSS rule? (I'm not a developer and don't know how to set this up if that is the best option)
So, are there other ways besides custom CSS to do this? Or if custom CSS is the only way, any advice on how to implement?
Thank you!
コメント
Hi Ben
What you could do is have the guide targeted to fire for both scenarios (2 and 3 above) but have a small piece of custom Javascript (rather than CSS) which will execute immediately when the guide launched and which dismisses the guide if the ID of the element (representing the feature) is part of the page.
(function() {
// Check if the element with ID #myfeature exists
if (document.getElementById('myfeature')) {
// Dismiss the Pendo guide if the element is found
pendo.onGuideDismissed();
}
})();
You will need to know the ID of the feature on the page.
Thanks for the reply, alan.stephens -- this seems promising. A couple more dumb questions -- I said I'm not a developer... ;-)
1. Where does the Javascript get entered? Is it something configured as part of the Pendo Guide activation criteria?
2. Where do I find the ID of the feature? I assume I'll need to "inspect" the page, I just don't know where in the syntax to find what it is I need.
-Ben
Hey Ben
1. You need to add a custom code block to your guide via the Designer. If you don't have this option, then your plan may not support custom code blocks and unfortunately, the option I suggested won't work for you unless you upgrade.
2. I highly recommend installing a Chrome extension called the Pendo Tagging Aid. https://chromewebstore.google.com/detail/pendo-tagging-aid/jhbhgbhjadlmnigleahdiainjdhomdgn
That will make it easier for you to see the IDs of anything on your product page without needing to inspect the page.
For more info:
https://support.pendo.io/hc/en-us/articles/360032206011-Customize-your-guides-with-code
https://adoptpartners.pendo.io/hc/en-us/articles/4407168067355-Pendo-Tagging-Aid
サインインしてコメントを残してください。