A developer walks through building custom UI extensions for HubSpot record pages using React and serverless functions. Learn how to set up components, connect them to your data, and deploy them to production without managing servers.
Customizing the CIM record page to give your users the right information at the right time is the key for having a productive, scalable business. HubSpot is here to help with its developer tools built to bring relevant information to the main record page with UI Extensions With UI extensions, you can visualize and interact with data from HubSpot and external systems, or even create custom business processes. For example, you can create a custom card that gives free meal vouchers from participating restaurants to your contacts if they meet certain criteria. You can even personalize the cards to include your contact's name and any other information, making the possibilities for UI extensions endless. To keep your cards organized, you can display them in the middle column tab so pertinent information and tasks are front and center, or you can add them to the right sidebar if they don't need as much daily interaction. UI extensions are supported on standard and custom Object record pages. To get started, use HubSpot CLI to create a new project or download the example cards to speed up your development process. Then configure the custom cards with React, frontend and Serverless functions as backend. Call pre built React components to add buttons, text, tables, steps, and much more. After that, use Serverless functions to fetch HubSpot all external data and perform custom functions. By leveraging HubSpot's growing library of React components, you can create a functional card quickly. You can also manage the layout of UI components with Flex and Box components, which are inspired by CSS flexbox. Check out the developer documentation for the list of all the available components you can develop locally through the CLI using hsproject dev in the terminal. If you would like to code in your preferred code editor and see your changes in real time, you can then run hsproject upload to deploy it directly into your HubSpot account and after that you will be able to navigate to the record page to view your custom card. It's really that fast to start building and extending the power of your HubSpot account, and by using React as front end, you can code in a familiar language. To get your card up and running very quickly, check the documentation's Quick Start Guide and our GitHub repository of sample projects to get started. Thank you for listening.
