Extending HubSpot with Custom UI Extensions

Overview

HubSpot’s UI Extensions framework enables developers to build flexible, React-powered components that enhance the CRM and help desk experience. By embedding custom visualizations, actions, and workflows directly into HubSpot objects, businesses can streamline operations, reduce context switching, and improve both customer and agent experiences.

Key Features and Examples

1. App Cards

• Description: The most common type of UI extension. These custom cards can be placed in CRM records and help desk tickets.

• Functionality: They display relevant data and enable users to take direct actions without leaving the CRM.

• Example: An onboarding plan progress bar embedded in a customer’s support ticket. Support agents can instantly check progress, reducing back-and-forth with onboarding teams.

2. Right Panel Cards

• Description: Cards that appear in the right-hand panel of any HubSpot object.

• Functionality: Provide quick context or interactive elements such as status updates, notes, or integrations.

• Example: A right-panel card that pulls in order tracking updates from a third-party logistics system, giving sales reps instant insight into shipping status.

3. Custom Object Board Views

• Description: Tailored board views designed for custom objects.

• Functionality: Allow teams to track specific data points or statuses in a Kanban-style interface.

• Example: A custom "Partner Onboarding" object board that shows each partner’s stage in the onboarding funnel, complete with SLA indicators.

4. Dynamic Data Visualization

• Description: Components such as bar charts, line charts, or embedded dashboards.

• Functionality: Visualize both  HubSpot and external data sources in a single interface.

• Example: A dashboard card that shows monthly churn rates alongside pipeline growth, pulling data from HubSpot and an external billing system.

How They Work

Development Framework

• Developers build UI extensions using the HubSpot CLI and Developer Projects framework.

• Interfaces are React-based, leveraging the  HubSpot UI Extensions SDK for seamless integration.

App Types:

Public vs. Private

Private Apps:

• For internal use within a single HubSpot account.

• Require an Enterprise plan for standard accounts.

• Can leverage HubSpot serverless functions for backend logic.

Public Apps:

• Distributed via the HubSpot App Marketplace.

• Available across all HubSpot plan tiers.

• Require a self-hosted backend to manage logic and data.

Data Fetching

Extensions can pull data from:

• Internal HubSpot records (e.g., deals, tickets, custom objects).
• External systems via APIs.
• Example workflow: A private app fetches customer NPS scores from an external survey tool via a serverless function and displays them in an App Card.

Business Impact

• Improved Efficiency: Teams no longer need to switch between multiple platforms to find relevant customer data.

• Enhanced Customer Experience: Support and sales reps gain real-time visibility into onboarding, shipping, or billing information, leading to faster resolutions.

• Customizable Insights: Organizations can design dashboards tailored to their KPIs, aligning HubSpot with unique business needs.

• Scalability: Public apps extend functionality to a wide user base, while private apps allow deep, internal customizations.

Conclusion

Our client needed a more tailored HubSpot experience to fit their unique workflows. We delivered a  UI Extension solution that included App Cards, Right Panel Cards, Custom Object Board Views, and Dynamic Data Visualizations. These enhancements streamlined their processes, provided real-time insights, and created a more efficient, connected HubSpot environment.

Book a Free Consultation on HubSpot Custom Extensions.