Auto-focus guide steps to target element?
Hey everybody!
We're trying out Pendo with our SAAS solution to provide on-site guides to core functionality for new users. So far we're really enjoying the features, but we are struggling a little with the setup.
The thing is, much of our core functionality works with modals on the main site. Some of these modals are too long for "one" screen, and so requires some vertical scrolling to see the entire modal.
We've tried setting up a guide with the step locations anchored to specific elements on a modal, but trouble arises once the target elements are "outside" what is viewable without scrolling. It seems like the scroll bar is completely disabled while the guide is active, and the view doesn't follow the steps. So then the users will be soft-locked in the guide as the final steps are outside their view with no way of scrolling to see the steps.
So my question is:
Is there a way to make the user's view auto-focus to the currently highlighted step or target element in a guide?
Or alternatively, is there a way to work around this limitation?
Comments
Did you identify a solution for this? We're trying to solve a similar issue. Curious if auto-focusing the user's view to the currently highlighted step or target element in a guide is feasible.
Hi Jon,
No, sadly we never did find a workaround. Best of luck to you!
I was able to get our guides to automatically scroll by adding this "javascript" code to the guide step.
document.querySelector('.reasons-expansion-panel').scrollIntoView({block: "center",inline:"center"})
The '.reasons-expansion-panel' is the element that the guide step is anchored too.
Jack O-Leary Thanks for sharing, Jack! This JS solution is very helpful.
Jon Corwin slightly off topic, but do you have an idea on how I might use the document.querySelector approach to search for an element on the page as the target for my guide? It's not off the screen, but rather in a disabled state. I can't find custom CSS that works in the Visual Designer to target that element, but thought maybe through JavaScript?
@Eric Miller, targeting a disabled element using JavaScript should be feasible. If I understand your use case correctly, you'd want to use the ':disabled' CSS pseudo-class selector to target it. You may find this JS example helpful: https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled#javascript
Please sign in to leave a comment.