How to use Pico Signals to further enhance your site
What are Pico Signals and how to use them:
Pico Signals are a quick way to communicate the status of a reader 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 reader's registration or payment status.
To establish a connection between Pico and an element, simply add:
"PicoSignal" as a class to the element.
Doing so will result in up to 4 HTML attributes attaching to each of those elements, once Pico 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-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.
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}Check out a live example of using Signals on our demo site:
WordPress: https://example.trypico.com/examples/
Squarespace: https://pico-example.squarespace.com/blog/blog-post-title-one-ysbpp
2. Displaying a thank you message and hiding newsletter sign-up forms on your site for registered visitors.
HTML
<form class="PicoSignupForm PicoSignal"><br style="box-sizing:inherit;">&nbsp; <input type="email" id="subscribe" placeholder="Email"><br style="box-sizing:inherit;">&nbsp; <button type="submit">Signup</button><br style="box-sizing:inherit;">&nbsp; <div class="subscriptionSuccess">Thank you for subscribing.</div><br style="box-sizing:inherit;"></form>CSS
.PicoSignal[data-pico-status=anonymous] .subscriptionSuccess {<br style="box-sizing:inherit;">&nbsp; &nbsp; display: none;<br style="box-sizing:inherit;">}<br style="box-sizing:inherit;">.PicoSignal[data-pico-status=registered] .form {<br style="box-sizing:inherit;">&nbsp; &nbsp; display: none;<br style="box-sizing:inherit;">}<br style="box-sizing:inherit;">.PicoSignal[data-pico-status=anonymous] .form, .PicoSignal[data-pico-status=registered] .subscriptionSuccess {<br style="box-sizing:inherit;">&nbsp; &nbsp; display: block;<br style="box-sizing:inherit;">}To see a live example, visit The Byline