Skip to content
Selim Maalouf | 22 October, 2024

The Power of HubSpot’s UI Extensions: Enhancing Your App Experience

As part of HubSpot's recent feature updates, the introduction of user interface (UI) extensions within public apps has become a game-changer. This update allows businesses to build more robust, visually appealing, and customized UIs that seamlessly integrate within HubSpot. With this development, you no longer need to rely on custom-built solutions outside HubSpot for enhanced user experiences, making it easier and more cost-effective to deliver tailored functionality directly within the platform.

 

In this post, we’ll explore what UI extensions are, how they work, and why they represent a major step forward for businesses that want to maximize the potential of their HubSpot apps.

What are UI Extensions in HubSpot?

HubSpot’s UI extensions allow developers to build custom user interfaces within the HubSpot ecosystem that enhance how users interact with public apps. These extensions make it possible to integrate advanced functionality directly into HubSpot, improving the usability and overall experience of apps for customers without needing to rely on external web servers or portals.

 

With UI extensions, developers can create interactive components and embed them into the HubSpot CRM experience. This allows users to take action within HubSpot rather than navigating between different systems, creating a seamless experience and reducing inefficiencies in workflow management.

 

Learn more about HubSpot’s UI Extensions here.

 

 

How Do UI Extensions Work?

HubSpot's UI extensions use extension points, which are specific locations in the CRM where custom UIs can be embedded. These extension points allow for smooth integration into the user’s daily workflow, making it easy to access the information and tools they need without leaving HubSpot. This functionality enables deeper customization of the CRM interface and offers businesses more control over how their teams interact with data and processes.

 

Developers can use iframe-based embedding to insert custom UIs, enabling businesses to display external applications or custom-built interfaces within HubSpot. With support for Custom Object Board Views, Right Panel Cards, and more, HubSpot’s UI extensions are designed to allow developers to create powerful interactive interfaces that work natively within the CRM environment.

 

By using HubSpot’s API paired with UI extensions, you can manipulate and display data dynamically, streamlining interactions with custom apps and improving overall efficiency.

 

Why UI Extensions Matter for Businesses

  • Eliminating the Need for External Portals

Previously, businesses that required specific user interfaces for their apps had to host external web servers to manage and display those components. This added complexity, cost, and time to the development process. With the new UI extensions, you can create highly functional, customized UIs directly within HubSpot, eliminating the need for external portals or additional hosting costs.

CRM React Card - Middle Panel 1

 

  • Faster Development and Deployment

The new UI extensions streamline the process of building and deploying apps. Developers can create the desired front-end components within HubSpot itself, reducing the development time spent on setting up external systems. Whether you’re developing a custom CRM tool or a niche industry-specific application, you can do it faster and more efficiently.

 

  • Tools Designed With Your Process In Mind

HubSpot's native tools are amazing at guiding the hand of young businesses that are still figuring out their processes. However, with HubSpot's push into the Enterprise market, they understand that these organizations have complex and mature processes that may not neatly fit into the out-of-the-box HubSpot UI. Your industry or vertical specific processes can now live inside of a version of HubSpot that is tailored to your team.

 

  • Enhanced User Experience

A smooth, integrated user experience is crucial for increasing adoption and engagement with any software. UI extensions allow developers to craft tailored experiences that feel native to HubSpot, ensuring that users can interact with your app as part of their regular CRM workflow — no need to jump between different systems. This unified experience can significantly improve user satisfaction and reduce learning curves.


With extension points like the Right Sidebar or Custom Object Overview, businesses can inject useful information directly into key areas of the CRM. For instance, a custom sales pipeline view might include deal-specific metrics or account health indicators that are visible alongside other HubSpot data, keeping everything under one umbrella.

 

New Features of HubSpot’s UI Extensions

