> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: fad97a26-b363-4ecc-8ab2-40fe9174b99d
---

# Create a new card

> Defines a new card that will become active on an account when this app is installed.

export const SupportedProducts = ({marketing, sales, service, cms, data, commerce, crm, marketingLevel, salesLevel, serviceLevel, cmsLevel, dataLevel, commerceLevel, crmLevel}) => {
  const translations = {
    description: "Requires one of the following products or higher.",
    productNames: {
      marketing: "Marketing Hub",
      sales: "Sales Hub",
      service: "Service Hub",
      cms: "Content Hub",
      data: "Data Hub",
      commerce: "Revenue Hub",
      crm: "Smart CRM"
    },
    tiers: {
      free: "Free",
      starter: "Starter",
      professional: "Professional",
      enterprise: "Enterprise"
    }
  };
  const translateTier = tier => {
    if (!tier) return '';
    const lowerTier = tier.toLowerCase();
    return translations.tiers[lowerTier] || tier;
  };
  const products = [{
    name: marketing ? translations.productNames.marketing : '',
    level: translateTier(marketingLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/marketing-bolt.svg",
    alt: "Marketing Hub"
  }, {
    name: sales ? translations.productNames.sales : '',
    level: translateTier(salesLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/sales-star.svg",
    alt: "Sales Hub"
  }, {
    name: service ? translations.productNames.service : '',
    level: translateTier(serviceLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/service-heart.svg",
    alt: "Service Hub"
  }, {
    name: cms ? translations.productNames.cms : '',
    level: translateTier(cmsLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/content-play.svg",
    alt: "Content Hub"
  }, {
    name: data ? translations.productNames.data : '',
    level: translateTier(dataLevel),
    icon: "https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/subscription_key_icons/operations_icon.svg",
    alt: "Data Hub"
  }, {
    name: commerce ? translations.productNames.commerce : '',
    level: translateTier(commerceLevel),
    icon: "https://developers.hubspot.com/hubfs/Knowledge_Base/subscription_key_icons/commerce_icon.svg",
    alt: "Revenue Hub"
  }, {
    name: crm ? translations.productNames.crm : '',
    level: translateTier(crmLevel),
    icon: "https://developer.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/SmartCRM.svg",
    alt: "Smart CRM"
  }].filter(product => product.name && product.level);
  if (products.length === 0) return null;
  return <div>
      <div className="text-sm mb-2">{translations.description}</div>
      <div className={`grid ${products.length === 1 ? 'grid-cols-1' : 'grid-cols-2'} gap-1.5`}>
        {products.map((product, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'center'
  }}>
            <img src={product.icon} alt={product.alt} className="w-3.5 h-3.5 mr-1.5 mt-2.5 mb-2.5 flex-shrink-0 align-middle" />
            <span className="font-medium mr-1 text-sm">{product.name} -</span>
            <span className="text-sm">{product.level}</span>
          </div>)}
      </div>
    </div>;
};

<Accordion title="Supported products" defaultOpen="true" icon="cubes">
  <SupportedProducts marketing={true} sales={true} service={true} cms={true} marketingLevel="FREE" salesLevel="FREE" serviceLevel="FREE" cmsLevel="FREE" />
</Accordion>


## OpenAPI

````yaml specs/2026-03/crm-public-app-crm-cards-v2026-03.json POST /crm/extensions/cards-dev/2026-03/{appId}
openapi: 3.0.1
info:
  title: Public App Crm Cards
  description: Basepom for all HubSpot Projects
  version: 2026-03
  x-hubspot-product-tier-requirements:
    marketing: FREE
    sales: FREE
    service: FREE
    cms: FREE
    commerce: FREE
    crmHub: FREE
    dataHub: FREE
  x-hubspot-api-use-case: >-
    Add a custom card to contact records that displays data from your external
    bug tracking software.
  x-hubspot-introduction: >-
    Create custom cards to data from external systems on CRM records. Requires a
    public public app. These CRM cards are different from the UI extensions you
    can create with projects.
servers:
  - url: https://api.hubapi.com
security: []
tags:
  - name: Advanced
  - name: Basic
paths:
  /crm/extensions/cards-dev/2026-03/{appId}:
    post:
      tags:
        - Basic
      summary: Create a new card
      description: >-
        Defines a new card that will become active on an account when this app
        is installed.
      operationId: post-/crm/extensions/cards-dev/2026-03/{appId}_create
      parameters:
        - name: appId
          in: path
          description: The appId of the app containing the Legacy CRM Card(s)
          required: true
          style: simple
          explode: false
          schema:
            type: integer
            format: int32
      requestBody:
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/CardCreateRequest'
        required: true
      responses:
        '201':
          description: successful operation
          headers:
            Location:
              description: URL of the newly created resource
              style: simple
              explode: false
              schema:
                type: string
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/PublicCardResponse'
        default:
          $ref: '#/components/responses/Error'
          description: ''
      security:
        - oauth2:
            - developers-write
components:
  schemas:
    CardCreateRequest:
      required:
        - actions
        - display
        - fetch
        - title
      type: object
      properties:
        actions:
          $ref: '#/components/schemas/CardActions'
        display:
          $ref: '#/components/schemas/CardDisplayBody'
        fetch:
          $ref: '#/components/schemas/CardFetchBody'
        title:
          type: string
          description: The top-level title for this card. Displayed to users in the CRM UI.
    PublicCardResponse:
      required:
        - actions
        - auditHistory
        - display
        - fetch
        - id
        - title
      type: object
      properties:
        actions:
          $ref: '#/components/schemas/CardActions'
        auditHistory:
          type: array
          description: >-
            A list of actions performed on the card, including creation,
            deletion, and updates.
          items:
            $ref: '#/components/schemas/CardAuditResponse'
        createdAt:
          type: string
          description: The date and time when the card was created.
          format: date-time
        display:
          $ref: '#/components/schemas/CardDisplayBody'
        fetch:
          $ref: '#/components/schemas/PublicCardFetchBody'
        id:
          type: string
          description: The unique id of the card.
        title:
          type: string
          description: The top-level title for this card. Displayed to users in the CRM UI.
        updatedAt:
          type: string
          description: The date and time when the card was last updated.
          format: date-time
    CardActions:
      required:
        - baseUrls
      type: object
      properties:
        baseUrls:
          type: array
          description: >-
            A list of URL prefixes that will be accepted for card action URLs.
            If your data fetch response includes an action URL that doesn't
            begin with one of these values, it will result in an error and the
            card will not be displayed.
          items:
            type: string
    CardDisplayBody:
      required:
        - properties
      type: object
      properties:
        properties:
          type: array
          description: >-
            Card display properties. These will will be rendered as "label :
            value" pairs in the card UI. See the [example card](#) in the
            overview docs for more details.
          items:
            $ref: '#/components/schemas/CardDisplayProperty'
    CardFetchBody:
      required:
        - cardType
        - objectTypes
        - targetUrl
      type: object
      properties:
        cardType:
          type: string
          description: A deprecated field to determine the type of card returned.
          enum:
            - EXTERNAL
            - SERVERLESS
        objectTypes:
          type: array
          description: >-
            An array of CRM object types where this card should be displayed.
            HubSpot will call your data fetch URL whenever a user visits a
            record page of the types defined here.
          items:
            $ref: '#/components/schemas/CardObjectTypeBody'
        serverlessFunction:
          type: string
          description: A deprecated field to specify serverless functionality with the card
        targetUrl:
          type: string
          description: >-
            URL to a service endpoints that will respond with card details.
            HubSpot will call this endpoint each time a user visits a CRM record
            page where this card should be displayed.
    CardAuditResponse:
      required:
        - actionType
        - applicationId
        - authSource
        - changedAt
        - initiatingUserId
        - objectTypeId
      type: object
      properties:
        actionType:
          type: string
          description: >-
            The type of action performed, with possible values: CREATE, DELETE,
            UPDATE.
          enum:
            - CREATE
            - DELETE
            - UPDATE
        applicationId:
          type: integer
          description: The ID of the application associated with the card.
          format: int32
        authSource:
          type: string
          description: >-
            The source of authentication for the action, with possible values:
            APP, EXTERNAL, INTERNAL.
          enum:
            - APP
            - EXTERNAL
            - INTERNAL
        changedAt:
          type: integer
          description: The timestamp indicating when the change occurred.
          format: int64
        initiatingUserId:
          type: integer
          description: The ID of the user who initiated the action.
          format: int32
        objectTypeId:
          type: integer
          description: The ID of the card.
          format: int64
    PublicCardFetchBody:
      required:
        - objectTypes
        - targetUrl
      type: object
      properties:
        objectTypes:
          type: array
          description: >-
            An array of CRM object types where this card should be displayed.
            HubSpot will call your target URL whenever a user visits a record
            page of the types defined here.
          items:
            $ref: '#/components/schemas/CardObjectTypeBody'
        targetUrl:
          type: string
          description: >-
            URL to a service endpoint that will respond with details for this
            card. HubSpot will call this endpoint each time a user visits a CRM
            record page where this card should be displayed.
    Error:
      required:
        - category
        - correlationId
        - message
      type: object
      properties:
        category:
          type: string
          description: The error category
        context:
          type: object
          additionalProperties:
            type: array
            items:
              type: string
          description: Context about the error condition
          example: >-
            {invalidPropertyName=[propertyValue], missingScopes=[scope1,
            scope2]}
        correlationId:
          type: string
          description: >-
            A unique identifier for the request. Include this value with any
            error reports or support tickets
          format: uuid
          example: aeb5f871-7f07-4993-9211-075dc63e7cbf
        errors:
          type: array
          description: further information about the error
          items:
            $ref: '#/components/schemas/ErrorDetail'
        links:
          type: object
          additionalProperties:
            type: string
          description: >-
            A map of link names to associated URIs containing documentation
            about the error or recommended remediation steps
        message:
          type: string
          description: >-
            A human readable message describing the error along with remediation
            steps where appropriate
          example: An error occurred
        subCategory:
          type: string
          description: >-
            A specific category that contains more specific detail about the
            error
      example:
        message: Invalid input (details will vary based on the error)
        correlationId: aeb5f871-7f07-4993-9211-075dc63e7cbf
        category: VALIDATION_ERROR
        links:
          knowledge-base: https://www.hubspot.com/products/service/knowledge-base
    CardDisplayProperty:
      required:
        - dataType
        - label
        - name
        - options
      type: object
      properties:
        dataType:
          type: string
          description: Type of data represented by this property.
          enum:
            - BOOLEAN
            - CURRENCY
            - DATE
            - DATETIME
            - EMAIL
            - LINK
            - NUMERIC
            - STATUS
            - STRING
        label:
          type: string
          description: The label for this property as you'd like it displayed to users.
        name:
          type: string
          description: >-
            An internal identifier for this property. This value must be unique
            TODO.
        options:
          type: array
          description: >-
            An array of available options that can be displayed. Only used in
            when `dataType` is `STATUS`.
          items:
            $ref: '#/components/schemas/DisplayOption'
    CardObjectTypeBody:
      required:
        - name
        - propertiesToSend
      type: object
      properties:
        name:
          type: string
          description: A CRM object type where this card should be displayed.
          enum:
            - companies
            - contacts
            - deals
            - marketing_events
            - tickets
        propertiesToSend:
          type: array
          description: >-
            An array of properties that should be sent to this card's target URL
            when the data fetch request is made. Must be valid properties for
            the corresponding CRM object type.
          items:
            type: string
    ErrorDetail:
      required:
        - message
      type: object
      properties:
        code:
          type: string
          description: The status code associated with the error detail
        context:
          type: object
          additionalProperties:
            type: array
            items:
              type: string
          description: Context about the error condition
          example: '{missingScopes=[scope1, scope2]}'
        in:
          type: string
          description: The name of the field or parameter in which the error was found.
        message:
          type: string
          description: >-
            A human readable message describing the error along with remediation
            steps where appropriate
        subCategory:
          type: string
          description: >-
            A specific category that contains more specific detail about the
            error
    DisplayOption:
      required:
        - label
        - name
        - type
      type: object
      properties:
        label:
          type: string
          description: The text that will be displayed to users for this option.
        name:
          type: string
          description: JSON-friendly unique name for option.
        type:
          type: string
          description: The type of status.
          enum:
            - DANGER
            - DEFAULT
            - INFO
            - SUCCESS
            - WARNING
  responses:
    Error:
      description: An error occurred.
      content:
        '*/*':
          schema:
            $ref: '#/components/schemas/Error'
  securitySchemes:
    oauth2:
      type: oauth2
      flows:
        authorizationCode:
          authorizationUrl: https://app.hubspot.com/oauth/authorize
          tokenUrl: https://api.hubapi.com/oauth/v1/token
          scopes:
            developers-read: ''
            developers-write: ''
            private-apps-read: ''

````