Social Card Generator
Social Card Generator
The Social Card Generator creates dynamic, gym-branded images for sharing achievements and milestones on social media. Cards are generated server-side using @vercel/og and are accessible via a shareable URL directly from the app.
Card Types
Personal Record (PR) Cards
When a member logs a personal record, a social card is automatically generated showing:
- The movement name
- The achieved weight, reps, or score
- The member's name
- Gym/affiliate branding
Skills School Certificate Cards
After completing a Skills School course or module, members receive a branded certificate card they can share publicly. The card includes:
- Course or skill name
- Member name
- Completion date
- Gym/affiliate branding
Goal Completion Cards
When a tracked goal is marked as achieved, a shareable card is generated summarising:
- The goal title and target
- Date of completion
- Gym/affiliate branding
Competition Result Cards
Following a competition, result cards are generated for notable performances. These include:
- Competition name and date
- Athlete name and result
- Gym/affiliate branding
Member Spotlight Cards
Coaches and gym owners can manually generate spotlight cards to feature a member on social media. Spotlight cards include a custom message alongside the member's name and gym branding.
Gym Branding
All card types are automatically branded per gym or affiliate. The following branding elements are applied:
- Logo — The gym's uploaded logo is placed on every card.
- Colours — The affiliate's primary brand colours are used for card backgrounds and accents.
- Gym name — The gym or affiliate name appears on every card.
Branding is pulled automatically from each affiliate's settings — no manual configuration is needed per card.
Sharing
Each generated card is accessible via a unique, shareable URL. From the app, members and coaches can:
- View the generated card in a preview.
- Copy the shareable link.
- Post directly to social media platforms from the share sheet.
Cards are served as static images (image/png) compatible with Open Graph metadata, meaning they render correctly when links are shared on platforms such as Instagram, Twitter/X, Facebook, and LinkedIn.
Technical Overview
| Detail | Value |
|---|---|
| Generation runtime | @vercel/og (Vercel Edge Functions) |
| Output format | image/png |
| Branding source | Affiliate settings (logo, colours, name) |
| Card triggers | Automatic (PR, certificate, goal, competition) or manual (spotlight) |