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

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

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

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

Щоб підключити вебхук до своєї контактної форми, дотримуйтесь інструкцій нижче:
Зайдіть у Налаштування сайту, відкрийте вкладку Керування формами і перейдіть до розділу Інтеграції:



Натисніть на Додати URL вебхука і введіть URL для отримання даних з форм у полі, що зʼявиться.


Підказка: ви можете додати декілька вебхуків за допомогою кнопки Додати URL вебхука.

Далі перейдіть у вкладку Інтеграції в налаштуваннях обраної форми та активуйте відправку даних на всі вебхуки (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