> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

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

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

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

|| ${color}[#ffa800](Примечание:) данные с помощью вебхуков отправляются в формате JSON с помощью POST метода.
||| ${color}[#f97700](Важно:) эта опция доступна только для сайтов с платными подписками.
| ${color}[#1aa900](Подсказка:) вы можете узнать как подключить вебхук к интернет-магазину в [этой инструкции](/ru/article/podklyuchenie-vebhuka-k-internet-magazinu-15xt6e/).

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

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-1_dwamu5.png)
2. Кликните на **Добавить URL Webhook** и введите свой **Webhook URL**  в появившемся поле для получения данных с форм: 

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-2-1_1q2n5wb.png)
| ${color}[#1aa900](Подсказка:) вы можете добавить несколько вебхуков, нажав на **Добавить URL Webhook**.

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

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-4_oh5mt3.png)
4. [Опубликуйте свой сайт](https://help.weblium.com/ru/article/publikaciya-sajta-1xvrq6l/), чтобы изменения вступили в силу.

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

|| ${color}[#ffa800](Примечание:) о структуре полученного через вебхук кода вы можете узнать подробнее ниже.

# Структура вебхуков с контактной формы
Полученный из формы вебхук в формате 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 возможных полей:
```json
{
  "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"
    }
  }
}```

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

# Проверка собственного полученного вебхука
Если вы хотите просмотреть, как будет выглядеть вебхук именно из вашей формы, то вы можете это сделать с помощью сторонних сервисов, например, [webhook.site](https://webhook.site/) или [ngrok.com](https://ngrok.com/). Рассмотрим это на примере сервиса webhook.site:
1. Откройте [webhook.site](https://webhook.site/) и справа от поля **Your unique URL** нажатие на кнопку **Copy to clipboard**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/vebhuk-1_1pdrvv5.png)

2. Подключите эту ссылку к в настройках вашего сайта и в настройках контактной формы, которую вы хотите проверить, с помощью [первого раздела этой статьи](#1-podklyuchenie-vebhukov-k-kontaktnoj-forme):
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/vebhuk-ru_1v9u78q.png)

3. Откройте ваш сайт, заполните и отправьте форму, к которой вы подключили вебхук. Пример заполненной формы:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/vebhuk-2_17t0zp6.png)

4. Вернитесь на webhook.site, где вы найдете полученный вебхук со всеми значениями, которые вы как посетитель сайта заполнили на вашем сайте:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/vebhuk-3_4d931r.png)

Полученый в примере вебхук:
```json
{
  "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"
    }
  }
}```