O processo de conexão de widgets envolve a habilitação dos scripts JavaScript do widget em páginas (interfaces) específicas do Kommo. Por padrão, os widgets não são conectados em todas as interfaces, mas apenas nas áreas solicitadas.

Tabela das áreas de conexão

Area de conexão	Descrição
lcard	Cartão do Lead
ccard	Cartão do Contato
comcard	Cartão da Empresa
llist	Lista de leads
clist	Lista de contatos
tlist	Lista de tarefas
settings	Página de instalação e configuração do widget
advanced_settings	Página de configurações avançadas do widget
card_sdk	SDK de cartão (se você quiser adicioná-lo, também deve adicionar lcard/ccard/comcard para funcionar nos cartões das entidades relevantes)
catalogs	Lista de SDK
digital_pipeline	Configurações do pipeline digital
lead_sources	Fontes de leads
widget_page	O widget será exibido na barra de menu à esquerda (apenas integrações públicas)
sms	O widget pode ser usado como remetente de mensagens SMS do sistema
mobile_card	O widget está disponível no aplicativo móvel
salesbot_designer	O widget pode ser usado ao configurar os salesbots
website_chat_button	O widget pode ser usado ao configurar o botão de chat do site para ser utilizado como um botão em websites
everywhere	Se a área onde você deseja inicializar o seu widget não foi mencionada acima, você pode usar a área de conexão`everywhere` e, no código do próprio widget, controlar onde ele será exibido.

Para habilitar a funcionalidade de um widget, nosso sistema precisa ser informado sobre as áreas onde o widget irá operar e onde ele usará o painel à direita da tela.

Para fazer isso, você precisa listar as áreas necessárias no bloco locations do arquivo manifest.json e indicar o uso do painel do widget, configurando 1 ou 0 como parâmetro. Configurar o indicador para 1 exibirá o widget no painel à direita de um cartão. Por outro lado, configurá-lo para 0 inicializará o widget no cartão, mas não o exibirá no painel à direita.

✍️
A área everywhere não aceita o parâmetro 1/0, e ela sempre é configurada como 0 para essa área.

Por exemplo, este widget será inicializado na página de configurações, nas configurações do pipeline digital, nas fontes de leads, na página de configurações avançadas, e nas cartões e listas de contatos e leads, mas o painel direito será usado apenas nos cartões especificados:

"locations":[
    "lcard-1",
    "llist-0",
    "ccard-1",
    "clist-0",
    "comcard-0",
    "card_sdk",
    "settings",
    "digital_pipeline",
    "lead_sources",
    "catalogs",
    "advanced_settings"
  ]

Quando você conecta um widget a qualquer interface, o script JS será carregado, e a função de callback render() será acionada, seguida por init() e bind_actions().

Você pode controlar a capacidade de chamar as funções init() e bind_actions() toda vez que o usuário se mover de uma área para outra, especificando true ou false no bloco init_once do arquivo manifest.json. Por exemplo, idgets de VoIP devem manter constantemente uma conexão WebSocket e não devem ser interrompidos, portanto, o init_once deve ser configurado como true. Se não houver um contexto comum para todas as páginas, é melhor definir como false.

When you initialize the widget in the contact card (**ccard**) or the lead card (**lcard**) areas, the widget's panel on the right-hand side of the feed will appear immediately once the card is opened. — Quando você inicializa o widget nas áreas de cartão de contato (**ccard**) ou cartão de lead (**lcard**), o painel do widget no lado direito do feed aparecerá imediatamente assim que o cartão for aberto.

Quando você estiver lidando com as áreas de lista, observe que o widget não será adicionado automaticamente à interface. Primeiro, a lista aparecerá e, uma vez que você selecione pelo menos uma linha da lista usando as caixas de seleção, o menu de contexto aparecerá. Em seguida, escolha a ação do widget no botão Mais. O painel do widget no extremo direito da interface da lista, com o seu widget, será adicionado à página pelo evento selecionado, o qual acionará a função de callback correspondente no script.js.

You can try going to the contacts list, for example, and use the checkboxes to select the desired contacts rows and get the menu with your widget as an option. — Você pode tentar ir para a lista de contatos, por exemplo, e usar as caixas de seleção para selecionar as linhas de contatos desejadas e obter o menu com seu widget como uma opção.

Para garantir que o widget funcione no pipeline digital, você precisa especificar o digital_pipeline nas localizações. A parte em Python do widget com o endpoint digital_pipeline também é necessária, assim como o logo logo_dp.png com uma resolução de 174×109.

Se o seu widget tiver um escopo lead_sources você pode verificar a qual pipeline da conta ele está vinculado usando a requisição HTTP:

GET https://subdomain.kommo.com/api/v4/widgets/{widget_code}

A resposta de tal requisição mostrará o pipeline_id, ou então você pode obter essa informação no script.js do seu widget.

Para trabalhar com o SDK de listas, você precisa especificar um escopo especial "catalogs", o ID da lista com a qual o widget irá trabalhar e também implementar um callback especial loadCatalogElement.

Página do Widget na seção de Configurações

Os widgets do Kommo podem criar sua própria página na seção de Configurações. Para fazer isso, você precisa especificar o escopo advanced_settings na lista de "location" e também adicionar o bloco “advanced” no arquivo manifest.json, além de implementar um callback especial chamado advancedSettings.

O widget terá controle total sobre essa página e deverá formar as páginas do DOM e sua estrutura. O bloco "advanced" no manifest.json deve conter o título da página de configurações.