Widget Locations
The process of connecting widgets involves enabling the widget's JavaScript scripts on specific pages (interfaces) of Kommo. By default, widgets are not connected on all interfaces but only on the requested areas.
Table of connection areas
Connection area | Description |
---|---|
lcard | Lead card |
ccard | Contact card |
comcard | Company card |
llist | Lists of leads |
clist | Lists of contacts |
tlist | Lists of tasks |
settings | Widget installation and configuration page |
advanced_settings | Advanced widget settings page |
card_sdk | Card SDK (if you want to add it , you should also add lcard/ccard/comcard to work in the cards of the relevant entities) |
catalogs | List SDK |
digital_pipeline | Digital pipeline settings |
lead_sources | Sources of leads |
widget_page | The widget will be displayed in the left menu bar (only Public integrations). |
sms | The widget can be used as a sender of system SMS messages |
mobile_card | The widget is available in the mobile app. |
salesbot_designer | The widget can be used when setting up the salesbots. |
website_chat_button | The widget can be used when setting up the website chat button to use as a button to use it on websites. |
everywhere | If the area where you want to initialize your widget wasn't mentioned above, you can use everywhere connection area and already in the widget code itself you can control where the widget is displayed. |
To enable a widget's functionality, our system needs to be informed about the areas where the widget will operate, and where they will use the widget's panel on the right-hand side of the screen.
To achieve this, you need to list the required areas in the locations
block of the manifest.json file and indicate the use of the widget panel by setting 1 or 0 as a parameter. Setting the indicator to 1 will display the widget on the right-side panel of a card. On the other hand, setting it to 0 will initialize the widget in the card but will not display it on the right-side panel.
The
everywhere
area does not accept 1/0 parameter, and it is always set to 0 for this area.
For example, this widget will be initialized on the settings page, in the digital pipeline settings, in the lead sources, in the advanced settings page, and in cards and lists of contacts and leads, but the right-side panel will be used only in the specified cards:
"locations":[
"lcard-1",
"llist-0",
"ccard-1",
"clist-0",
"comcard-0",
"card_sdk",
"settings",
"digital_pipeline",
"lead_sources",
"catalogs",
"advanced_settings"
]
When you connect a widget to any interface, the JS script will be loaded, and the render()
callback function will be triggered, followed by init()
and bind_actions()
.
You can control the ability to call the init()
and bind_actions()
functions each time the user moves from one area to another by specifying true or false in the init_once
block of the manifest.json file. For example, VoIP widgets must constantly maintain a WebSocket connection and should not be interrupted, so init_once
should be set to true. If there is no common context for all pages, it's better to set it to false.
When you are dealing with the list areas, note that the widget will not be automatically added to the interface. First, the list will appear, and once you select at least one row from the list using the checkboxes, the context menu will appear. Then, choose the widget action from the More button. The widgets panel on the extreme right of the list interface with your widget will be added to the page by the selected event, which will trigger the corresponding callback function in script.js
To make sure that the widget works in the digital pipeline, you need to specify the digital_pipeline
in the locations. The Python part of the widget with the digital_pipeline
endpoint is also needed, and the logo_dp.png logo with a resolution of 174×109 is required in the widget.
If your widget has a lead_sources
scope, then you can check which pipeline of the account it is bound to using the HTTP request.
GET https://subdomain.kommo.com/api/v4/widgets/{widget_code}
The response of such a request shows the pipeline_id
, or in the script.js of your widget.
To work with the lists SDK, you need to specify a special scope "catalogs"
, the ID of the list with which the widget will work, and also implement a special callback loadCatalogElement
.
Widget page in the Settings section
Kommo widgets can create their page in the Settings section, and to do this, you need to specify the advanced_settings scope in the "location"
list and also add the “advanced” block to the manifest.json, and implement a special callback advancedSettings
.
The widget will have complete control over this page, and it should form the DOM pages and their structure. The "advanced"
block in manifest.json should contain the title of the settings page.
Updated 9 days ago
Next, we will discuss what can be done in the JS part of the widget.