Next-Level Efficiency: The Power of CRM Cards and UI Extensions

As technology evolves, so do the ways it supports businesses. From integrations and efficiencies to unlocking new opportunities, technology offers unparalleled advantages. The tools available to your business can significantly impact your operations, and HubSpot, a leading CRM and CMS platform, provides various tools and integration options. Among these are CRM Cards and UI Extensions (Custom Cards), which stand out for their powerful and unique capabilities.

What Are CRM Cards and UI Extensions?

CRM Cards and UI Extensions are just one of many different types of integrations. These powerful tools can:

• Link HubSpot records to third-party applications
• Displays relevant and important data from third-party sources
• Allows varying levels of interaction with said data
• Highly customizable
  

Strengths of Each

Despite their similarities, these tools do hold their own unique advantages over the other.

CRM Cards:

• Ideal for simpler and more straight-forward integrations
• Allows greater control for straight-forward integrations and in controlling what the user can do
• Excels at displaying data from third parties and the currently viewed record
• Easy to create (JSON-based)
• Easy to configure
• Great at basic tasks such as buttons and input fields

UI Extensions:

• Suitable for complex integrations and dynamic interactions
• Allows greater control over user functionality
• Utilizes advanced React and JavaScript capabilities
• Supports intricate menus and data management features
• Great at complex, repetitive tasks and data management

Limitations of Each

While CRM Cards and UI Extensions offer powerful capabilities, they also have limitations.

CRM Cards:

• Limited Dynamic Functionality: They are often constrained to static displays and are less effective for dynamic or real-time data interactions.
• Dependence on External APIs: Updates and data handling are restricted by the external system's API capabilities, limiting the scope of what can be achieved.
• API Compatibility Issues: Not all third-party APIs support updates or data changes, which may require additional endpoints or workarounds or may not be feasible.
• Public Apps Requirement: CRM Cards typically require Public Apps, which may involve additional setup and management.

UI Extensions:

• High Subscription Requirement: Development requires an Enterprise-level HubSpot subscription, which may not be accessible to all users.
• Technical Expertise Needed: Building UI Extensions requires knowledge of JavaScript and React, necessitating the involvement of a skilled developer.
• Longer Setup Time: The complexity of UI Extensions often leads to longer setup and development times compared to CRM Cards.
• Local Development: Extensions must be created in a local development environment and then uploaded to HubSpot, adding another layer of complexity.

How You Can Use CRM Cards and UI Extensions

But what does that all mean, and how can it benefit your business? There are many different ways that these tools can help

CRM Card:

• Display Order Status: This option displays the current status of a customer's order, including shipping details, delivery estimates, etc.
• Show Subscription & Renewal Information: You're able to show record information - you can show what tier the client has, renewal date, and other important information that can be vital when planning projects with said client
• Showing Key Info Related to the Record: If it is simply key information and nothing more, a CRM Card would be ideal for this. Upon page load, the card will communicate to the specified application and retrieve the desired data. 
• Showing Recent Activity: You can also show recent activity within the CRM Card from parties (depending on the API). This could include new areas where the record is, the last contact point with the record, the last changes to the record, the last meeting with the record, etc.
• Integrate Billing & Payment Status: Show the current billing and payment status from an external invoicing system.
• And more

UI Extensions:

• Custom Quoting Tool: Allow sales reps to create and configure product bundles, apply discounts, and generate quotes directly from the record.
• Custom Billing & Payment Portal: Integrate the UI Extension directly into the Payment/Accounting processing systems, allowing you to update payments, process, and view payment history and outstanding invoices, among other things, in either HubSpot or external systems.
• Real-Time Information: Utilizing various systems, you can, in real-time, have information related to the record displayed. This would be useful for Customer Support agents to see real-time data and up-to-date interactions and make decisions and suggestions directly from the record.
• Custom Reports: Using the power of JS + React and the tools from HS, you can build Custom Reports unique to each record to help visualize data.
• Creating Tasks: Allows users to create tasks/assignments or similar within third-party systems directly from the record itself, without needing to swap to the other application.

How We're Using UI Extensions

We’ve developed our own UI Extension Card, which allows us to create tasks within our ClickUp system directly from HubSpot. This enables us to look over notes, tickets, and other things within this record, quickly create a task within ClickUp, and immediately continue what the user was doing.

Additionally, this card takes advantage of the REACT and JavaScript capabilities. It retries the data dynamically, meaning that no matter how much our ClickUp system might change, the information and options it presents will always be accurate and current.

Here, we can see the UI Extension card in its regular state. It allows us to name the task, choose where it will be saved, and enter a description.

But once we select a space, the card expands, showing 2 more options: an "Advanced" tab and a "Submit" button. The Advanced tab allows us to select who to assign to this task, when it is due, the priority, apply the right tags, and finally assign the card's status.

Upon submission, you can create another task if you wish to. Additionally, because we developed the UI Extension, we can alter it as we use it. We can add features, remove features, and change features.

Final Thoughts

CRM Cards and UI Extensions are invaluable tools within HubSpot, showcasing the platform’s ability to support diverse and powerful integrations. These tools enable your business to centralize key applications and services, streamlining your operations by allowing you to access, update, and manage critical information—all of this without leaving the HubSpot record. Whether you need to view data, process payments, manage tickets, or perform other essential tasks, CRM Cards, and UI Extensions provide the functionality and flexibility to enhance workflow efficiency and improve overall productivity.

Talk to Pivot about Your Advanced HubSpot Requirements