App cards reference

​

Project structure

• A JSON schema definition file for each card type (*-hsmeta.json).
• A React file that renders the card’s front-end. This can be a .jsx or .tsx file.
• A package.json file to handle any needed dependencies.

project-folder/
└── src/
    └── app/
        ├── app-hsmeta.json
        └── cards/
            └── my-app-card-hsmeta.json
            └── my-app-card.jsx
            └── package.json

​

App card schema

{
  "uid": "example-card",
  "type": "card",
  "config": {
    "name": "Hello Example App",
    "description": "A description of the card's purpose.",
    "location": "crm.record.tab",
    "entrypoint": "/app/cards/ExampleCard.jsx",
    "objectTypes": ["contacts"]
  }
}

Fields marked with * are required.

​

Supported objects

​

Supported locations

• crm.record.tab: places the extension in the middle column of CRM record pages, either in one of HubSpot’s default tabs or in a custom tab. When objectType is set to COMPANIES, the card will also be available in the sales workspace target accounts preview panel.

Show screenshot

• crm.record.sidebar: displays the extension in the right sidebar of CRM record pages. Extensions in the sidebar cannot use CRM data components. When objectType is set to DEALS, the card will also be available in the sales workspace deals sidebar.

Show screenshot

• crm.preview: displays the app card in the preview panel that you can access throughout the CRM. When using this location, the extension will be available when previewing the objectTypes specified in the JSON config file. This includes previewing records from within CRM record pages, index pages, board views, and the lists tool. Learn more about customizing previews.

Show screenshot

• helpdesk.sidebar: displays the card in the ticket sidebars within help desk. This includes both the ticket preview panel on the help desk home page and the right sidebar of the ticket view in help desk. To add a card to this location, you’ll need to configure your help desk settings to include the card.

Show screenshots

• Help desk home:

• Help desk ticket view:

​

Building the React front-end

import React from "react";
import { Text, Button, Flex, hubspot } from "@hubspot/ui-extensions";

// Define the extension to be run within the Hubspot CRM
hubspot.extend(() => <Extension />);

// Define the Extension component
const Extension = () => {
  return (
    <Flex direction="column" gap="medium">
      <Text>This is a simple getting started UI extension with static text.</Text>
      <Button onClick={() => console.log("Button clicked!")}>Click me!</Button>
    </Flex>
  );
};

• UI extension components reference documentation
• UI extensions SDK

​

Managing dependencies

• @hubspot/ui-extensions
• react
• typescript

{
  "name": "hubspot-example-extension",
  "version": "0.1.0",
  "license": "MIT",
  "dependencies": {
    "@hubspot/ui-extensions": "latest",
    "react": "^18.2.0"
  },
  "devDependencies": {
    "typescript": "^5.3.3"
  }
}