Element Hero allows you to automatically show or hide individual elements on a webpage based on either:

  • Time spent on the page.
  • Progress through a video.


One of our favourite uses for Element Hero is on a VSL page.


For example, your page can initially contain nothing but your video before automatically revealing the purchase button when the video reaches the offer.

Setting Up Your Element Hero:

  1. Create a new Element Hero, choose your integration and give your Hero a clear name and optional label.

  2. Enter the URL into the Page Containing The Element field. This is the webpage containing the button, section, image or other element you'd like Element Hero to control.

  3. (OPTIONAL) If your trigger will be based on video progress and there are multiple videos on the page, enter all or part of the relevant video name. If there is only one video, you can normally leave this blank.

  4. (OPTIONAL) Enable Forward Email Address To The Page if you want the subscriber's email address to remain available in the URL.

  5. Choose whether you'd like to enable Smart Appearance.

What Is Smart Appearance?
Smart Appearance allows Element Hero to remember that a particular subscriber has already reached your trigger point.

For example: You have a five-minute video and your purchase button appears at three minutes. The subscriber watches three minutes and the button appears.

If they leave and return later:
• Smart Appearance ON: The button will already be visible.
• Smart Appearance OFF: They will need to watch the video to three minutes again.


  1. Click Save & Get Code.

  2. Copy the appropriate embed code and add it to your webpage. Use the normal webpage code for a regular page, or the membership-site version if the content sits inside a members area.

  3. Publish the page.

  4. Set the Trigger Duration using the hours, minutes and seconds fields.

  5. Choose your trigger type:
    • Time On Page - The trigger occurs after the subscriber has had the page open for your specified amount of time.

    • Video Progress -  The trigger occurs when the video itself reaches the specified playback time. For example, 3 minutes of Video Progress means the video must actually reach the three-minute point.

  1. Choose the action:
  • Show Element - If you select Show Element, the element will initially be hidden before appearing when the trigger is reached.

  • Hide Element - If you select Hide Element, it will initially be visible and disappear when the trigger is reached.

  1. Use the page-element selector to open your webpage and click the exact element you'd like Element Hero to control.

  2. Save your changes.

Triggering Your Element Hero:

You'll normally have two main options:

  • Thank You Page URL - Use this when somebody reaches the page after completing a form. 

  • Link Click URL -  Use this when directing somebody to the page from an email.

IMPORTANT: If you're using features such as Smart Appearance, use your AutomateHero Link Click URL rather than simply linking directly to the normal page. This allows Element Hero to identify the subscriber and remember their individual progress.

Once you've tested everything:

  • Turn Test Mode OFF.
  • Make sure your Hero is Active.
  • Save your changes.

That's it - your Element Hero is ready to go!