Интеграция – это любое взаимодействие внешнего сервиса с amoCRM, используя API, либо виджет. Любая интеграция должна быть зарегистрирована в аккаунте для получения ключей для oAuth авторизации. Т.е. не может быть не опознанных обращений к API, любой клиент понимает какие именно сервисы имеют доступ к данным аккаунта и в каком объеме.

Интеграции бывают:

1. приватными – т.е. созданными только для одного аккаунта.
2. публичными – т.е. доступные для установки со страницы интеграции в amoCRM любому пользователю amoCRM.

Виджеты – это архив с JS файлами, который может быть загружен в интеграцию. В таком случае JS файлы и верстка будет подгружена в браузер вместе с интерфейсом amoCRM, что даст возможность интегратору взаимодействовать с пользователем, взаимодействовать с API amoCRM или API собственного сервиса непосредственно из интерфейса amoCRM. Виджеты подключаются также и в модальном окне настроек самой интеграции.

Виджет позволяет получить дополнительный функционал, если необходимо:

• Отображать дополнительные данные в интерфейсе amoCRM. Для виджетов предусмотрены специальные области, где вы можете вывести информацию. Например, вывести статистику обращений по контакту из внутренней системы;
• Взаимодействовать с пользователем, с введенными им данными. Вы можете подключать JS-скрипты практически в любом интерфейсе системы. Например, можно показывать всплывающую карточку при поступающем звонке;
• Чтобы администратор аккаунта amoCRM ввел индивидуальные настройки для вашего сервиса. Например, ключ авторизации в вашем API.

Во всех остальных случаях вы можете просто использовать открытое API amoCRM.

На текущий момент в списке Интеграций отображаются только те публичные интеграции, которые включают в себя архив виджета. Связано это с тем, что не все поля необходимые для корректного визуального отображения модального окна установки интеграции перенесены из файла manifest.json в окно редактирования интеграции. Приватные интеграции с виджетом и без него отображаются в блоке “Установленные интеграции”.

Виджет не может визуально менять модальное окно подключения и настроек виджета в Настройки – Интеграции. При загрузке виджета, вы можете изменять html разметку правой части модального окна виджета кроме изменения ширины окна. Изменения левой части виджета невозможно.

За включение и выключения виджета отвечает левая часть модального окна, кнопка сохранить в правой части модального окна отвечает только за сохранение настроек виджета.

Также в модальном окне настроек виджета мы рекомендуем подключить тур. Тур — это набор картинок, на которых демонстрируется функционал виджета. Подробнее о подключении тура вы можете прочитать по ссылке

Рейтинг и отзывы виджетов

Оценить и оставить отзыв могут администраторы аккаунтов на странице настройки интеграции, в том случае, если интеграция публичная и включена.

Виджетам запрещено скрывать/изменять эти данные.

Создание виджета

Для начала мы попробуем по шагам создать полностью работающий пример виджета и загрузить его в свой аккаунт.

1. Регистрация аккаунта
2. Создание интеграции
3. Загрузка архива виджета
4. Подготовка структуры
5. Работа с manifest.json
6. Подготовка файлов локализации
7. Разработка JS-скрипта
8. Упаковка и загрузка архива

1. Регистрация аккаунта

Вам необходимо зарегистрировать аккаунт. Если у вас уже есть аккаунт, то при тестировании виджета будьте осторожны, не повредите данные в результате отладки. Возможно для бета-тестирования своего виджета лучше создать отдельный аккаунт.

При загрузке виджета он будет доступен только внутри вашего аккаунта, пока не будет премодерирован нашими сотрудниками.

Для моего первого виджета я зарегистрирую аккаунт с параметрами:

2. Загрузка виджета

В аккаунте заходим на страницу /settings/widgets/. Это страница списка интеграций, и для меня ссылка будет выглядеть так https://demoaccount.amocrm.com/settings/widgets/. Нажмите на кнопку “Создать интеграцию” и заполняем форму в появившемся окне. Подробней про заполнение формы читайте в статье.

Вы можете загрузить архив с виджетом как при создании интеграции, так и после, при её редактировании.

3. Загружаем пример виджета.

Ниже представлена ссылка на пример виджета, который вы можете скачать и использовать при разработке вашей интеграции.

Скачать пример виджета