Learn how to build custom cards for HubSpot CRM records using the CLI, JSON config, and serverless functions. The video walks through the CRM Card Builder to display and interact with custom data directly on record pages.
Customizing the data that appears on record pages is key to ensuring that relevant information is displayed to the right users at the right time across your CRM. HubSpot now offers a set of developer tools that makes building and deploying custom cards to record pages easier than ever. Using HubSpot projects, you can now deploy to the Custom tab in the middle pane for information that you want to display front and center. Want to fetch data from an external system and display it the way you want it? No problem. Want to display internal HubSpot data? Yep, you can do that custom behavior at the click of a button? Yep, you can do that too. To get started, use the HubSpot CLI to create a new project or use an existing project. Easily configure the card using its JSON file and write serverless function code to control the card's appearance and behavior to in its JavaScript file. Using the power of serverless functions, fetch both internal and external data and perform custom actions. Also leverage HubSpot's library of standard card components to create the exact card you want. Use the CRM Card Builder under the CRM Development menu item to layout your card and generate the JSON payload that you can include in your card's JavaScript file. Add alerts, slide statistics, buttons, images, and more. Once you're done, easily deploy your cards by running the HS Project Upload command on the command line. View your custom cards by navigating to a record page that you've configured to show the card. Your card will appear in the middle pane under the Custom tab. It's easier than ever to create custom experiences on your record Pages. Check the documentation's Quick Start Guide and our GitHub repository of sample projects to help you get started.
