Отправка заявки с сайта в Integromat через Webhook

Обновлено: 08.04.2023

В этом посте я расскажу, как я отправляю данные заявок с сайта в Integromat и что с ними потом делаю.

В моем случае сайт на WordPress, для формы заявок используется популярный плагин Contact Form 7. Есть и другие продвинутые плагины, но этот как-то ближе для меня. Он, можно сказать, олдскульный.

Какая бы у вас ни была CMS или сервис, достаточно настроить отправку всех переменных на Webhook URL. Это уникальный URL-адрес, который генерирует Integromat при создании модуля Custom Webhook.

Создаем сценарий и Webhook в Integromat

• Регистрируемся
• Создаем новый сценарий
• Добавляем модули, которые нам понадобятся в сценарии (это необязательно, можно их будет добавить позже непосредственно в самом сценарии)
• Продолжаем и переходим в саму диаграмму.
• Добавляем первый модуль.

Первый модуль — это всегда модуль, с которого начинается весь сценарий. Он принимает данные. Для первого модуля всегда должна стоять настройка по какому расписанию проверять/принимать данные (иконка часов или молнии).

• Иконка часов — это классическое расписание проверки модуля. Также модули, которые поддерживают такой режим имеют лейбл ACID. Например модуль Trello -> Watch Cards Moved to a List. Если вы поставите расписание каждые 15 минут, то модуль будет проверять, не было ли передвинутых карточек в конкретный список. Это простой в настройке модуль, но он будет расходовать много операций (ведь каждые 15 минут будет минимум 1 операция по проверке).
• Иконка молнии — это когда срабатывание модуля будет происходить тогда и только тогда, когда на него придут данные. Это и есть Webhook. Для некоторых модулей он есть по умолчанию и создается автоматически (например Trello -> Watch Activities). Также у этого модуля есть лейбл INSTANT, что говорит как раз о том, что он может работать как Webhook, работая в режиме прослушки и срабатывая только тогда, когда приходит запрос.

Сейчас нам нужно создать первым модулем Custom Webhook. Задаем нашему вебхуку имя, если нужно, указываем допустимые IP-адреса и сохраняем.

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

Настраиваем отправку данных на Webhook в своей CMS

Вернемся к нашему сайту на WordPress. Прямой интеграции с Contact Form 7 у Integromat нет (но, кстати есть с WPForms). Для CF7 нам понадобится дополнительный плагин CF7 to Webhook или другие похожие.

UPDATE: в Integromat уже добавили модуль Contact Form 7, теперь можно использовать его. Также в документации появился плагин для вебхука, называется CF7 Redirections, Integrations and Database, так что его можно использовать как альтернативу плагину CF7 to Webhook.

После установки плагина в настройках нашей формы в CF7 появится вкладка Webhook, где мы произведем пару настроек.

1. Вставляем в поле Webhook URL ссылку, которую сгенерировал Integromat.
2. Ставим галку Send to Webhook.
3. Рекомендую обязательно поставить галку на Send CF7 mail as usually, чтобы CF7 по умолчанию отправлял заявки на почту, как и раньше. Считаю, что должен быть дублирующий канал уведомлений для заявок. Если у вас будет ошибка в сценарии, то Integromat остановит его и все последующие запросы не будут исполняться, пока не исправите ошибку в сценарии. Также какой-то из модулей может отказать, произойдет какой-нибудь глобальный сбой, и сценарий тоже остановится. А старая-добрая почта всегда работает и на ней можно увидеть поступающие заявки, если Integromat недоступен. В общем, используйте почту для подстраховки.
4. По желанию можно добавить Special Mail Tags, чтобы они отправлялись на Webhook.

Обрабатываем входные данные и реализуем сценарий

Делаем тестовый запуск нашего сценария. Webhook начнет «прослушивать» данные. В этот момент вам нужно отправить форму заявки и посмотреть, как эти данные придут в модуль.

Вот как это будет выглядеть:

Далее, при присоединении новых модулей, вы сможете использовать переменные из предыдущих модулей. В данном случае — это модуль Webhooks.

Что делать дальше с поступившими данными? Для этого важно понять задачу, которую вы хотите решить. Часто нужно, чтобы эти данные пришли в CRM-систему и далее с ними работали. В Integromat есть множество CMS, с которыми напрямую настроена интеграция. Беглый поиск по ключу «CRM» показал не один десяток систем.

В своем же примере я покажу, как можно сделать подобие CRM системы в Trello, и в ней даже смогут работать менеджеры. У Trello много возможностей по настройке и интеграции, а также она условно-бесплатная. Лучше сначала немного попользоваться платформой и понять её суть, прежде чем настраивать сценарий в Integromat.

Создание карточки в Trello

