⚠️ This article refers to Pico Version 1.17 and will be removed or updated in the future once we release Pico Version 2.0.
How to create custom triggers
In just 3 steps, you can create custom buttons on your site that trigger a popup for the default Registration Rule or Monetization Plan. (The defaults are determined by the Audience to which a user belongs.)
Step 1: Add an element to your page. The examples below show how to do this in WordPress.
Step 2: Edit the element as HTML.
Step 3: To have this element trigger a Registration Rule popup, add
"PicoRule" as a class. Otherwise, if you want it to trigger a popup for the default Monetization Plan, add
"PicoPlan" as a class.
Note: Triggers for Monetization plans won't work unless there is an existing monetization plan in place. To create one, you'll first need to Connect to Stripe.
<div class="wp-block-button PicoRule"><a class="wp-block-button__link">Log In</a></div>
- Custom Triggers can also be used to provide on-site Menu Shortcuts for quickly accessing account management options, and they can be used to integrate custom Signup Forms.
- You can customize your own payment landing page by setting even more advanced Custom Triggers for specific price points of a Monetization Plan. To find the Custom Trigger class for a particular subscription offer or donation suggestion, open the Popup tab of any Individual Subscription or Donation Monetization Plan. The user must be eligible for the specific pricing tier in order for the custom trigger to work.
- For users that are already paying, the PicoPlan class will not have any effect, because Pico limits contacts to one active recurring payment plan at a time. To prompt users to switch to a different plan (e.g. a higher payment tier is required to access certain benefits) link to "PicoManagePayment" as a class, which will allow users to view their active recurring payment and switch to a higher tier.
- You can customize the look of the triggering element by adding a Signal to it. To ensure the best reader experience, style the element to look disabled by default and to only become enabled once a Signal data attribute, such as
data-pico-status, is attached to the element. Prior to Pico being fully loaded on the page, no Signal data attribute will attach to the element, and the Custom Trigger functionality will similarly be unavailable. This is especially important to consider for readers in low-bandwidth environments.