Show guide inside a div on a page

• 

  Ryan Durbin

  November 17, 2023 17:43

  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: https://stackoverflow.com/questions/20173101/copy-the-content-of-a-div-into-another-div.

  CSS:

  display: none !important;

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

  JS:

  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.

  0

Please sign in to leave a comment.