HubSpot’s latest UI extensions bring some powerful new features to the table. Let’s dive into a few of the most significant additions:

 

  • Custom Object Stage Views: Businesses can now create custom views for their objects that integrate fully with HubSpot’s UI. These views can be tailored to show specific data points or statuses that are critical to a company’s operations, such as task tracking, deal stages, or custom project management boards.CRM React Card - Middle Panel 2
  • Right Panel Cards: This feature allows developers to create cards that are displayed on the right-hand panel of any HubSpot object. These cards can provide important information at a glance or offer interactive elements such as quick actions, status updates, or integrations with external systems.CRM react Card - Right Panel
  • Serverless Functions: This exciting new addition enables developers to run custom code and logic within HubSpot without setting up a separate server infrastructure. This capability reduces the complexity of app development, allowing businesses to focus on delivering valuable features rather than worrying about backend architecture.
  • Embedded Line and Bar Charts: While HubSpot allows you to create single object reports natively on a middle pane card, UI Extensions allow you to embed reports for any data (internal or external) using visualization types line Line Charts and Bar Charts. This provides at a glance insights that make the decision making of your users faster than ever before.CRM React Card - Line Bar Chart

 

These new features open up vast opportunities for businesses to build powerful, highly customized tools that work natively inside HubSpot’s CRM, reducing development time and increasing user satisfaction.

 

Use Case Example: Streamlining Customer Interactions in a Photography Business

Let’s take an example. A photography business that manages bookings, clients, and projects might require an external portal to handle these tasks outside of HubSpot. With UI extensions, this business can now create a fully integrated customer portal directly within HubSpot, handling everything from client communication to project updates without needing a separate system.

 

This not only saves the business money by eliminating the need for an external server but also improves customer engagement by offering a seamless experience. Customers and staff can manage tasks through a single interface, increasing efficiency and satisfaction.

 

Additionally, a Right Panel Card could be used to display client preferences, project timelines, and status updates, all accessible directly from the customer’s profile within HubSpot.

 

How to Get Started with HubSpot’s UI Extensions

If you're ready to integrate UI extensions into your HubSpot applications, here’s a quick roadmap:

 

  • Consult HubSpot’s Developer Documentation
    Before diving into development, take some time to review HubSpot's official documentation on public apps and UI extensions. This will give you a solid understanding of the available components and how to implement them effectively.

  • Identify Your Use Case
    Determine where in your business processes a custom UI could add value. Whether it’s customer management, internal workflows, or external interactions, identify the areas where a smoother, integrated experience could benefit your team and your customers.

  • Work with a Developer or HubSpot Partner
    If you’re not comfortable building the UI yourself, reach out to a developer or certified HubSpot partner. They can help design and implement the right solutions to fit your needs, ensuring you take full advantage of these new capabilities.

  • Test and Optimize
    Once your UI extension is live, ensure you test it across different use cases to ensure it performs as expected. Gather feedback from users to identify areas of improvement and continue to refine the experience to maximize its impact.

 

A New Era of HubSpot Integration

The introduction of UI extensions in HubSpot represents a major leap forward for businesses looking to build custom apps that fully integrate into their CRM. Whether you’re looking to save on development costs, improve user experience, or deploy more sophisticated apps, these extensions open up a new world of possibilities.

 

If you want to stay competitive without breaking the bank, UI extensions offer a powerful way to enhance your HubSpot experience while keeping everything centralized and scalable. Start exploring these new features today with the help of a specialist from the Unlimited team (Click here).

Selim Maalouf

Selim Maalouf

Selim merges solution engineering with marketing chops to deliver helpful content tailored to HubSpot users looking to push it to its innovative edge. Drawing from 7 years in the industrial space, Selim brings a grounded perspective to HubSpot content typically dominated by SaaS.

Explore More On The Blog

Tom Richard 07 February, 2023

Salesforce vs. HubSpot: Why I Moved 120 Sales Reps To HubSpot

Salesforce and HubSpot are two of the most popular CRMs on the market today. Both offer a powerful...

Kevin Mullins 30 August, 2023

HubSpot Adoption Woes: The Danger of Misdiagnosing Business Issues

Companies often mistakenly identify surface-level symptoms of business issues as the core problems....

Shelby Calhoun 11 May, 2022

Search Functionality on Hybrid HubSpot & Shopify Websites

What happens when your customers can’t find products or services on your website?

They don’t buy...

Diamond Partner Badge

We Take HubSpot Further

As a certified HubSpot solutions partner, we've helped clients across multiple industries build innovative solutions on the HubSpot platform, align marketing and sales, launch high-performance websites and boost growth. Want in?