WhatsApp Setup and Etiquette
How to wire up the floating green WhatsApp button that every client sees.
Why WhatsApp instead of in-app messaging
EvoFit does not yet have an in-app messenger. The Message buttons on /clients/[clientId] are placeholders. WhatsApp is the official messaging surface — it's where 99% of trainer-client conversation happens in the real world anyway, and we don't want to build an inferior copy of it.
When you set up WhatsApp once, every client sees a floating green button on every page of their app. Tapping it opens WhatsApp Web or the WhatsApp app, pre-loaded to your number with a friendly intro message.
Step-by-step
- Open
/profile/edit. - Scroll to the WhatsApp Setup section.
- Two fields:
- WhatsApp number — your number with country code (
+1 555 123 4567). Required for direct message. - WhatsApp community link — optional. Paste a WhatsApp group invite URL if you run a community.
- Click Save.
The system stores both:
userProfile.whatsappNumber(digits, no spaces)userProfile.whatsappLink(full URL)
What clients see
The component ClientWhatsAppFloat mounts on every role === 'client' page (via AppLayout). It calls /api/clients/trainer to read your number/link and renders accordingly:
- Number only → tapping opens
https://wa.me/{digits}?text=Hi%20{trainer},%20I'm%20reaching%20out%20from%20EvoFit! - Link only → tapping opens the community invite URL.
- Both set → tapping opens a small menu: "Direct Message" + "Join Community".
- Neither set → the floating button is hidden.
Etiquette tips
- Set a response window. "Mon-Fri 8am-6pm, weekend replies within 24 hours" — paste this in your bio so clients know what to expect.
- Don't over-promise. WhatsApp creates expectation of fast replies. Use 24h SLAs for non-urgent stuff.
- Use the community link for cohort programs — keeps DMs lighter.
Disabling the button temporarily
Edit your profile and clear both fields. Save. The button hides for all your clients on next page load.
Common pitfalls
Where to find this
- Trigger:
/profile/edit→ WhatsApp Setup section. - Component:
WhatsAppSetup. - Client-side button:
ClientWhatsAppFloat(auto-mounted in AppLayout). - API:
GET /api/clients/trainer(client reads trainer's WhatsApp).
