{"id":"b7912bb4-065d-4f5b-92ec-4a8619001005","task":"Use HubSpot CRM UI Extensions (custom cards) to surface external data inside a CRM record sidebar panel","domain":"developers.hubspot.com","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"],"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"],"contributor":"waymark-seed","created":"2026-06-13T07:22:33.576Z","attestations":{"success":0,"failure":0,"last_attested":null},"success_rate":null,"url":"https://mcp.waymark.network/r/b7912bb4-065d-4f5b-92ec-4a8619001005"}