Using Pico Signals to show or hide website features based on login and membership status

Pico’s Signal ability allows elements on your website, including advertisements, navigation links or special content within an article, to show based on whether a user is logged or paying. This can allow for more control over the user experience, or create more incentive to register and stay logged in (for example: added commenting abilities).

To take advantage of this feature, publishers need to make a small change to their website theme’s CSS stylesheet. 

Add the following to your theme’s CSS stylesheet:

.HideWhenRegistered[data-pico-status="registered"],
.HideWhenRegistered[data-pico-status="paying"] {
display:none;
}

.ShowWhenRegistered {
display:none;
}

.ShowWhenRegistered[data-pico-status="registered"],
.ShowWhenRegistered[data-pico-status="paying"] {
display:block;
}

.HideWhenPaying[data-pico-status="paying"] {
display:none;
}

.ShowWhenPaying {
display:none;
}

.ShowWhenPaying[data-pico-status="paying"] {
display:block;
}

Once the above code is added to the stylesheet, publishers can show an element to logged in users by adding the following two CSS classes to any HTML element on a website: 

PicoSignal ShowWhenRegistered

To hide an element for logged in users, use the following two classes:

PicoSignal HideWhenRegistered

To do the same for paying users versus others, use ShowWhenPaying or HideWhenPaying in combination with PicoSignal. Note that this only works for members with a recurring payment - not one-time donations. 

You may have to switch to your CMS’ “code” view to edit this directly in the HTML. If you’re using Wordpress with the Gutenberg block editor, it can be accomplished by selecting the element in the post/page editor and putting these classes where it says “Additional CSS classes” on the bottom of the right-hand editing panel.

Using these signals in combination will allow you to target specific messaging or calls to action to logged in versus non-logged in users, such as showing a call-to-action for your newsletter to non-logged-in users and swapping it for a membership promotion for logged in users. 

Using Signals to build a "Manage my account" page

Your registered readers can manage their account settings, including newsletter preferences and payment, by clicking on the Pico bubble in the bottom right corner of your website any time they are logged in. 

However, there will be times you will want to link a reader directly to a page to manage their settings. That could be as part of an email exchange or a list of resources.

You’ll have to build this page for your customers. This article provides detailed instructions to create a page that shows two different messages based on whether or not a user is already logged in: settings when the user is logged in, and a message to log in if they haven’t already done so (thereby reducing confusion caused by non-logged-in users attempting to manage their account).

To do this, add the CSS mentioned above to your stylesheet. Then create a new page on your website titled “My account” (or whatever you prefer).

In the body of the page, paste the following in the code view, or as a custom HTML element: 

<div class="PicoSignal HideWhenRegistered">
You must sign in or register to see this page.
<button type="button" class="PicoEditProfile">Sign in</button>
</div>

<div class="PicoSignal ShowWhenRegistered">
<ul>
<li><a class="PicoEditProfile">Edit profile</a></li>
<li><a class="PicoManageNewsletters">Manage newsletters</a></li>
<li><a class="PicoManagePayment">Subscribe or manage payment</a></li>
<li><a class="PicoGift">Gift a subscription</a></li>
</ul>
</div>

You can then add a link to the page in the header or footer navigation of your site. If you choose, you can give the navigation menu link the classes of "PicoSignal ShowWhenRegistered" so that the menu link only shows for logged in users.

Using Signals to build a newsletter landing page or inline email signup units

Sometimes you want to say a little more about your newsletters than the Pico popup gives you space for. Or maybe you’ve launched a new newsletter and want to send a link to subscribers of your other emails to learn more and add it to their email preferences. 

Due to the different ways Pico handles new users and existing users when it comes to signing up to a newsletter, you’ll want to have different buttons showing based on their login state to avoid confusion.

To do this, use the code below - replacing the text with your own, but preserving the HTML and CSS classes.

RAD NEWSLETTER
Our awesome emailing briefing tells you everything you need to know to be totally rad, delivered in your inbox at 3:28am eight days a week. 

<button type="button" class="PicoSignal ShowWhenRegistered PicoManageNewsletters”>Manage your newsletters</button>

<form class="PicoSignupForm PicoSignal HideWhenRegistered">
<input type="email" placeholder="Email">
<input type="submit" value="Sign up">
</form>

For those using a block editor like Wordpress, saving this as a reusable block will allow you to put email signup forms between paragraphs which will increase your chance of conversions. 

Using Signals to hide advertisements for paying users

You can make an ad-free experience a membership perk for paying users. Just add class="PicoSignal HideWhenPaying" to the <div> tag that contains the advertisement. This can be added programmatically to all of your ads or to specific advertising zones by changing the settings in your ad manager. 

Read more about Signals here. 

Need help setting this up? Contact BlueLena's support team.