SDK de extensões de chamada

Os SDK de extensões de chamada permitem que os aplicativos forneçam uma opção de chamadas personalizadas para os usuários do HubSpot diretamente de um registro no CRM. 

Uma extensão de chamadas consiste em três componentes principais:

1. O SDK de extensões de chamada, um SDK JavaScript que permite a comunicação entre seu aplicativo e o HubSpot.
2. Os endpoints de configurações de chamada são usados para definir as configurações de chamadas para o seu aplicativo. Cada conta da HubSpot que conecta seu aplicativo usará essas configurações.
3. O iframe de chamadas, que é onde seu aplicativo aparece para usuários do HubSpot e é configurado usando as configurações de chamada.

Para obter mais informações sobre a experiência de chamadas no aplicativo, examine este artigo da base de conhecimento. Depois que o aplicativo ativado de extensão de chamada estiver conectado ao HubSpot, ele aparecerá como uma opção no alternador de chamadas sempre que um usuário fizer uma chamada do HubSpot.

O SDK de extensões de chamada é uma biblioteca JavaScript usada para comunicação entre o HubSpot e o aplicativo de chamadas, que aparecerão dentro de um iframe. Essa comunicação inclui:

• O HubSpot informando ao seu aplicativo para qual número ligar.
• Seu aplicativo informando ao HubSpot quando a chamada está conectada e quando ela termina.
• O HubSpot informando ao seu aplicativo o ID de engajamento temporário que precisa ser atualizado com os detalhes da chamada.

Você pode encontrar o SDK neste repositório do GitHub com os requisitos técnicos e detalhes de uso para o SDK no seu aplicativo web.

As extensões de chamada são configuradas como parte de um app da HubSpot. Se não tiver um aplicativo, você pode criar um da sua conta do desenvolvedor da HubSpot. Se você ainda não tiver uma conta de desenvolvedor da HubSpot, faça login aqui.

Depois de definir as configurações de chamadas para o seu aplicativo, o que é uma tarefa única, essas configurações serão aplicadas a todos os usuários que conectarem o aplicativo à sua conta da HubSpot. Analise a guia Endpoints para obter detalhes sobre como criar essas configurações.

Depois que suas configurações de chamada estiverem prontas, os usuários precisarão passar pelo processo de conexão do aplicativo para disponibilizar o serviço de chamada na conta deles no HubSpot. 

As chamadas feitas com extensões de chamada passam pelas seguintes etapas:

1. O usuário clica no ícone Chamada em um registro de CRM.
2. O usuário seleciona seu aplicativo como provedor de chamada e clica no botão Chamada do navegador.
3. Uma iframe abre para o URL especificado nas configurações de chamada no seu aplicativo.
4. A chamada é concluída pelo seu aplicativo (exibido no iframe).
5. O HubSpot cria um engajamento temporário e envia o ID desse engajamento para o seu aplicativo pelo SDK de extensões de chamada.
6. Seu aplicativo atualiza o engajamento temporário com os detalhes completos da chamada.

Depois que um usuário conecta seu aplicativo ao HubSpot, ele aparecerá como uma opção adicional ao fazer chamada de um registro. Quando os usuários clicarem no ícone Chamada, a opção de fazer a chamada com seu aplicativo em vez do sistema de chamada padrão do HubSpot aparecerá. 

Saiba mais sobre fazer chamadas do HubSpot. 

Quando o usuário escolher fazer a chamada pelo navegador, um iframe abre para o URL especificado nas configurações de chamada no seu aplicativo. Este URL deve apontar para um aplicativo web personalizado que fará a chamada por meio do seu serviço de chamadas. Usando o SDK de extensões de chamada, seu aplicativo se comunicará com o app da HubSpot. As mensagens do app da HubSpot permitem que seu aplicativo saiba para qual número a ligar, e ele poderá enviar mensagens para eventos, como a término da chamada ou desconexão do usuário do seu serviço.

Ao criar seu aplicativo, há algumas considerações:

• Você precisará ter um aplicativo web que pode ser exibido dentro de um iframe, porque o HubSpot não processará nenhum conteúdo do iframe. Assim, você não pode definir o URL de iframe para um serviço de SIP de backend.
• Os parâmetros de altura e largura definidos pelas configurações da API determinarão o tamanho do iframe. Janelas com altura de 600px e largura de 400px funcionam melhor para a faixa maior de tamanhos de janela de navegador, incluindo telas menores.
• Você deve garantir que as condições de erro apareçam dentro do iframe. Assim, seu aplicativo poderá alertar os usuários sobre problemas de áudio, de rede e outros.

Durante o processo de criação do seu aplicativo, você pode definir manualmente o URL do iframe para seu navegador ao definir o valor localStorage. Isso permitirá definir um URL de localhost para testes locais.

Para definir o valor, abra as ferramentas de desenvolvedor do seu navegador e execute o seguinte comando JavaScript no console:

localStorage.setItem('LocalSettings:Calling:CallingExtensions', '{"name": "Example Calling app Title", "url": "https://myWidgetUrl/path/"}')

O valor name aparecerá no cabeçalho do widget de chamada, e o url será o URL usado no iframe. Quando esse item é definido, o nome definido aparecerá como uma opção para o provedor de chamadas ao clicar no ícone Chamada, e o widget de chamada usará o iframe url definido.

Os detalhes acima resultam em um engajamento que se parece com a imagem abaixo quando visualizado no HubSpot:

Analise os engajamentos do CRM para obter mais detalhes sobre como trabalhar com engajamentos.