1. Добавляем модуль Trello -> Create a Card (создаем пользователя в Trello, от его имени Integromat будет делать все действия, по факту это будет пользователь-бот, поэтому его можно так и назвать. Также создаем доску, где будут все заявки.). Все это указываем в модуле.
2. Далее указываем в каком списке создать карточку, с каким лейблом, кого добавить и в какую позицию ставить карточку.
3. Размечаем название и описание карточки. Если у вас клиент задает дедлайн, и вы хотите, чтобы этот дедлайн отображался в карточке, размечаем Due date. Здесь я посоветую чтобы с формы прилетало всегда в одном и том же формате, например 25.12.2020 (или используйте функцию formatDate() в Integromat для форматирования даты в нужный вид.) Тогда Trello будет нормально это понимать. Если же формат будет не распознан, то дата не сможет задасться и модуль выдаст ошибку, соответственно сценарий либо остановится, либо будет пытаться снова исполнить тот же ошибочный пакет (тут в завимости от ваших настроек). Либо нужно будет добавить к модулю Error handler (Логику что делать, если модуль выдал ошибку). Например можно продолжить выполнение сценария (Resume), либо закончить сценарий и пометить его как «успешно» (Commit). Подробнее про Error handlers в документации.

Дальше, часто в CRM есть специальные поля с данными клиентов, например Имя, Имейл, Телефон и т.д. Для этого в Trello есть дополнение Custom Fields — рекомендую сразу поставить. Создаете нужные поля и возвращаемся к сценарию.

Пример карточки с кастомными полями:

Чтобы дальше можно было использовать данные из кастомных полей, автоматически заполняем их данными из нашей формы заявки. Чтобы это сделать, используем модуль Trello -> Set a Custom Field on a Card.

1 такой модуль может заполнить только 1 кастомное поле, например вставить в него Имейл клиента с вашей формы. Создаем столько модулей, сколько вам нужно заполнить полей.

Если поля в вашей форме заявок не обязательные и данные из них вы хотите добавлять в кастомные поля в Trello, то нужно добавить этим полям Error Handler — Resume, чтобы сценарий продолжал работать, если данных для этого кастомного поля не будет. Иначе будет ошибка в этом модуле при попытке его заполнить и сценарий остановится.

Вот как может выглядеть сценарий приема заявок:

Назначение менеджеров (до 2 чел)

Дальше нужно назначить конкретного менеждера на эту заявку (если у вас несколько менеджеров). Для 2 человек это можно решить просто:

• четные номера заявок идут на 1 менеджера
• нечетные номера заявок идут на 2 менеджера.

Как узнать номер заявки (карточки) в Трелло? Это ShortID который присваивается карточке сразу после её создания. По сути это и будет понятный для всех номер заявки вида «123». В интерфейсе номер заявки можно увидеть нажав на кнопку «Поделиться».

Дальше формулой определяем, есть ли остаток при делении номера заявки на 2 (т.к. у нас 2 менеджера). Если остатка нет, значит номер четный.

Вот как это выглядит в модуле Trello -> Add a Member to a Card:

Здесь вам также понадобится узнать id юзеров в вашей доске. Назначение пользователя идет по id через функцию if().

Чтобы найти id юзера, добавляете в адрес вашей доски Трелло .json и открываете страницу. Например https://trello.com/b/5HqjnY/orders.json. Вы увидите весь код страницы в json, здесь можно поиском по странице Ctrl+F найти юзернейм человека и рядом будет его id. Рекомендую все найденные id где-нибудь записывать, чтобы потом снова не лазить.

Назначение менеджеров (более 2 чел)

Опишу логику, когда менеджеров становится больше 2. Мне подходит такой вариант: проверять, кто был последний менеджер (проверяются только новые заявки), и в зависимости от результата, назначать следующего. Также в этой логике будет проверка на старого/нового клиента, что полезно при назначении менеджера и в целом статистики.

Принцип работы следующий.

Определяем нового/старого клиента

Если все заявки пишутся в Google Sheets, то можно по совпадению имейла проверять, пришел старый клиент или новый. Это полезно для подсчета статистики. Также в моем случае лучше старому клиенту назначать «старого», закрепленного за ним менеджера.

1. Проверяем, есть ли имейл в базе с помощью Google Sheets -> Search Rows.

2. Агрегируем результаты модулем Numeric Aggregator

В моем случае, повторений имейлов может быть несколько, и мне нужно смотреть именно строку с самой свежей записью. Для этого в Numeric Aggregator трансформируем ячейку с датой заявки в timestamp с помощью formatDate и X. Агрегируем значения по максимальному значению (MAX). На выходе у модуля будет максимальный timestamp. Это и будет самая свежая дата заявки.

3. Выполняем снова поиск по базе

Дальше нужно с наибольшим timestamp и email еще раз выполнить поиск по базе по 2 условиям.

Здесь мы ищем по тому же email и timestamp, который конвертируется обратно в формат обычной даты (как и записано в таблице) . По двум условиям находим строку с нужным email и самой свежей датой.

4. Агрегируем данные в 1 пакет с помощью Array Aggregator

Пакетов может быть несколько, поэтому чтобы дальше по сценарию прошел только 1 пакет, нужно агрегировать их в один массив с помощью Array Aggregator.

