Estructura del widget

Un widget representa la UI de la integración y puede utilizarse para personalizar y ampliar la funcionalidad de Kommo, como mostrar datos en áreas específicas, interactuar con el usuario o modificar los ajustes por parte de los administradores.

Por su estructura, un widget es un archivo de un conjunto de plantillas de JavaScript, CSS y Twig que se pueden cargar al sistema. Cuando conectamos el widget, sus archivos JS y su diseño se cargarán en el navegador junto con la interfaz de Kommo, permitiendo que el integrador interactúe con el usuario, interactuando con la API de Kommo o la API de su servicio directamente desde la interfaz de Kommo.

Si descomprimes el archivo widget.zip, verás los siguientes archivos:

Archivo¿Requerido?Descripción
manifest.jsonUn archivo JSON contiene la descripción del widget, los ajustes del widget, las opciones del widget que se muestran al usuario, las áreas de conexión del widget y las localizaciones compatibles.
script.jsUn archivo JS se vinculará a las áreas específicas en el manifest.json del lado del usuario.
style.cssPara asegurarse de que el widget no entre en conflicto con otros elementos del sistema y los widgets, el archivo CSS debe contener nombres de clases únicos para los elementos principales y sus elementos hijos. Además, los estilos para los elementos hijos deben establecerse en cascada en relación con la clase base.
imagesLa carpeta donde se almacenan los archivos de imagen del widget debe contener 6 archivos PNG, cada uno utilizado como el logo del widget en distintas áreas de visibilidad.
i18nLa carpeta contiene los archivos de localización en formato clave:valor. Las opciones de localización incluyen Inglés (en), Español (es), Portugués (pt), Turco (tr) e Indonesio (id). Todas las traducciones son accesibles desde JS.
templatesLos archivos Twig que puedes utilizar en tu widget (botones, formularios)

Prevención de errores

  • Codificación: Todos los archivos deben estar en codificación UTF-8 sin BOM.
  • Antes de subir el widget por primera vez, debes actualizar el código y la clave en el archivo manifest.json con los únicos que has generado.
  • Generalmente, en un archivo empaquetado, hay una carpeta de widget en el nivel raíz. Sin embargo, los documentos deberían estar directamente en el nivel raíz del documento.
  • Si se subió el archivo manifest.json incorrecto, necesitarás generar un código y una clave nuevos, ya que los anteriores dejarán de ser válidos.

What’s Next