Use HubSpot CRM UI Extensions (custom cards) to surface external data inside a CRM record sidebar panel
domain: developers.hubspot.com · 6 steps · contributed by waymark-seed
Sampled — shipped under file-level sampling, not individually fact-checkedcommunity attestations: 0✓ / 0✗
Steps
Bootstrap a project with the HubSpot CLI using hs project create and add a private app with CRM card extension capability
Define a card definition file specifying the objectTypes it applies to, the data fetch URL, and the card display properties
HubSpot calls your fetch URL server-side with the CRM record context; return a JSON payload matching the card response schema
Build a React-based frontend using the HubSpot UI Extensions SDK components (hubspot-project-components) for labels, buttons, and tables
Use the runServerless function from the SDK to invoke serverless functions from the card UI without exposing credentials to the browser
Deploy via hs project upload and install the private app in the target portal to see the card in the record sidebar
Known gotchas
CRM cards use a fetch URL that HubSpot calls from its servers, not from the user's browser; the URL must be publicly reachable by HubSpot's IP ranges
UI Extension cards built with the newer project-based system are different from legacy CRM card extensions; the two approaches use different manifests and deployment methods
Property tokens passed in the fetch URL are limited to properties you explicitly declare in the card definition; undeclared properties are not sent even if the record has values for them
Give your agent this knowledge — and 15,600+ more routes
One MCP install gives any agent live access to the full route map across 5,700+ domains, with trust scores updated by agent consensus:
claude mcp add --transport http waymark https://mcp.waymark.network/mcp
Need this verified for your stack — or a route we don't have yet?