The HubSpot record’s right rail has 60-second attention. If your smart CRM cards aren’t earning that attention, reps scroll past. Here’s the blueprint that gets them used.
Three cards visible above the fold, no more
The first three cards are everything. Use them for: 1) Health snapshot (one number, color-coded), 2) Next best action, 3) Recent activity summary. Push everything else below the fold or into expandable sections.
Health snapshot card pattern
A single composite metric. Green/yellow/red. For a deal: combination of days_in_stage, last_engagement_date, stakeholder_count. For a contact: composite of fit_score, engagement_freshness, churn_risk.
The trick is one number. Reps don’t have time to interpret three subscores; the card has to do that math.
Next best action card pattern
Action-oriented, not informational. “Call John (decision-maker, no contact in 14 days).” Include a one-click button. The card should produce a task, an email draft, or a calendar booking link.
Activity card pattern
Five most recent timeline events, condensed. Skip system-generated noise (property updates, list memberships). Show meetings, emails, calls, notes. Each item one line, with a relative timestamp.
Build with UI extensions, not iframes
The legacy custom card was an iframe. The modern UI Extension uses HubSpot’s React components and runs natively:
extensions/health-card/
card.json -> declares title, fields, location
HealthCard.jsx -> React component using @hubspot/ui-extensionsIframe cards feel slow and break responsive layouts. UI Extensions feel native. Migrate any legacy card with high traffic.
Permission per role
Not every card belongs on every team’s record view. CSM cards (renewal date, NPS, support tickets) confuse new SDRs. Configure per-role visibility in the card settings. The right rail should reflect the rep’s job.
Latency budget
A card that takes longer than 800ms to render is dead. Reps move on. Cache aggressively, batch your API calls, and pre-compute the heavy lifting in workflows that write to a custom property the card reads.
Track card engagement
UI Extensions can fire events. Send a “card_action_clicked” event to your analytics tool whenever a rep uses a card button. Cards with under 5% interaction rate are not earning their slot. Replace them.
Don’t ship more than 8 cards total
Eight is the maximum. Past that, reps don’t scroll. Audit and prune at every quarterly review.
What to do this week
List your current cards by interaction rate (or by intuition if you don’t track it). Cut the bottom three. Migrate the top one to a UI Extension if it’s still an iframe.
