Вебхук (webhook) — это метод, позволяющий отправлять определенную информацию (массив данных о каком-либо событии) с одного сайта на другой, чтобы там её обработать. Например, если вы хотите подключить к Weblium определенный сервис, с которым нет интеграции, но этот сервис поддерживает получение вебхуков, то вы можете получить от этого сервиса URL вебхука (ссылку, на которую будут отправляться данные) и подключить эту ссылку к вашим контактным формам. Таким образом, когда ваши пользователи отправляют вам заявку через контактную форму, эта заявка будет также отправлена к тому сервису, который вы подключили с помощью вебхука.

Вебхуки предназначены только для сервисов к которым необходимо передавать информацию со стороны Weblium.

Примечание: данные с помощью вебхуков отправляются в формате JSON с помощью POST метода.
Важно: эта опция доступна только для сайтов с платными подписками.
Подсказка: вы можете узнать как подключить вебхук к интернет-магазину в этой инструкции.

Подключение вебхуков к контактной форме

Чтобы подключить вебхук к своей контактной форме, следуйте инструкциям ниже:
Зайдите в настройки сайта, откройте вкладку Управление формами и перейдите к Интеграциям:


Кликните на Добавить URL Webhook и введите свой Webhook URL в появившемся поле для получения данных с форм:


Подсказка: вы можете добавить несколько вебхуков, нажав на Добавить URL Webhook.

Далее перейдите во вкладку Интеграции в настройках выбранной формы и активируйте отправку данных на все вебхуки (All Webhooks) или на какой-то 1 нужный вам вебхук из выпадающего списка:


Опубликуйте свой сайт, чтобы изменения вступили в силу.

Готово! Отправьте тестовую заявку через форму на сайте, чтобы убедиться, что данные приходят в ваше приложение.

Примечание: о структуре полученного через вебхук кода вы можете узнать подробнее ниже.

Структура вебхуков с контактной формы

Полученный из формы вебхук в формате JSON состоит из объекта "fields", в котором содержатся объекты для каждого из полей контактной формы, из которой пришел этот вебхук (примеры ниже). При этом в качестве ключей в объекте "fields" выступают автоматически генерируемые идентификаторы поля формы.

В свою очередь в каждом объекте поля есть 3 ключа с соответствующими значениями — ключи "title", "value" и "type":
"title" — название поля, указанное в настройках формы в редакторе. Если название не указано, то будет использовано значение подсказки внутри поля (плейсхолдер). Если отсутствует и название поля, и плейсхолдер, то значение поля "title" будет пустым ("");
"value" — то, что указал посетитель вашего сайта при заполнении формы;
"type" — тип поля, выбранный в редакторе при добавлении этого поля в контактную форму.

Значение ключа "value":

Краткий текст — текст (строчный тип данных, string), который указал клиент (посетитель сайта) при заполнении формы;
Длинный текст — текст, который указал клиент при заполнении формы (до 2000 символов). Перенос строк отображается символом \n
Эл. почта — текст, указанный клиентом при заполнении формы;
Телефон — текст, указанный клиентом при заполнении формы;
Выпадающий список — в текстовом виде только та опция, которую выбрал клиент при заполнении формы;
Дата — выбранная клиентом дата в текстовом виде, например, "22/12/2022, 17:45"
Радио-кнопка (круглый переключатель для выбора 1 опции из нескольких) — в текстовом виде только та опция, которую выбрал клиент при заполнении формы;
Флажок (квадратные чекбоксы для выбора нескольких опций из всех возможных) — в качестве значения ключа "value" отправляется объект, в котором отображены все опции, которые выбрал клиент (все активированные им чекбоксы). Ключи объекта генерируются автоматически, а их значения — это значение соответствующего варианта выбранного флажка (т.е. текст, который вы вписали в редакторе для этого флажка);
Прикрепить файл — объект с 2 ключами: "url" и "fileName". В ключе "url" в качестве значения выступает текст со ссылкой на загрузку отправленного файла из сервиса storage.googleapis.com. Ключ "fileName" отображает в текстовом виде название загруженного файла;
Я принимаю (квадратный чекбокс только с 1 опцией) — может иметь только значение "Yes", которое отправляется, если посетитель сайта активировал чекбокс. Если чекбокс не указан как обязательный для выбора и посетитель сайта не активировал его, то всё это поле не будет отправлено.

