Step-by-Step Guide: Build Your First Custom CRM Card in HubSpot (Part 1)

Are you already familiar with custom cards in HubSpot, or have you ever even built one yourself? No? Well, then it's definitely about time to dive into this powerful HubSpot feature and unlock its full potential. In this comprehensive guide, we'll demystify the process and show you just how simple it is to create your own custom cards from scratch.

Don't worry if you're new to this – we'll take it step by step. No prior programming knowledge is required! So whether you're a seasoned developer or just starting out; a business user, marketing / sales professional or simply curious about HubSpot development: We'll show you how to tailor your HubSpot dashboard to suit your unique business needs.

Discover What Awaits You in this HubSpot Guide

Get ready for an exciting journey into the world of HubSpot customization! Here's a sneak peek of what's in store:

Understanding Custom Cards in HubSpot

Before we dive into the technical details, let's clarify what custom cards and other programming essentials such as APIs, serverless functions and local development are. By understanding these fundamentals, you'll be well-equipped to embark on your journey of HubSpot customization with confidence and creativity.

Building HubSpot Custom Cards with React

Brace yourself for the magic of crafting bespoke cards perfectly tailored to your business needs. Using React, a powerhouse JavaScript library, and serverless functions, we'll unveil the secrets of fetching external data and weaving it seamlessly into your HubSpot realm.

Initiating Local Development

Dive into the heart of development as we guide you through setting up your local environment. Discover the power of testing and refining your creations in a safe space before unveiling them to the world.

Definition: CRM Cards vs. Custom Cards in HubSpot

Let's begin by unraveling the essence of custom cards and distinguishing them from CRM cards. In HubSpot, both Custom Cards and CRM Cards serve distinct purposes and offer unique advantages.

CRM Cards = Extending the CRM

CRM Cards in HubSpot are predefined modules designed within a public app to provide essential information from other systems about contacts, companies, deals, tickets, and other CRM objects. These cards are available within the HubSpot CRM interface and may provide you with quick access to relevant details and actions related to specific records. 

This suggests that you'll have access to all requested record information in the CRM sidebar, akin to what you're already familiar with from the standard HubSpot CRM cards:

For example, a CRM card could fetch real-time sales data from an external CRM system such as Salesforce, Microsoft Dynamics 365, Zoho CRM or Pipedrive, and display it directly within your HubSpot records. 

Custom Cards = Extending the CRM UI

Custom Cards in HubSpot, on the other hand, offer a more flexible and customizable solution for extending the functionality of the HubSpot CRM interface. Developed within a private app using the HubSpot CMS and JavaScript, Custom Cards enable you to create dynamic and interactive CRM record pages in the “Overview” tab that can display personalized data from external sources and perform custom actions:

Imagine, you aim to integrate a segment of your company's ERP system in HubSpot contact records, allowing sales representatives to review inventory levels while preparing potential deals. You can make a custom card that, when you click a button, opens a popup with external content inside CRM records.

By the way, custom and CRM cards could also integrate seamlessly with your existing workflows, providing actionable insights and streamlining processes like never before. Explore the possibilities further as we dive into the intricacies of custom cards. But first, it’s necessary to know about certain programming essentials, i.e. APIs, serverless functions, and local development. 

What are APIs?

APIs (Application Programming Interfaces) serve as the backbone for communication between HubSpot and external systems. They enable the exchange of data, allowing custom cards to pull information from diverse sources and display it within the HubSpot interface. Understanding APIs is essential for integrating external data seamlessly into custom cards.

What are Serverless Functions?

Serverless functions provide the logic and backend processing needed to fetch, manipulate, and serve data to custom cards. They allow developers to execute code without managing servers, offering scalability and cost-efficiency. Utilizing serverless functions, developers can enhance the functionality of custom cards by performing complex operations and accessing external resources.

What is a Local Development?

Local development refers to the process of building and testing custom cards on a developer's local machine before deploying them to production. It involves setting up a development environment, writing code, and running tests to ensure the card functions as intended. Local development enables developers to iterate quickly, identify issues early, and refine their custom cards before making them available to users.

In summary, custom cards in HubSpot offer more customization options and components than CRM cards, catering to diverse business needs. By leveraging programming essentials like APIs, serverless functions, and local development, developers can unlock the full potential of custom cards, integrating external data seamlessly and enhancing functionality. With these tools at hand, you can create powerful solutions tailored to your specific requirements, streamlining processes and driving business growth.

