Skip to content

The HubSpot CRM Card Playbook

Your most complex business cases, 
built on top of HubSpot’s UI.

CRM cards are micro-applications that live on your CRM record pages. They extend HubSpot’s functionality beyond what you can do with out-of-the-box functionality. With CRM Cards, your team can complete tasks that would usually require them to access multiple systems, entirely within HubSpot.

* The items in this guide are illustrative. They aren't downloadable apps, but our hope is that it gets your ideas flowing, and if you want to build something similar you give us a shout! 

CRM Card (2)

Table of Contents

When to use a CRM Card

There are three types of problems that CRM cards are excellent solutions for:

icon - Tech Transformation Consultants-1

Accessing and Actioning Data from External Sources

These types of CRM cards show you data from outside of HubSpot or allow you to action data by adding or editing data that exists elsewhere. 

For example, a Sensitive Information Retrieval card allows you to retrieve credit card information that is stored in a PCI-compliant vault outside of HubSpot.

icon - data pipelines-1

Creating a Customized Output Based on a Series of Inputs

These types of cards ask a set of questions and, based on your answers, provide you with a response. 

For example, a CPQ card asks you questions about products, bundles, and pricing, and provides you with a custom-built quote. 

icon - content management-1

Record-Specific Reports

These types of cards will show reports that are specific to that contact, company, deal, or other record. 

For example, a web visits report could show you a timeline of a single contact’s website activity. 

Some cards will combine these multiple types of functionality. For example, an Inventory Management card will access current inventory levels from an external system, let you select which ones you want, add them as line items to a deal, and then reduce the amount of inventory in your external system.


CRM Card Options


React vs. JSON:
CRM cards can be coded with React or JSON. React offers more layout flexibility and design elements. JSON is slightly more stable, since it's been in beta longer.

Embedded vs. Iframe
CRM cards can be embedded into the HubSpot record and appear as a native UI element or can pop up as an iframe, which allows for more complex processes and customization.


CRM Card Use Cases

CRM Cards can be placed on any HubSpot in the middle column or right sidebar of any object record page, including Contacts, Deals, Companies, Tickets, and even Custom Objects. The following concepts show a number of potential use cases for CRM cards across objects and the customer buying journey. 

Contact Cards

Sensitive Information Retrieval

HubSpot doesn't allow you to store sensitive data like credit card numbers, SSNs, passport numbers, or medical information. That means your team has to access multiple systems to complete certain tasks. This CRM card allows you to save and retrieve a contact's credit card information that is stored in a PCI-compliant vault without leaving HubSpot.

The card opens the door for financial services, healthcare, and travel companies who may have been wary of HubSpot's data restrictions to embrace the platform and build it into their day-to-day processes. 

PII (1)-1
PII (2.0)


Individual Contact Website Visits

A contact’s website activity can be viewed in a feed, but there is no way to see a graph or visual timeline of a contact’s website activity.

This card shows the number of visits a contact has made to your website over time, with taller columns indicating more visits on a specific date. 

This provides you with a more comprehensive view of your contact's activities. 

Contact_ Individual Website Visits - Record


Deal Cards

Appointment Scheduling

Companies that book time for services need to ensure they have an up-to-date view of the times and services that are available in order to avoid double booking. This CRM card integrates real-time scheduling data from your scheduling system or POS into HubSpot's Deal record. It lets you select services, reserve time slots, and automatically updates the deal value, all within the same interface.

Deal_ Appointment Scheduler - 1 of 2 - Add Services - Record (2)
Deal_ Appointment Scheduler - 2 of 2 - Calendar View - Record (2)




CPQ / Deal Builder

Without CPQ, companies face manual errors in quoting, inconsistent pricing, and delayed sales cycles. There's a risk of offering outdated or incompatible product configurations. Sales reps waste time navigating complex pricing matrices and approval workflows, reducing time spent selling. Inconsistency in quotes erodes customer trust and affects deal quality. Poor data centralization impacts analytics, making revenue forecasting imprecise.

This CRM card solves those problems by connecting directly with your ERP to get up-to-date pricing and automatically configures a quote directly in HubSpot. This significantly reduces errors and the amount of time your team has to spend building quotes, which means they can spend more time selling. 

Deal_ CPQ - 1 of X - Record
Deal_ CPQ - 2 of X - Record (2)


Company cards

Location-Based Field Rep Finder

Companies that operate in multiple geographic locations often need to connect prospects or clients to a field representative or office that is closest to them.

This typically involves getting an address from the company and manually looking up which rep is closest by pulling up a map.

This card eliminates the manual lookup process by automatically identifying the closest rep when an address is entered by using Google Maps API. 

Company_ Location-Based Rep Finder - Record


Ticket Cards

Create a new Slack Channel

When a customer submits a support ticket, the support manager may need to loop in multiple internal parties to get them the support they need. Rather than switching to Slack and copying and pasting the contents of the support ticket, this CRM card allows your team to create a Slack channel/group message directly from the ticket record.

Ticket_ Slack Channel - 1 of 2 - Record
Ticket_ Slack Channel - 2 of 2 - Record



SLA Monitoring

Your Customer Support team needs to respond to requests in a timely fashion. If you’ve formalized that into an SLA, then your team needs a way to monitor whether they are honoring that agreement with the customer.

This card shows when the request came in, and how long your team has to complete various follow-up tasks in order to comply with the SLA.

You can also add clickable buttons to initiate those tasks. 

Ticket_ SLA - Record


BONUS: Custom Object Card

Trade Show Floor Plan

If you host conferences or trade shows and sell booth space for sponsorships, you need to know what booths are available and which are already taken so that you don’t overbook or undersell the conference floor.

This card has a floor plan that shows what spaces are taken and which are available, as well as prices for each.

When you select a booth space, you can search for a company to associate it with and it will automatically create a deal record for you to complete the sale. 

Trade Show booth

HubSpot's Extensibility Unlocked

Whatever business process you need, we can build it. Aptitude 8 has the largest technical consulting team in the HubSpot ecosystem and we’ll work with you to come up with a custom solution. 

Ready to get started?

Contact Us

Let's make things happen together.

Reach out to us and we will schedule some time with an expert on our team to learn more about your use case, the problems you're trying to solve, and talk through our process to help you solve them. 


We can't wait to meet you.