Skip to main content
Submit a request

Using Hype Signals

  • Updated

Hype Signals are a quick way to communicate the status of a visitor to any element on your site. This can be useful if you want to change the appearance or toggle the visibility of an object based on a visitor's registration or payment status.

Adding a Connection

To establish a connection between Hype and an element, simply add "PicoSignal" as a class to the element.

Doing so will result in HTML attributes attaching to each of those elements once Hype has loaded on the page. The attributes will display values as listed below which you can then use in your CSS to customize the appearance of the element:

 

  • data-pico-email: The user's email address, if they are logged in.

  • data-pico-phone: The user's phone number, if they are logged in.

  • data-pico-first-name: The user's first name, if available.

  • data-pico-tier: The name of the tier to which the user is subscribed, if applicable.

  • data-pico-verified: This returns either "true" or "false" based on if the user has verified ownership of the email address associated to their user account, either by following a magic link or logging in with a social account.

  • data-pico-status: There are multiple values associated to this, depending on the condition of the site visitor.

  • data-pico-status="anonymous": The user is subject to the conditions of this rule, but has not registered or logged in. This is most common for "guests" or new visitors to a site.

  • data-pico-status="excluded": The user does not fall into an audience associated with this rule.

  • data-pico-status="registered": The user is logged-in, but is not making a recurring payment.

  • data-pico-status="paying": The user is logged-in, and making a recurring payment.

  • data-pico-ad-blocked: This returns a blank value if ads are not blocked, and returns a "true" value if ads are detected as being blocked.

 

Examples

  1. Hiding advertising blocks for paying subscribers. The example code below assumes advertisements are displayed in divs with a class value of advertising .

    Add the PicoSignal class to the advertising div tags and then specify the following in your CSS:
    div.advertising[data-pico-status="paying"]{display:none}

  2. Displaying a thank you message and hiding newsletter sign-up forms on your site for registered visitors.

HTML

<form class="PicoSignupForm PicoSignal">
<input type="email" id="subscribe" placeholder="Email">
<button type="submit">Signup</button>
<div class="subscriptionSuccess">Thank you for subscribing.</div>
</form>

CSS

.PicoSignal[data-pico-status=anonymous] .subscriptionSuccess {
    display: none;
}
.PicoSignal[data-pico-status=registered] .form {
    display: none;
}
.PicoSignal[data-pico-status=anonymous] .form, .PicoSignal[data-pico-status=registered] .subscriptionSuccess {
    display: block;
}

 

You can view a live example of Signals here!

 

Related to

Related articles