Targeting Page Elements

If your web app conditionally shows certain elements you may want to setup different tours for these different scenarios.

1. Check Page Element

Check the page for the element you are interested in and pass the result as user properties to HelpHero. In the following example we want to detect the presence of a warning button and show a tour:

<script>
  // update as appropriate to your element
  var warningButton = document.querySelector('#warning-btn');

  HelpHero.identify('<?php echo get_current_user_id(); ?>', {
    hasWarning: warningButton != null
  });
</script>

As well as checking the existance of certain elements you can check their content or attributes the following example checks the prize label to see if the content contains the text "winner":

<script>
  // update as appropriate to your element
  var prizeLabel = document.querySelector('#prize');

  HelpHero.identify('<?php echo get_current_user_id(); ?>', {
    isWinner: prizeLabel != null && /winner/.test(prizeLabel.innerText)
  });
</script>

2. Setup a Funnel

Now that you are tracking this as a user property you can setup a tour to only show if the element exists on the page or meets other criteria. In the HelpHero editor edit your tour and add a new Funnel Step after the first URL Match.

Please note if these elements shown based on user data we recommend using user property funnels instead as that will generally be a more robust solution.