Дальше можно продолжать сценарий с добавлением менеджера в заказ. Все это было сделано для того, чтобы понимать, сколько пакетов будет в Array Aggregator. Если 0, значит клиент новый, т.к. не было найдено совпадений по email. Если 1 — значит старый, совпадения были найдены.

Добавляем строку с данными заявки в Google Sheets

Далее я добавляю все данные по заявке в Google Sheets. Новая заявка — новая строка. Здесь все просто, размечаем ячейки в столбцах. Ячейку с текущим менеджером на данном этапе не заполняем.

Примеры полей, которые заполняются: id карточки, Номер заказа ShortID, дата, вид услуги, данные клиента и многие другие поля, нужные для работы и анализа в дальнейшем.

Потом, например, для реализации оплаты через Stripe, нужно будет сопостовлять по какой карточке была оплата, и для этого отлично подходят Google Sheets, если в строке есть все нужные данные. Статья про подключение системы оплаты Stripe.

Проверяем предыдущие строки

После добавления новой строки с заявкой, мы знаем номер этой строки. На основе этого номера, определяем предыдущие номера строк. Я проверяю 30 предыдущих заявок.

Этот блок операций нужен для того, чтобы назначать следующего менеджера на основе предыдущего менеджера, но только для заявок со статусом «Новый», в обход статуса «Старый». Иначе при приходе заявки от старого клиента алгоритм будет неравномерно распределять заявки (очередность будет сбиваться).

Дальше с помощью модуля Google Sheets -> Get Range Values получаем значения Новый/Старый в нужных строках.

Дальше нам нужно определить самую последнюю строку со статусом «Новая», это будет самая большая по номеру строка. Используем модуль Numeric aggregator. Если в статусе будет не «Новый», то просто не используем её для подсчета.

Определяем предыдущего менеджера

С помощью Google Sheets -> Get a Cell получаем данные из ячейки менеджера из предыдущей строки, где заявка была новая.

Теперь можем назначать менеджера в карточку с помощью функции switch(). Например, если предыдущий менеджер=1, то ставим менеджера 2. И так далее.

В данном варианте на скрине еще есть функция if(). Суть в том, что если заказ повторный от старого клиента, то назначается «старый» менеджер в обход очередности. Если же заказ от нового клиента, то соблюдается очередность менеджеров.

 

Назначение менеджера в зависимости от дня недели

Если нужно назначать менеджеров в зависимости от дня недели, то нужно усложнить сценарий.

Делаем следующее:

1. Определяем день недели функцией

Для этого используем функцию formatDate() и переменную now. Для форматирования используем токен E.

Подробнее о токенах для дат здесь в документации — https://support.integromat.com/hc/en-us/articles/360005772013-Tokens-for-date-time-formatting

2. Определяем id менеджера для любых дней недели

В данном модуле мы определяем id менеджера для:

• 1-3 дней недели.
• 4-5 дней недели.
• 6-7 дней недели.
• 1-7 дней недели, если старый клиент (на скрине не влезло).

В результате мы получим id менеджеров для любого дня.

3. Определяем id менеджера для нужного дня недели

Используем 2 функции if() для этого. На выходе мы получим окончательный id менеджера для соответствующего дня недели.

4. Окончательно определяем id менеджера (старый/новый клиент)

Результат этого модуля можно уже использовать для модуля Trello -> Add a Member to a Card.

Уведомления и письма

Для уведомлений о новой заявке я использую модуль Telegram. Для этого:

• создаем бота у BotFather
• создаем чат, где вы будете получать заявки. Добавляем туда бота. Делаем бота админом.
• Узнаем id группы, для этого можно добавить в группу бота, который показывает вам id. Например @myidbot
• Идем в Integromat и добавляем модуль Телеграм, добавляем токен бота, id чата, размечаем сообщение. В принципе все.

Для отправки писем клиентам нам понадобится модуль Email, чтобы отправлять клиентам первое письмо об успешном получении заявки.

Чтобы отправлять письма, делаем следующее:

• Создаем почтовый ящик на своем домене (домене сайта).
• Добавляем ящик в модуль Email —  Send an Email в Integromat.
• Добавляем исходный код письма (туда также можно добавлять нужные переменные). Для создания шаблона письма я рекомендую Stripo.email, очень удобный конструктор.
• При желании можно добавить в скрытую копию себя (чтобы первое время мониторить письма).
• Чтобы письма реже попадали в спам, нужно настроить DKIM, DMARC, SPF. Но это уже другая тема.

При желании указываем в поле From контакты менеджера (они могут быть динамические и отличные от отправителя). Например удобно указывать почту и имя менеджера, который назначился на заказ. Если клиент ответит на письмо, то он ответит конкретному менеджеру, а не на почту, с которой ведется рассылка.

Для этого задаем переменные с именем и имейлом менеджера, после того как менеджер был назначен на заказ.

Вставляем переменные в модуль Email — Send an Email.

---

Таким образом, мы создаем карточку в Trello из нашей формы заявки на сайте, назначаем менеджера, добавляем данные в Google Sheets, уведомляем участиков чата в Telegram, отправляем письмо клиенту.

Если остались вопросы, задавайте в комментариях.

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