El proceso de conectar widgets implica habilitar los scripts de JavaScript del widget en páginas específicas (interfaces) de Kommo. Por defecto, los widgets no se conectan en todas las interfaces, sino solo en las áreas solicitadas.

Tabla de áreas de conexión

Área de conexión	Descripción
lcard	Tarjeta de lead.
ccard	Tarjeta de contacto.
comcard	Tarjeta de compañía.
llist	Lista de leads.
clist	Lista de contactos.
tlist	Lista de tareas.
settings	Página de instalación y configuración del widget.
advanced_settings	Página de configuración avanzada del widget.
card_sdk	SDK de tarjetas (si deseas añadirla, también debes agregar lcard/ccard/comcard para que funcione en las tarjetas de las entidades relevantes).
catalogs	SDK de listas.
digital_pipeline	Configuración del pipeline digital.
lead_sources	Fuentes de leads.
widget_page	El widget se mostrará en la barra de menú izquierda (solo en Integraciones públicas).
sms	El widget puede usarse como un remitente de mensajes SMS del sistema.
mobile_card	El widget está disponible en la aplicación móvil.
salesbot_designer	El widget se puede utilizar al configurar el salesbots.
website_chat_button	El widget se puede utilizar al configurar el botón de chat web para usarlo como un botón en los sitios web
everywhere	Si el área donde quieres inicializar tu widget no se mencionó arriba, puedes utilizar el área de conexión `everywhere` y luego, en el código del widget, controlar dónde se muestra el widget.

Para habilitar la funcionalidad del widget, nuestro sistema necesita ser informado sobre las áreas donde operará el widget y dónde se utilizará el panel del widget en el lado derecho de la pantalla.

Para lograr esto, necesitas listar las áreas requeridas en el bloque locations del archivo manifest.json e indicar el uso del panel del widget configurando 1 o 0 como parámetro. Configurar el indicador en 1 mostrará el widget en el panel derecho de la tarjeta. Por otro lado, configurarlo en 0 inicializará el widget en la tarjeta, pero no lo mostrará en el panel derecho.

✍️
El área everywhere no acepta el parámetro 1/0 siempre está configurada en 0 para esta área.

Por ejemplo, este widget será inicializado en la página de configuración, en los ajustes del pipeline digital, en las fuentes de leads, en la página de configuraciones avanzadas y en las tarjetas y listas de contactos y leads, pero el panel derecho solo se utilizará en las tarjetas especificadas:

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

Cuando conectas un widget a cualquier interfaz, el script JS se cargará y la función callback render() será ejecutada, seguida de init() y bind_actions().

Puedes controlar la capacidad de llamar a las funciones init() y bind_actions() cada vez que el usuario se mueve de un área a otra al especificar true o false en el bloque init_once del archivo manifest.json. Por ejemplo, los widgets VoIP deben mantener constantemente una conexión WebSocket y no deben ser interrumpidos, por lo que init_once debería configurarse en true. Si no hay un contexto común para todas las páginas, es mejor configurarlo en 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. — Cuando inicialices el widget en las áreas de la tarjeta de contacto (**ccard**) o la tarjeta de lead (**lcard**), el panel del widget en el lado derecho del feed aparecerá inmediatamente una vez que se abra la tarjeta.

Cuando estés trabajando con las áreas de lista, ten en cuenta que el widget no se añadirá automáticamente a la interfaz. Primero, aparecerá la lista, y una vez que selecciones al menos una fila de la lista utilizando las casillas de verificación, aparecerá el menú contextual. Entonces, elige la acción del widget desde el botón más. El panel del widget en el extremo derecho de la interfaz de la lista con tu widget será añadido a la página por el evento seleccionado, lo que disparará la función callback correspondiente en 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. — Puedes intentar ir a la lista de contactos, por ejemplo, y usar las casillas de verificación para seleccionar las filas de contactos deseadas y obtener el menú con tu widget como opción.

Para asegurarte de que el widget funcione en el pipeline digital, necesitas especificar digital_pipeline en las ubicaciones. También se requiere la parte en Python del widget con el endpoint digital_pipeline, así como el logo logo_dp.png con una resolución de 174×109.

Si tu widget tiene un scopelead_sources, entonces puedes verificar a qué pipeline de la cuenta está vinculado utilizando una solicitud HTTP.

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

La respuesta a tal solicitud muestra el pipeline_id, o se muestra en el script.js de tu widget.

Para trabajar con el SDK de listas, necesitas especificar un scope especial "catalogs", el ID de la lista con la cual funcionará el widget, y también implementar un callback especial loadCatalogElement.

Página del widget en la sección de Ajustes

Los widgets de Kommo pueden crear su página en la sección de Ajustes , y para hacerlo, necesitas especificar el scope advanced_settings en la lista "location", añadir el bloque “advanced” al manifest.json, e implementar un callback especial advancedSettings.

El widget tendrá el control completo de esta página y deberá formar las páginas del DOM en su estructura. El bloque "advanced" en el manifest.json deberá contener el título de la página de ajustes.