Виджеты на мобильных устройствах

Возможности и принципы работы виджетов в мобильных приложениях

Начиная с релиза “Осень 2020”, мы добавили возможность добавлять виджеты в мобильное приложение. В данный момент виджеты на мобильных устройствах поддерживаются только в iOS приложении, начиная с версии 2.5.54 в карточках сделки и покупателя.

Начало работы

Чтобы существующий или новый виджет начал поддерживать функционал работы в мобильном приложении, вам необходимо добавить новый объект mobile и указать дополнительный location mobile_card в файле manifest.json.

Location mobile_card говорит о том, что виджет готов к работе в мобильном приложении. Объект mobile поддерживает несколько свойств: frame_url и color. Строковое свойством frame_url должно иметь в себе адрес, на который будет отправлен GET запрос из WebView в мобильном приложении. К адресу будет добавлен GET параметр token, в котором будет содержаться токен для идентификации пользователя и аккаунта. Также будет добавлен GET параметр from c указанием платформы, с которой сделан запрос. В строковом свойстве color должен содержаться HEX код цвета, который будет использован как подложка под заголовкам блока с виджетом. Название будет использовано из настроек интеграции, а цвет текста будет всегда белый.

Параметры токена после декодирования

Параметр Тип данных Описание
iss string Адрес аккаунта в amoCRM
aud string Базовый адрес, который сформирован исходя из значения redirect_uri в интеграции
jti string UUID токена
iat int Timestamp, когда был выдан токен
nbf int Timestamp, когда токен начинает действовать
exp int Timestamp, когда токен будет просрочен
account_id int ID аккаунта, из которого сделан запрос
user_id int ID пользователя, из под которого сделан запрос
client_uuid string UUID интеграции, которая сделала запрос
data object Дополнительные данные токена
data/entity_type string Тип сущности, из которой сделан запрос
data/entity_id int ID сущности, из которой сделан запрос

Пример ответа

        
{
    "iss": "https://subdomain.amocrm.ru",
    "aud": "https://external.integration.io",
    "jti": "d628f123-5123-473e-a123-ed123ef31f8f",
    "iat": 1594204245,
    "nbf": 1594204245,
    "exp": 1594206045,
    "account_id": 12345678,
    "user_id": 87654321,
    "subdomain": "subdomain",
    "client_uuid": "0b0832f6-d123-4123-9123-e73f236833c"
}
        
    

Пример отображения виджета

Пример manifest.json

{
  "widget": {
    "interface_version": 2,
    "init_once": false,
    "locale": [
      "ru"
    ],
    "installation": true
  },
  "locations": [
    "lcard-1",
    "digital_pipeline",
    "settings",
    "mobile_card"
  ],
  "settings": {
    "login": {
      "name": "settings.login",
      //указывает на файл локализации, в папке i18n
      "type": "text",
      //тип: текстовое поле
      "required": false
    },
    "password": {
      "name": "settings.password",
      //указывает на файл локализации, в папке i18n
      "type": "pass",
      //тип: пароль
      "required": false
    }
  },
  "dp": {
    "settings": {
      "message": {
        "name": "settings.message",
        "type": "text",
        "required": true
      }
    },
    "action_multiple": false
  },
  "mobile": {
    "frame_url": "https://example.com/",
    "color": "#ffff00"
  }
}

Требования и рекомендации

  1. Рекомендуем выбирать адекватный цвет подложки под логотипом
  2. Контент страницы должен быть адаптирован под мобильные устройства
  3. Для публичных виджетов – оформление страницы должно быть сдержанным и приближенным к дизайну мобильного приложения
  4. Для публичных виджетов – оформление страницы не должно изменяться без обновления версии и модерации, за нарушение данного требования могут быть применены ограничения к работе вашего виджета