Observação:
Anteriormente, esta página era intitulada "Visão geral das ferramentas de desenvolvimento de CRM". Ela foi atualizada para refletir o conjunto de ferramentas expandido, pois as extensões de interface do usuário também podem ser usadas para personalizar a interface do usuário do painel de visualização do help desk. Toda a documentação anterior das ferramentas de desenvolvimento de CRM foi expandida e movida para a seção de guias. Esta página foi atualizada para a posteridade.
Personalize a interface do usuário da HubSpot criando extensões de interface do usuário, alimentadas por aplicativos públicos e privados. As extensões de interface do usuário são desenvolvidas localmente usando a estrutura de projetos do desenvolvedor e permitem que você use recursos como sandboxes de desenvolvimento, controle de versão e integração com o GitHub para otimizar seu processo.
Por exemplo, você pode criar um cartão de aplicativo que recupere dados de uma fonte externa.
Abaixo está uma visão geral das ferramentas que você usará durante o processo de desenvolvimento da extensão da interface do usuário, juntamente com links para documentação detalhada para orientá-lo ao longo do caminho.
Observação:
Existem algumas maneiras de usar as ferramentas de personalização da interface do usuário da HubSpot, dependendo da sua assinatura do HubSpot:
- A criação de extensões de IU para aplicativos privados em uma conta HubSpot padrão requer uma assinatura Enterprise. No entanto, uma assinatura paga não é necessária para criar extensões de IU para aplicativos privados em contas de teste de desenvolvedor.
- Os aplicativos públicos são criados em contas de desenvolvedor, que não exigem uma assinatura paga. Se você estiver inscrito em Extensões de IU para aplicativos públicos beta, saiba mais sobre a criação de extensões de IU para aplicativos públicos.
Os projetos são o contêiner de nível mais alto do desenvolvimento de extensões de IU, pois contêm não apenas extensões de IU, mas também o aplicativo que as alimenta, juntamente com todos os outros ativos de suporte. Os projetos também permitem um processo de construção e implantação na plataforma da HubSpot com hs project
Comandos CLI, que você usará para controle de versão durante a compilação. Após a implantação em uma conta, você pode visualizar e gerenciar o projeto, o aplicativo e quaisquer extensões de interface do usuário incluídas na HubSpot. Isso inclui visualizar o histórico de compilação e monitorar chamadas de API.
Saiba mais sobre como criar projetos, e comece seguindo os guias de início rápido da extensão da IU para aplicativos privados ou aplicativos públicos.
Os aplicativos são a potência das extensões de interface do usuário, permitindo que você autentique solicitações de busca de dados e muito mais. Você pode criar extensões de interface de usuário para aplicativos públicos e privados, dependendo do seu caso de uso. As principais diferenças entre o tipo de aplicativo a ser usado incluem:
- Assinatura da HubSpot: você vai precisar de uma assinatura Enterprise para criar extensões de interface de usuário para aplicativos privados em uma conta padrão da HubSpot. No entanto, você pode experimentar o conjunto de ferramentas gratuitamente, optando por uma conta de teste de desenvolvedor no beta. E como as contas de desenvolvedor são gratuitas, não é necessária uma assinatura paga para criar com aplicativos públicos.
Observação:
A capacidade de criar extensões de IU para aplicativos públicos está atualmente em beta de acesso antecipado e a inscrição é separada das CRM ferramentas de desenvolvimento para construir extensões de IU com React como frontend beta para aplicativos privados.
- Distribuição: Os aplicativos privados são mais destinados ao uso em contas individuais, conforme necessário, pois devem ser criados para cada conta. Os aplicativos públicos são destinados ao uso em várias contas e incluem um fluxo de instalação fácil para o usuário final. Se você pretende listar seu aplicativo no App Marketplace, precisará criar um aplicativo público.
- Autenticação: aplicativos privados buscam dados usando funções sem servidor, e a HubSpot fornece o back-end autenticando solicitações com um token de acesso. Os aplicativos públicos buscam dados com a
hubspot.fetch()
API e solicitações de autenticação com OAuth, o que exige que você forneça um back-end personalizado. Como os tokens OAuth têm vida curta, sua integração precisará ter a infraestrutura para armazenar, gerenciar e atualizar os tokens com segurança. - Recursos suportados: Embora ambos os tipos de aplicativos suportem extensões de interface do usuário, os aplicativos públicos permitem que você inclua mais tipos de extensões como recursos em seu aplicativo, como eventos de linha do tempo ou usando o SDK de chamada.
Saiba mais sobre as diferenças entre esses tipos de aplicativos, bem como como criar e configurar ambos os aplicativos públicos e aplicativos privados usando projetos localmente.
As extensões de interface do usuário são elementos de interface do usuário personalizados e baseados em React que enriquecem a interface da HubSpot. No momento, os cartões de aplicativo para registros do CRM e help desk são a única extensão de UI disponível. Por exemplo, você pode criar um cartão que permita que os usuários enviem dados de formulário para um banco de dados externo de qualquer registro de contato ou um cartão que os representantes de suporte ao cliente podem usar para agir em tickets abertos na interface do usuário do help desk.
As extensões de interface do usuário são criadas usando projetos e consistem em um front-end e um back-end:
- Front-end da extensão da UI: parte da extensão destinada ao usuário, sob a forma de um cartão de aplicativo com componentes fornecidos pela HubSpot. Além de exibir informações, os usuários podem interagir com os componentes para realizar diversas ações. Você criará o front-end com React ou TypeScript.
- Back-end de extensão de interface do usuário: aplicativos privados buscam dados por meio de funções sem servidor, que permitem que uma extensão de interface do usuário envie e recupere dados para exibição em componentes, enquanto o back-end é fornecido pela HubSpot. Os aplicativos públicos usam a API hubspot.fetch, que exige que você traga seu próprio back-end baseado em REST para autenticar e autorizar solicitações.
Saiba mais sobre Extensões de IU.
Observação:
Os cartões de aplicativo que você pode construir com projetos são separados de cartões CRM clássicos, e não podem ser construídos de forma intercambiável. Se você já criou um aplicativo público que inclui um cartão CRM clássico, saiba como migrá-lo para o framework de projetos.
Para desenvolvimento de aplicativos privados, você pode usar as sandboxes de desenvolvimento permitem desenvolver projetos em um ambiente de testes leve para garantir que os componentes do seu projeto funcionem conforme o esperado antes da implantação em uma sandbox padrão ou conta de produção. As sandboxes de desenvolvimento são criadas por meio da CLI e podem ser acessadas na conta de produção da HubSpot. As sandboxes de desenvolvimento sincronizam alguns, mas não todos, os ativos da conta na criação e têm limites adicionais em comparação aos sandboxes padrão.
Ao criar extensões de interface do usuário para um aplicativo público, você usará contas de teste dentro da sua conta de desenvolvedor.
Saiba mais sobre como configurar uma sandbox de desenvolvimento.
Se preferir usar o GitHub para controle de versão, você pode conectar um Repositório GitHub a um projeto para acionar automaticamente compilações de projetos ao enviar uma alteração para o repositório conectado. Você pode então usar as ferramentas e fluxos de trabalho do GitHub para agilizar o desenvolvimento, independentemente de trabalhar sozinho ou com uma equipe.
Se você for um Superadministrador em uma conta Enterprise, poderá se ingressar nesta versão beta na página Atualizações do produto na sua conta da HubSpot:
-
Na sua conta da HubSpot, clique no seu nome de conta no canto superior direito e clique em Atualizações do produto.
-
Na barra lateral esquerda, selecione Em versão beta.
-
Na lista de versões beta, pesquise ou navegue até a versão beta das Ferramentas de desenvolvimento de CRM para criar extensões de interface do usuário com React como front-end e clique em Participar da versão beta.
Depois de ingressar na versão beta, comece com uma das seguintes opções:
- Siga o guia de início rápido para criar e implantar rapidamente um exemplo de cartão de aplicativo funcional.
- Veja amostras de extensões da HubSpot para ver exemplos do que é possível fazer.
- Construa seu projeto do zero começando com o guia de projetos da HubSpot.
A capacidade de criar extensões de IU para aplicativos públicos está no beta de acesso antecipado, ao qual você pode solicitar acesso aqui. Depois de se inscrever no beta, comece com os seguintes recursos: