Let's take a closer look at the possible field types that can be specified in the "settings" section of the manifest.json file.

For each type you will find examples of using it in manifest.json, and if necessary, an example of the localization file from the i18n.

text and pass types

manifest.json

{
"widget":{
  "name": "widget.name",
  "description": "widget.description",
  "short_description": "widget.short_description",
  "code": "new_widget",
  "secret_key": "57009cb5048a72191f25b01355c17d10dc349d5",
  "version": "1.0.0",
  "interface_version" : 2,
  "init_once" : false,
  "locale":[
        "en",
        "es"
        ],
    "installation": true
    },
"locations":[
    "ccard-1",
    "clist-1"
    ],
"settings":{
    "login":{
        "name": "settings.login", //indicates the localization file in the i18n folder
        "type": "text", //type: text field
        "required": false
        },
    "password":{
        "name": "settings.password",//indicates the localization file in the i18n
        "type": "pass", //type: password
        "required": false
        }
  }
}

i18n/en.json

{
    "widget":{
        "name":"Test widget",
        "short_description":"Short one",
        "description":"ENGLISH: #SUBDOMAIN# #HOST# #LOGIN# #API_HASH# #USER_ID# #ACCOUNT_ID# This widget is an example on working with Kommo"
    },
    "settings":{
        "login":"User login",
        "password":"User password"
        }
}

users type

This type of field is used to display a list of system users alongside text fields. It is useful when you need to input specific information for each employee, such as an internal phone number or extension for VoIP service.

manifest.json

{
"widget":{

    },
"locations":[

    ],
"settings":{
    "login":{

        },
    "password":{

        },
    "phones":{
        "name": "settings.user_phones",
        "type": "users",
        "required": true
    }
  }
}

i18n/en.json

{
    "widget":{

    },
    "settings":{
        "login":"User login",
        "password":"User password",
        "user_phones":"Phones list"
        }
}

users_lp type

An extended version of the users field, this type of field contains two fields for each user. It is used when each employee needs to provide pairs of values, such as login and password.

manifest.json

{
"widget":{

    },
"locations":[

    ],
"settings":{
    "auth_data":{
        "name":"settings.auth_data",
        "type":"users_lp",
        "required": false
    }
  }
}

i18n/en.json

{
    "widget":{

    },
    "settings":{
        "auth_data":"Auth list"
        }
}

custom type

Kommo widgets allow for custom program logic to be added to the widget's settings page by incorporating a field with arbitrary structure and appearance.

The field with arbitrary structure comprises a hidden input, a div element for displaying DOM elements for user interaction, and some JavaScript code for providing necessary logic.

To use fields with an arbitrary structure, you need to take two simple steps:

1. Add a field to manifest.json and allow the widget to be executed on the settings page.
2. Implement reading and writing data.

manifest.json

🚧

Do not forget to add the area settings to the locations array!

{
"widget":{

    },
"locations":[
    "ccard-1",
    "clist-1",
    "settings"
    ],
"settings":{
  "myfield": {
      "name": "settings.myfield",
      "type": "custom",
      "required": true
    }
 }
}

📘

A field with the type custom can contain a JSON string or a number. The string data type will not be stored on the server.

To get started, you will need to build the widget and then upload it to your account. Once you have done that, a div with the ID <widget code>_custom_content and a hidden input with the ID <widget code>_custom will become available to you.

If you want to make changes to the fields in the form and its buttons, you will first need to create a change event on the hidden system input. Here is an example of how you can do that:

$('input[name="name of your field"]').trigger('change');