Customizing HubSpot CM Record Page with UI Extensions

Introduction

• Customizing the CM record page in HubSpot is essential for delivering the right information at the right time.
• HubSpot offers developer tools to enhance the main record page with UI extensions.

Benefits of UI Extensions

• Visualization and Interaction: Allows data interaction from both HubSpot and external systems.
• Custom Business Processes: Create processes like issuing free meal vouchers based on certain criteria.
• Personalization: Customize cards with contact names and other details.

Organizing UI Extensions

• Middle Column Tab: Display important information and tasks centrally.
• Right Sidebar: Ideal for items requiring less frequent interaction.

Compatibility

• UI extensions are supported on both standard and custom object record pages.

Getting Started

• HubSpot CLI: Use to create a new project or download example cards.
• Configuration: Utilize React for front-end and SESS functions for back-end.

Development Process

• Pre-Built React Components: Include buttons, text, tables, steps, etc.
• Serverless Functions: Fetch data from HubSpot or external sources, perform custom functions.
• Layout Management: Flex and box components manage the layout, inspired by CSS flexbox.

Development Tools

• Local Development: Use CLI with HS project Dev in the terminal to code in a preferred editor and see changes in real time.
• Deployment: Use HS project upload to deploy directly to your HubSpot account.

Resources

• Documentation: Check developer docs for a list of available components.
• Quick Start Guide and GitHub: Access sample projects to begin development.

Conclusion

• Using React for the front-end allows for quick and easy card development.
• The process makes it efficient to start building and expanding your HubSpot account's capabilities.