Referral Section
An invite-friends band with give and get rewards, a referral link with copy, generic share buttons, a friends-joined track with milestone rewards and a short FAQ.
Preview
Invite friends
Give a month, get a month
Invite a colleague to Pebble. When they start a team, you both get something.
- They get
- A month of Team, free
- You get
- A month of credit, per friend
Friends joined
1 more for studio badge
- TOFriend 1: Theo Osei joined. Reward: 1 month free (unlocked)
- ASFriend 2: Ana Sousa joined
- 3Friend 3: not yet. Reward: Studio badge
- 4Friend 4: not yet
- 5Friend 5: not yet. Reward: A free year
Questions
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| link | string | — | Your referral link. |
| give | string | — | What your friend gets. |
| get | string | — | What you get per friend. |
| friends | { name, initials }[] | [] | Friends who joined so far. |
| milestones | { at, reward }[] | 1 / 3 / 5 | Rewards on the track; the last sets its length. |
| faq | { question, answer }[] | [] | Short FAQ (accordion). |
| title | ReactNode | "Give a month, get a month" | Section heading. |
| description | ReactNode | — | Line under the heading. |
| eyebrow | ReactNode | "Invite friends" | Label above the heading. |
| shareText | string | a short invite line | Prefilled text for email and message shares. |
| onShare | (channel: email | message | more) => void | — | Called when a share action is used. |
| headingLevel | 2 | 3 | 2 | Heading level of the title. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.