Значения ключа "type" для каждого из типов полей:

Краткий текст — "text"
Длинный текст — "textArea"
Эл. пошта — "email"
Телефон — "phone"
Выпадающий список — "dropDown"
Дата — "date"
Радио-кнопка — "radioButton"
Флажок — "checkbox"
Прикрепить файл — "file"
Я принимаю — "accept"

Ниже приведен пример полученного вебхука с каждым из 10 возможных полей:

{
  "fields": {
    "short_text": {
      "title": "Краткий текст",
      "value": "Пример короткого текста",
      "type": "text"
    },
    "867b7a8a-e9f4-460d-a7f7-2e15fd6fa07c": {
      "title": "Длинный текст",
      "value": "Як умру, то поховайте\nМене на могилі,\nСеред степу широкого,\nНа Вкраїні милій,\nЩоб лани широкополі,\n І Дніпро, і кручі\nБуло видно, було чути,\nЯк реве ревучий.",
      "type": "textArea"
    },
    "contactForm_email": {
      "title": "Email",
      "value": "example@gmail.com",
      "type": "email"
    },
    "contactForm_phoneNumber": {
      "title": "Номер телефона",
      "value": "380441234567",
      "type": "phone"
    },
    "66107134-153a-4289-ae9b-332afb0fdd09": {
      "title": "Выпадающий список",
      "value": "Текст выбранного варианта",
      "type": "dropDown"
    },
    "cbae3dd6-c4f2-4873-9aa3-49b50e2e3d83": {
      "title": "Дата",
      "value": "21/12/2022, 00:00",
      "type": "date"
    },
    "7d56d144-2895-4ada-9bcd-e807699cbc31": {
      "title": "Радио-кнопка",
      "value": "Вариант 2",
      "type": "radioButton"
    },
    "1bda072e-3229-4e53-80a9-276f583bb868": {
      "title": "Флажок",
      "value": {
        "25c4fe25-e867-4609-b6dc-46bd532f2f8f": "Вариант 2",
        "439c67f1-3de9-48e2-a5c7-62f7e99ad995": "Вариант 1"
      },
      "type": "checkbox"
    },
    "47b71927-1a38-4b50-8b09-b01ec847207f": {
      "title": "Прикрепить файл",
      "value": {
        "url": "//storage.googleapis.com/contact-forms-storage/contact-forms/63036758c37a64000d97f1eb/0c7daa2f-661c-4956-89ec-a6cabcb86a5c",
        "fileName": "kitten-510651.jpg"
      },
      "type": "file"
    },
    "df355ffe-fa85-4610-bafe-e3bafe45936c": {
      "title": "Я принимаю",
      "value": "Yes",
      "type": "accept"
    }
  }
}

Примечание: название ключа для каждого поля формы генерируется автоматически (например, "contactForm_email" или "df355ffe-fa85-4610-bafe-e3bafe45936c" выше) и в настоящее время это название нет возможности отредактировать.

Проверка собственного полученного вебхука

Если вы хотите просмотреть, как будет выглядеть вебхук именно из вашей формы, то вы можете это сделать с помощью сторонних сервисов, например, webhook.site или ngrok.com. Рассмотрим это на примере сервиса webhook.site:
Откройте webhook.site и справа от поля Your unique URL нажатие на кнопку Copy to clipboard:


Подключите эту ссылку к в настройках вашего сайта и в настройках контактной формы, которую вы хотите проверить, с помощью первого раздела этой статьи:


Откройте ваш сайт, заполните и отправьте форму, к которой вы подключили вебхук. Пример заполненной формы:


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


Полученый в примере вебхук:

{
  "fields": {
    "short_text": {
      "title": "Short text",
      "value": "Short text example",
      "type": "text"
    },
    "contactForm_phoneNumber": {
      "title": "Phone number",
      "value": "+3801234578",
      "type": "phone"
    },
    "contactForm_email": {
      "title": "Email",
      "value": "test@gmail.com",
      "type": "email"
    }
  }
}

Обновлено на: 10/01/2023