> ## Documentation Index
> Fetch the complete documentation index at: https://developers.loyaltylion.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Join the program

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

```html theme={null}
<div data-lion-join-program></div>
```

## Behaviour

The button adapts to the shopper's state:

| Shopper state               | What renders                                                                  |
| --------------------------- | ----------------------------------------------------------------------------- |
| Not logged in               | A button linking to your store's sign-up page — a store account is required.  |
| Logged in, not yet enrolled | A button that enrolls them in the program in place, without leaving the page. |
| Already enrolled            | Nothing. The component renders no markup.                                     |

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.

<Note>
  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.
</Note>

## 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.