Show guide inside a div on a page


we want to show guides in our app inside predefined areas, like a DIV with a special id. So the guide should not overlay the page but it should be shown inside the prepared DIV and fill it.

Is this possible?



1 comment
  • You could probably achieve this with some custom code, but it would be messy and likely not recommended by Pendo. They would likely encourage you to work with your engineering team to create the content directly in the markup of the page, but if I were tasked with this from a front-end development perspective using Pendo I would create an "Invisible guide" where I author everything in step 1 of my guide as I'd like to see it, maybe in a lightbox.

    I would require a code block in the step that would do something similar to what's done here:


    display: none !important;

    this will hide the guide itself from the typical Pendo view in a lightbox


    var firstDivContent = document.getElementById('<pendo step id>');
    var secondDivContent = document.getElementById('<product div id>');

    secondDivContent.innerHTML = firstDivContent.innerHTML;

    This guide would need to be segmented to the page where the div exists and activated automatically. I can see a situation where the UI div wouldn't be populated if the guide doesn't launch on page load for a number of reasons, but this is worth a try if you have someone comfortable enough with HTML/CSS/JS.


Please sign in to leave a comment.

Didn't find what you were looking for?

New post