Referencia de tarjetas de aplicación (BETA)

​

Estructura del proyecto

• Un archivo de definición del esquema JSON para cada tipo de tarjeta (*-hsmeta.json).
• Un archivo React que renderiza la interfaz de la tarjeta. Puede ser un archivo .jsx o .tsx.
• Un archivo package.json para gestionar las dependencias necesarias.

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

​

Esquema de la tarjeta de aplicación

{
  "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"
    ]
  }
}

Los campos marcados con * son obligatorios.

​

Objetos compatibles

​

Ubicaciones compatibles

• crm.record.tab: coloca la extensión en la columna central de las páginas de registros del CRM, en una de las pestañas predeterminadas de HubSpot o en una pestaña personalizada. Si objectType está configurado como COMPANIES, la tarjeta también estará disponible en el panel de vista previa de cuentas objetivo del espacio de ventas.

Show captura de pantalla

• crm.record.sidebar: muestra la extensión en la barra lateral derecha de las páginas de registro del CRM. Las extensiones de la barra lateral no pueden utilizar componentes de datos del CRM. Si objectType está configurado como DEALS, la tarjeta también estará disponible en la barra lateral de negocios del espacio de ventas.

Show captura de pantalla

• crm.preview: muestra la tarjeta de la aplicación en el panel de vista previa al que puedes acceder en todo el CRM. Cuando utilices esta ubicación, la extensión estará disponible al previsualizar el objectTypes especificado en el archivo de configuración JSON. Esto incluye la previsualización de registros desde las páginas de registros del CRM, páginas de índice, vistas de tablero y la herramienta de listas. Más información sobre cómo personalizar las vistas previas.

Show captura de pantalla

• helpdesk.sidebar: muestra la tarjeta en las barras laterales del ticket dentro del centro de ayuda. Esto incluye tanto el panel de vista previa del ticket en la página de inicio del centro de ayuda como la barra lateral derecha de la visualización del ticket en el centro de ayuda. Para agregar una tarjeta a esta ubicación, tendrás que configurar los ajustes de tu centro de ayuda para incluir la tarjeta.

Show capturas de pantalla

• Página principal del centro de ayuda:

• Vista del ticket del centro de ayuda:

​

Crear la interfaz de React

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>
  );
};

• Documentación de referencia de los componentes de ampliación de la interfaz de usuario
• SDK de extensiones de IU

​

Gestionar las dependencias

• @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"
  }
}