[object Object]

The right-rail card used to be read-only. UI Extensions changed that: cards can now host buttons, forms, and stateful workflows. Done well, this turns the record view into a workspace and saves reps 30+ seconds per task. Here are the action patterns that earn their keep.

One-click task creation with context

Reps create tasks from the record but lose context. Build a card with a button that creates a task pre-filled with the contact’s last activity:

<Button onClick={async () => {
  await runServerless({
    name: "create_followup_task",
    parameters: { contactId, lastActivity: contact.last_activity_summary }
  });
}}>Schedule follow-up</Button>

Saves 4-5 keystrokes per task. Multiplied by 50 tasks/day = real time.

Approve discount with audit trail

Sales rep needs a 15% discount approval. Without UI extensions, they Slack the manager. With it, a card on the deal shows requested discount + amount + manager dropdown + approve button. The approval writes back to a custom property discount_approved_by with a timestamp.

Quick-add a deal to an opportunity sequence

Cards can enroll the current contact in a sequence with one click, optionally letting the rep pick the sequence variant. Replace the multi-step sidebar workflow with one button.

Pre-call brief generator

Click “Brief me.” A card calls a serverless function that pulls recent activity, latest news on the company, and last conversation summary. Returns a 3-bullet brief in 4 seconds. Reps actually use this; the manual equivalent takes 5 minutes.

Update lifecycle with reason capture

Most lifecycle changes happen without a reason captured. Build a card that wraps lifecycle change with a required reason dropdown. The audit trail makes downstream reporting honest.

Bulk action across associated records

When you have a single company with 12 associated contacts, a “tag all as account team” card can update all 12 with one click. UI extensions support batch operations through the runServerless pattern.

Inline form for missing properties

When key properties are blank (industry, company size), surface an inline form on the card. The rep fills three fields without navigating away. Property completeness scores rise measurably.

Build with @hubspot/ui-extensions

extensions/discount-approval/
  card.json
  DiscountApproval.jsx
  serverless/approve.js

Use the SDK’s Form, Input, and Button components. They match HubSpot’s design language and inherit theme. Roll your own and reps notice the inconsistency.

Latency budget

Card actions must complete in under 2 seconds end-to-end. Above that, reps stop using the action. Pre-warm your serverless function or move heavy work to async.

What to do this week

Identify the most common 3-step manual sequence in your reps’ day (e.g., “create task, set due date, write note”). Build a one-button card that replaces it. Measure adoption after one sprint.

[object Object]
Share