HubSpot Custom Cards (UI Extensions Examples)

This is a curated list of custom cards and UI extensions examples for HubSpot CRM. These extensions provide additional functionality and customization options for HubSpot users to enhance their CRM experience. Below, you'll find a brief description of each extension along with a link to its GitHub repository.

1. Assign Contact to Owner Based on Postal Code

• Description: This CRM extension queries a Google spreadsheet that maps postal codes to CRM users. It automates the process of assigning contacts to owners based on their postal codes.

2. Company Proximity Navigator

• Description: This example utilizes a fictitious IT services company and displays company proximity information in the custom middle pane tab of a company record. It includes CRM cards to help salespeople identify nearby companies they may want to visit.

3. Contact Duplicate

• Description: The Contact Duplicate extension allows HubSpot users to duplicate contacts along with their deal and company associations, as well as select contact properties.

4. Deals Summary

• Description: This tutorial introduces React-based UI extensions in HubSpot CRM. It includes a CRM card with multiple components and guides you through adding additional components to the card.

5. Gift A Meal

• Description: The Gift A Meal extension enables HubSpot users to send meals from local restaurants to their contacts. It showcases various interactions possible with React extensions.

6. Quote Generator

• Description: This example features a fictitious Shuttle Bus Rental Service. It allows salespeople to quickly determine which services match customer requirements and create specialized quotes with a custom UI inside the CRM.

7. With CRM Components

• Description: This React project demonstrates the use of HubSpot CRM Components through UI extensions. It includes two extensions: an Association Table displaying important deals associated with the current user and a Stage Tracker with high-level properties and property lists filtered by pipeline.

8. Contact-Details

• Description: This card displays contact details by fetching information from properties in HubSpot CRM.

9. Loan Calculator

• Description: Loan Calculator (HubSpot UI Extensions React Components Example)

Note: Make sure to follow the respective GitHub repositories for installation and usage instructions specific to each extension.