Referência de cartões de aplicativo (BETA)

​

Estrutura do projeto

• Um arquivo de definição de esquema JSON para cada tipo de cartão (*-hsmeta.json).
• Um arquivo React que renderiza o frontend do cartão. Ele pode ser um arquivo .jsx ou .tsx.
• Um arquivo package.json para lidar com as dependências necessárias.

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

​

Esquema do cartão de aplicativo

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

Campos marcados com * são obrigatórios.

​

Objetos com suporte

​

Locais compatíveis

• crm.record.tab: coloca a extensão na coluna do meio das páginas de registro do CRM, em uma das guias padrão do HubSpot ou em uma guia personalizada. Quando objectType está definido como COMPANIES, o cartão estará igualmente disponível no painel de visualização de contas-alvo do espaço de trabalho de vendas.

Show captura de tela

• crm.record.sidebar: exibe a extensão na barra lateral direita das páginas de registro de CRM. As extensões na barra lateral não podem usar componentes de dados de CRM. Quando objectType está definido como DEALS, o cartão estará igualmente disponível na barra lateral de negócios do espaço de trabalho de vendas.

Show captura de tela

• crm.preview: exibe o cartão de aplicativo no painel de visualização que você pode acessar em todo o CRM. Ao usar este local, a extensão estará disponível ao visualizar o objectTypes especificado no arquivo de configuração JSON. Isso inclui a visualização de registros nas páginas de registro do CRM, páginas de índice, exibições de quadro e a ferramenta de listas. Saiba mais sobre como personalizar visualizações.

Show captura de tela

• helpdesk.sidebar: exibe o cartão nas barras laterais do ticket no help desk. Isso inclui o painel de visualização do ticket na página inicial do help desk e a barra lateral direita da exibição do ticket no help desk. Para adicionar um cartão a esse local, você precisará definir suas configurações de help desk.

Show capturas de tela

• Página inicial do help desk:

• Exibição do ticket do help desk:

​

Construção do frontend do 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>
  );
};

• Documentação de referência de componentes de extensão da interface do usuário
• SDK de extensões de interface

​

Gerenciamento de dependências

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