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.
|
|||||
| 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.