Skip to main content
Render a “Join the program” button anywhere on your storefront, so shoppers can enroll in your loyalty program from a page you have built yourself out of embeddable components. This is intended for programs using manual opt-in enrollment, where a shopper has to actively join before they earn points. The built-in loyalty page already includes a join button — this component gives you the same action on a custom page.

​
Code

​
Behaviour

The button adapts to the shopper’s state: While enrollment is in progress the button shows a loading state and is disabled. If enrollment fails, an inline error message is shown beneath the button and the shopper can try again. Once enrollment succeeds, other components on the page that require an enrolled member — such as points balance, referral URL, or tier progress — begin rendering without a page reload.
If your program enrolls customers automatically, every logged-in shopper is already a member, so this component renders nothing for them. Blocked customers are treated as members too, so they see nothing rather than an invitation to re-join.

​
Styling

The button uses the same lion-action-button class as other LoyaltyLion buttons, so any custom CSS you already apply to them applies here too. The inline failure message is a lion-join-program__error element, which you can style to match your page.