Getting Started with Custom Cards in HubSpot

To begin building your custom card, you'll need a few tools and resources:

1. HubSpot App Developer Account: Create an app developer account here.

2. HubSpot Test Account: Create a developer test account in your newly created app developer account to access the necessary tools and resources. You will be directed to one of the following two sites, as shown in the screenshots below:

3. Enroll in UI Extensions Beta:In your newly created developer test account, join the Beta program “CRM development tools to build UI extensions with React as frontend” to access the latest features and updates in HubSpot.

4. Node.js: Ensure the latest version of Node.js is installed on your system to run JavaScript applications.
5. Visual Studio Code (VS Code): Install the latest version of VS Code on your computer. It’s a versatile text editor that you will use for coding.
6. VS Code Extensions: Add the following two extensions to VS Code: 

• 
  HubSpot which provides a set of tools to streamline local HubSpot development.

• Prettier, a code formatter that follows specific rules to format your code.

• Open the terminal by clicking on the three dots in the upper left corner, choosing “Terminal” and then “New Terminal” (shortcut: ctrl + shift + ö):

• Copy / Paste the following code in your terminal and hit“Enter” to install the HubSpot CLI globally:

For Windows computers:

• To allow the execution of script files on Windows computers start “PowerShell” on your Windows computer with the “Run as administrator” option:

• Next, copy the following command, paste it into the PowerShell-terminal and hit “Enter”:

• Confirm the change by typing “Y” and hitting “Enter” on your keyboard:

• To learn more about execution policies in Windows computers, read this article.

For MacOS:

• To allow the execution of script files on MacOS computers copy / paste the following command in your VS Code- or alternatively MacOS-Terminal and hit “Enter” again:

• Then enter the password for your MacOS computer (attention: you won’t see any asterisks when typing your password…just hit “Enter” when you’re done).

• Continue with the next steps in VS Code.

Setting Up Your Environment

Once you have all the tools in place, it's time to set up your development environment. Follow these steps to make a connection to your HubSpot app test account, install a sample custom card and upload it to the test account:

• Create a new folder on your computer desktop and name it something like "customcard."
• Open up your newly created folder in VS Code and authenticate it with your HubSpot account:
  • Use the HubSpot extension in VS Code

• Grant permission for the necessary tools

• Generate a personal access key

• Paste the value of your personal access key by allowing VS Code to open it with the HubSpot extension (You may ignore the 404-error and others that pop up in the lower right corner of your VS Code).

• Then, run the following command in your VS Code-terminal:

• To complete the HubSpot-initialization you have to name your account, e.g. customCardProject, and press “Enter.”
• If you’re asked to choose a project template, hit your arrow keys until “Build a multi-step flow” is highlighted and press “Enter.” Otherwise proceed with step 6.
• Now, you have to change the directory to multi-step flow by running the following line in your terminal:

• Execute the following line to install the dependencies required for this project:

• Finally, you want to upload your samplecard to your test account by running the following line in your terminal:

• Type “y” for “Yes” in your terminal when asked if you want to create the project multi-step-flow in your test account and hit “Enter”.
• Congratulations! You’ve created a sample custom card! To see the what it looks like, follow the next steps in your HubSpot test account:
  • Open up a contact record.
  • Click on “Custom Tabs” in the upper right corner of the overview tab.
  • Click on the default view, remove all the entries and select the multi-step flow example card you’ve uploaded by selecting “Add cards” → “Extension cards”.

• Click on the X in the upper right and then on “Save and Exit” which brings you back to the contact record. There you can see your custom card which illustrates the collaboration of various elements in creating a multi-step process. To be more concrete, this card enables you to dispatch a meal from a nearby eatery to any of your contacts.

Explore more sample cards

If you're seeking further inspiration for custom cards, delve into the sample cards and templates available from HubSpot. These resources provide invaluable insights and inspiration for your projects, empowering you to unlock the full potential of custom cards within your HubSpot workflows. For example, you could display an iframe modal which integrates a segment of your company's ERP system in HubSpot contact records as described above.

If, however, you're ready to craft your very own custom card, stay tuned for part two of this guide, coming soon. Don't miss out - subscribe to our blog news!