Structure of widget

A widget represents the UI integration and can be used to customize and extend the functionality of Kommo, like displaying data in special areas, interacting with the user, or adjusting settings by administrators.

By structure, a widget is an archive with JS, CSS, and Twig template files that can be loaded into the system. When connecting the widget, its JS files and layout will be loaded into the browser along with the Kommo interface, enabling the integrator to interact with the user, interact with the Kommo API or the API of their service directly from the Kommo interface.

After downloading the widget example and extracting the archive, you will see in the root files which are

File Description
manifest.json
required
A json file containing a description of the widget, widget settings, widget options displayed to the user, widget connection areas, and localizations with which the widget works.
script.js A JS file that will be connected on the user’s side in the areas specified in the manifest.json
images/ The folder for placing the image files that are used in the widget should contain 5 png files that will be used as the logo of the widget in different areas of visibility. The size of each file should not exceed 300 KB.
Images logo_min.png and logo_medium.png are mandatory if the widget works in cards, used in all lists and contacts and leads cards in a minimized and expanded state, respectively.
Images logo.png, logo_main.png and logo_small.png duplicate the goals of logo_min.png, and they are required.

logo_main.png
400px x 272px

logo_small.png
108px x 108px

logo_medium.png
240px x 84px

logo_min.png
84px x 84px

logo.png
130px x 100px
i18n/ A folder that contains localization files in the format key: value. localizations: English (en), Spanish (es) and Portuguese (pt). All translations are available in JS.

As you can see, only the manifest.json file is required.

So, first, copy the folder with the widget sample and call it a widget. This is the basis of our future widget.

And, let’s get to know each of the files in turn, starting from manifest.json.