Обзор разработки дополнений для amoCRM, с использованием webHook и виджетов
К каждому аккаунту (на пробном только в течении 14 дней) можно установить webHook, документация подробно описывает процесс. Разработка каких-либо интеграций при этом не нужна.
В нашем случае было достаточно информации о добавлении сделки.
На сервере по указанному url в файле (в данном случае index.php ) первым делом необходимо сырые POST данные преобразовать из json в массив php:
В get параметры webHook при создании новой сделки ничего не приходит, а в post примерно следующее:
Очевидно что идентифицировать аккаунт из которого была отправка запроса можно по ключу account , а leads[«add»][0][«account_id»] == account[«id»] .
В leads[«add»][0][«tags»] находятся специальные метки, которые можно присвоить сделке, и по которым на стороне принимающего сервера можно как-то идентифицировать, в нашем случае нужен был тег со значением tilda .
Но больший интерес представляет leads[«add»][0][«custom_fields»] — это массив произвольных полей сделки.
Изначально у сделки небольшой список полей и есть только «Основная» группа полей, в которую можно добавить новые поля, а можно добавить новую группу и в нее добавить новые поля — есть категоризация полей на стороне веб-интерфейса.
Для редактирования полей сделки нужно зайти в любую сделку или в интерфейс создания новой сделки, затем перейти во вкладку «Настроить».
Редактирование полей сделки
Новое поле сделки может быть скрыто из веб-интерфейса для редактирования и может быть доступно только на стороне API.
Для работы с полями сделки на стороне сервера принимающего запрос можно так:
Добавление нового поля сделки
А дальше все зависит от целей использования webHook 🙂
Изначально мы делали эту интеграцию для клиента на Tilda, так как у клиента было настроено получение заявок из Tilda в amoCRM. Нам необходимо было отслеживать факт поступления оплаты, однако в amoCRM не поступают такие данные и факт оплаты не удалось выявить, даже в самом интерфейсе CRM
Виджет
Документация по разработке виджетов достаточно подробная, и содержит все необходимые данные для работы. Даже есть пример виджета здесь.
Для начала разработки виджета необходимо зарегистрировать приложение, все просто.
Затем необходимо создать структуру виджета состоящую из директорий и файлов.
Код виджета пишется на javascript, шаблоны виджета на twig, в js доступен jquery, есть возможность использования css
В директории виджета необходимо наличие файла manifest.json — файла конфигурации виджета, в документации есть подробное описание, а здесь описаны типы полей. Не забываем о локализации i18n .
Стоит учесть что виджет подключается только к тем областям сайта, которые будут указаны в manifest.json
В документации есть раздел WEB SDK который также посвящен созданию виджетов.
Не вижу смысла описывать процесс написания виджета, а также его возможности, так как документация исчерпывающая 🙂
Если виджет использует ajax запросы со стороннего сервера (например как было у нас, виджет обращался к нашему серверу), то сервер должен отправлять заголовок Access-Control-Allow-Origin: * :
Разработка виджета осуществляется локально, на машине разработчика, тестирование виджета возможно только через загрузку архива виджета на странице созданной интеграции.
Это не очень удобно, к тому же в manifest.json каждый раз при загрузке виджета нужно менять версию widget.version , иначе обновление виджета произойдет не сразу.
Техническая поддержка
Через чат amoCRM на всех страницах сайта CRM можно быстро получить ответы на многие вопросы. CRM платная для использования, но предоставляется бесплатный доступ на 14 дней. Однако, мы не собирались пользоваться самой CRM, а лишь предоставлять нашу интеграцию. Возможность разработки виджета возможна только в течении 14 дней. После истечения периода, нам понадобилось продлить пробный период, обратившись в онлайн чат мы получили дополнительные 10 дней. Однако, позже через онлайн-чат удалось выяснить что для разработчиков публичных интеграций есть специальный бесплатный технический аккаунт. Также во время разработки нам потребовалось узнать ip адреса серверов amoCRM, с которых они присылают webHook на наш сервер, тех. поддержка через онлайн чат любезно их предоставила.На момент написания статьи, ip адреса серверов amoCRM не находятся в публичном доступе, узнать информацию о них можно через онлайн-чат на сайте.
В целом мне понравилось разработка для amoCRM, понятная и объемная документация с примерами, однако загрузка виджета доставляет определенные неудобства.
Deen812
Система amoCRM – удобная web программа для анализа продаж, доступная в режиме online из любой точки мира! И пришлось мне однажды писать виджет для данного продукта. Отмечу, что пишется виджет очень легко, если конечно вы хорошо владеете JavaScript, ибо на нем в пишется. Для примера возьмем вот такую задачу, которую недавно пришлось делать: Скрыть элемент от всех менеджеров кроме администратора системы.
Сперва читаем документацию, https://developers.amocrm.ru/widgets/ , регистрируем,получаем ключ и тд. Скачиваем пример виджета. Структура папок и файлов очень простая:
Открываем manifest.json, тут указываем наш ключ (secret_key) , пишем название, версию, на какой странице должен работать виджет (locations). Нет смысла описывать то что уже в документации хорошо написано.
Для примера спрячем кнопку «Открепить» для всех менеджеров кроме админа.
Как написать виджет для amocrm
Статья является естественным продолжением материала Шумейко записывают, или мучения работодателя, но описывает на сей раз не подробности получения черной зарплаты в компании NeuroCRM, а, собственно, сам процесс создания виджетов amoCRM — вполне вероятно, данная информация окажется весьма полезной начинающим кодерам, которые хотели бы познакомиться с самыми что ни на есть началами процесса разработки виджетов amoCRM. Хотя начать знакомство с amoCRM автор рекомендует, несомненно, с внимательного чтения технической документации.
Это была прелюдия, а теперь к делу. Итак, мы с вами загрузили базовый виджет из соответствующего раздела документации amoCRM и с интересом разглядываем содержимое архива widget.zip; ок, ну а что же дальше? Как создать свой собственный виджет, предположим, некую формочку, которая по нажатию submit станет обрабатывать введенные пользователем данные?
Спрашиваете — отвечаю: все несложно. Собственно, для того, чтобы инсталлировать полученный виджет в своей учетке amoCRM (две недели, к слову сказать, бесплатного полнофункционального тестового периода — пробуем) нам с вами придется всего лишь изменить две строчки в файле manifest.json: «code» и «secret_key», заменив дефолтные значения на свои собственные, характерные только для нашей учетной записи — создаем новый виджет, открыв вкладку API, обзываем как душе угодно (это и будет «code», но название должно быть уникальным, учтите), и получаем для него тут же сгенерированный «secret_key». С этим все просто, но необходимо ведь добавить какой-то HTML, а также обработчик?
Начну с утверждения: handler.php виджета amoCRM вы, вероятнее всего, вынуждены будете использовать на каком-то удаленном сервере, т.к. использовать php непосредственно в виджете допустимо только в случае создания публичного, прошедшего модерацию, виджета; т.е. виджета, доступного всем без исключения зарегистрированным пользователям amoCRM. В большинстве случаев, поскольку речь идет о коммерческой разработке, этот вариант неприемлем. ок, таким образом, начнем мы с вами с создания HTML-формы, способной выглядеть вот таким, например, образом:
В скобках отметим, что использование prototype.js в своем коде в теории вполне здесь допустимо, но на практике вызывает конфликт с априори подключенным jquery.js, поэтому не рекомендуется. Ок, а теперь попробуем интегрировать свой HTML в файл script.js виджета, получаем следующее:
Ну вот примерно так, for example. Разумеется, делайте для себя лучше и круче, делайте красивее; но сейчас нам с вами важен сугубо принцип. HTML остался практически неизменен, как видите (только строчки кода объединены), плюс подключен style.css; ну, тут уж все совсем как обычно, надеюсь, правилам работы с каскадными таблицами стилей вас обучать не надо, останавливаться на этом моменте не будем. В конце статьи выложен для ознакомления готовый виджет, который не составляет труда (изменив, как уже было сказано выше, «code» и «secret_key» в файле manifest.json) сразу же инсталлировать в свою учетку amoCRM и вдоволь наиграться с дивами и стилями; только не забудьте поместить обработчики (также приложены) на удаленный сервер и правильно прописать путь к нему:
Пожалуй, для начала это все, или почти все; как видите, ничего сложного. Области отображения вашего нового виджета в веб-интерфейсе amoCRM регулируются в том же самом manifest.json. Подробнее в документации, а для начала вы попросту можете ограничиться следующей несложной редакцией:
Допустимо ли в одном-единственном виджете отображать их несколько? — вполне, и это очень несложно: повторяем различный HTML:
Впрочем, все это, повторюсь, можно в подробностях увидеть в полностью рабочем примере виджета, который вы теперь уже вполне готовы скачать по прямой ссылке.
Еще примеры, также продолжение статьи на форуме.
Напоследок следует заметить, что в качестве альтернативы описанному способу разработчики amoCRM предлагают и другой: вовсе не обязательно использовать свои шаблоны, можно попробовать воспользоваться уже готовыми здесь темплейтами шаблонизатора twig.js. Правда, далеко не во всех случаях этот путь является оптимальным; позволю себе сослаться на мнение Алексея Рябова, разработчика amoCRM, весьма любезно согласившегося ответить на все мои вопросы:
Учитывая, что у вас три разных модальных окна с разными типами информации — чекбоксами и выпадающими списками, вам будет удобней написать свои шаблоны, чем пытаться совместить наши встроенные (отдельно кнопка, отдельно чекбокс, отдельно список), так как для каждого потребуется вызывать свою функцию.
Создайте в архиве с виджетом папку templates. В неё добавьте свой шаблон. Добавить шаблон в скрипт можно, например, таким кодом.Здесь в переменную загружается шаблон:
Name already in use
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
amoCRM widget template (Vue.js)
Шаблон виджета для amoCRM с поддержкой Vue, Vuex и автоматической сборкой архива widget.zip
1. Установка и сборка
Требует Node.js 10+ для запуска.
Далее создать виджет внутри amoCRM и сгенерировать код виджета + ключ. Ключи указываются в файле /dist/manifest.json Далее выполнить сборку виджета.
Залить готовый виджет widget.zip в amoCRM
2. Для работы через webpack-dev-server:
Для разработки на локальном сервере без перезагрузки виджета в amoCRM
