The Members feature allows you to turn any site into a membership business with member signup, paid subscriptions and email newsletters.
data-portal
data attribute to control the Portal UI, additional classes gh-portal-open
and gh-portal-close
are added to the element to allow custom styling of open and closed states.
Alternatively, it’s possible to build entirely custom membership and signup flows directly into a theme using this guide.
data-members-form
attribute to the form element and data-members-email
to the email input field to create a standard email collection signup form:
data-members-name
to an input element to capture a member’s name at signup:
data-members-error
. Errors could include too many attempts to sign up or trying to subscribe to a newsletter that no longer exists (see below):
data-members-newsletter
to an input element. In the example below, the member is subscribed to the Weekly Threads newsletter.
input
elements:
hidden
inputs in the examples above, newsletter details are hidden from the user. But, you can allow users to choose which newsletters to subscribe to by using radio
or checkbox
elements:
get
helper to fetch a site’s newsletters
. Then, loop through the newsletters and add the name
property to an input
element. See below for an example implementation:
data-members-form
accepts a series of optional values to customise user flows:
data-members-form="signin"
– sends a signin email to existing members when a valid email is entered.data-members-form="signup"
– sends a signup email to new members. Uses “sign up” in email text. If a valid email is present, a signin email is sent instead.data-members-form="subscribe"
– sends a subscribe email. Uses “subscription” in email text. If a valid email is present, a signin email is sent instead.data-members-autoredirect="false"
- when set to false
, the user will be redirected to the publication’s homepage when logging in. When set to true
(the default), the user will be redirected to the page where they signed up.data-members-signout
data attribute.
@member
object in conjunction with a sign out button allows you to show the signin link when the member is logged out, and a sign out link if a member is logged in.
<form>
or <a>
element with the attribute data-members-error
.
visibility
setting attached to the content
.
This setting is applied in the Admin UI as the post access level on each individual post.
access
is a variable that calculates the access level of the member viewing the post and the access level setting applied to the post. access
will return true
if the member’s access matches, or exceeds, the access level of the post, and false
if it doesn’t match.
{{content}}
helper, visitors who don’t have access to a post (determined by the access
property) will see a default call to action in the content area instead, prompting users to upgrade their subscription. Used in conjunction with a free public preview in post content, the CTA will be displayed after the free preview.
./partials/content-cta.hbs
template file in your theme. The default content CTA provided by Ghost may be used as a reference.
@member
object@member
object can be used to determine which content within the theme is exposed depending on the access level of the member. This is achieved using an #if
statement:
@member.paid
allows you to expose different content to members who have an active paid subscription.
@member.paid
returns true
for members with active subscriptions in states “active”, “trialing”, “unpaid” and “past_due”. To revoke access for members with failing payments, update your Stripe settings to automatically cancel subscriptions after all payment attempts have failed.
These two boolean values can be used together to customise UI and messages within a theme to a particular segment of your audience:
visibility
attribute is relative to the post or page, and is useful for providing templates with extra attribute information depending on the viewer status. visibility
has 3 possible values: public
, members
or paid
.
visibility
in postsmembers-only
or paid-members only
) will appear in post archives unless the visibility
parameter is included with the #foreach
helper:
visibility
with #has
#has
helper allows for more unique styling between public
, members
and paid
posts. For example:
data-portal
attribute pointing to monthly or yearly price of a tier. The data attribute for monthly/yearly plan of a tier can be fetched from Portal settings in your Admin URL - /ghost/#/settings/members?showPortalSettings=true
.
@member
object has a series of attributes that expose the information required to create a member profile page:
@member
– The member object, evaluates to true
or false
if the viewer is a member or not@member.paid
–The member’s payment status, returns true
or false
if the member has an active paid subscription@member.email
–The member’s email address@member.name
– The member’s full name@member.firstname
– The member’s first name (everything before the first whitespace character in the member’s full name)@member.uuid
– A unique identifier for a member for use with analytics tracking such as Google Tag Manager@member.subscriptions
.
Members may have multiple subscriptions, provided as an array. Subscription data can be exposed using a #foreach
:
id
–The Stripe ID of the subscriptionavatar_image
— The customers avatar image, pulled in from Gravatar. If there is not one set for their email a transparent png
will be returned as a defaultcustomer.id
– The Stripe ID of the customercustomer.name
– The name of the customer in Stripecustomer.email
– The email of the customer in Stripeplan.id
– The Stripe ID of the planplan.nickname
– The Stripe nickname of the plan (currently only “Monthly” or “Yearly”)plan.interval
– The Stripe plan payment interval (currently only “month” or “year”)plan.currency
–The currency code of the plan as an ISO currency codeplan.amount
– The amount of the Stripe plan in the smallest currency denomination (e.g. USD $5 would be “500” cents)status
– The status of the subscription (can be one of: “active”, “trialing”, “unpaid”, “past_due”, “canceled”)start_date
–The date which the subscription was first started, can be used with the {{date}}
helperdefault_payment_card_last4
– The last 4 digits of the card that paid the subscriptioncurrent_period_end
– The date which the subscription has been paid up until, can be used with the {{date}}
helperprice
helper{{price}}
helper formats monetary values from their smallest denomination to a human readable denomination with currency formatting. This is best used in the context of a subscription plan to format Stripe plan amounts (see plan.amount
above) or outputting prices for tiers. Example:
$5
.
The {{price}}
helper has many options with detailed documentation here.
{{cancel_link}}
helper is designed to output links to cancel or continue a subscription, so that your members can manage their own subscriptions.
This helper wraps all of the internals needed to cancel an active subscription or to continue the subscription if it was previously canceled.
The helper must be used in the @member.subscriptions
context, for example:
{{cancel_link}}
helper accepts a number of optional attributes:
class
- defaults to gh-subscription-cancel
errorClass
- defaults to gh-error gh-error-subscription-cancel
cancelLabel
- defaults to Cancel subscription
continueLabel
- defaults to Continue subscription
{{cancel_link}}
helper in use in the members-enabled theme Lyra within the account.hbs file.
It’s used inside a {{#foreach @member.subscriptions}}
loop which provides the helper the context needed to generate an appropriate link, and is surrounded by other useful information displayed to the member.