HubSpot allows developers to extend CRM functionality through custom app cards- interactive UI components that appear on records such as Contacts, Companies or Deals. With custom cards, you can display real-time data from external systems (like Salesforce, Google Sheets, or your internal APIs) right inside the HubSpot CRM record tab.
In this blog, you will get to know:
- How to create a custom app card in HubSpot
- Calling an external API to fetch data.
- Displaying that data dynamically in the custom card.
Prerequisite:
- HubSpot Developer account.
- Latest beta version of the HubSpot CLI.
- Latest version of Node.js
- Basic Knowledge of JavaScript, React, Next.js, and REST APIs
- Access to an external API
Let’s jump into the step-by-step guide
Step 1: Create an External API Endpoint
- Create a new Next.js App using the command: npx create-next-app@latest cat-facts
- In the app directory, create /api/catfacts and create a new route file (route.ts)
Start the server: npm run dev
- Open your browser and visit: http://localhost:3000/api/catfacts
Step 2: Deploy your next.js project to Vercel.
- Push your code to GitHub
- Log in to your Vercel account. If you don’t already have an account, register for a free one from this link https://vercel.com
- Click Add new->Project-> Import Git Repository
- Choose your repository
- If your API requires secrets or tokens, add Environment Variables
- Click deploy
- After a few seconds, your endpoint will be live e.g https://cat-facts-app-eight.vercel.app/
Step 3: Create an App
- Install the HubSpot CLI (npm install -g@hubspot/cli@latest) if not installed yet.
- Authenticate your account :hs account auth
- Run hs get-started->choose App-> name your project and set local directory.
- Upload the project to Hubspot: install dependencies hs project install -deps then hs project upload
Step 4: App authentication
For authenticating your app, go through this link and follow the instructions:https://github.com/HubSpot/oauth-quickstart-nodejs
Step 5: Create an App Card
In your project directory run:hs project add->choose card.This creates a cards/folder with config JSON(*-hsmeta.json) and a react.jsx component
Upload the card: run hs project install -deps, then hs project upload
In HubSpot, navigate to a record (e.g., a Contact)->click Customize->Default view->in the card library, filter “App”->Add your card->Save & exit.
Start local development if desired: hs project dev launches a local dev server; changes to .jsx will hot-reload.
Watch Live Demo
Conclusion
Adding a custom app card in HubSpot is one of the most effective ways to bring external data directly into your CRM Workspace. By creating a simple API endpoint and connecting it through HubSpot’s UI extensions, you can display real-time information from any external system.
This integration not only enhances visibility but also reduces the need for manual lookups, giving teams faster access to the insights they need.
If you’re looking for reliable HubSpot development services, we provide end-to-end setup, customization, integrations, and ongoing support.
No Data Found.
India 
USA
UK
Canada