поптимайзер Docs

Интеграция через Webhook

Webhook — это универсальный способ отправки данных в любой сервис, который умеет их принимать. Это может быть CRM (amoCRM, Битрикс24, SberCRM), сервис автоматизации (Zapier, Make, n8n), Google Sheets или ваш собственный сервер.

Как это работает

Когда посетитель отправляет форму, Поптимайзер делает HTTP-запрос на указанный вами URL с данными формы. Принимающий сервис обрабатывает эти данные: создаёт сделку, добавляет строку в таблицу, отправляет email — зависит от настроек на стороне сервиса.

Что понадобится

  • URL для приёма данных (получите в сервисе, с которым интегрируетесь)
  • 5 минут времени

Настройка интеграции

Шаг 1. Получите URL для приёма данных

Этот URL вы получаете в сервисе, с которым хотите интегрироваться:
  • Zapier — создайте Zap с триггером «Webhooks by Zapier» → «Catch Hook»
  • Make (Integromat) — создайте сценарий с модулем «Webhooks» → «Custom Webhook»
  • n8n — добавьте ноду «Webhook»
  • CRM — посмотрите в документации раздел «Входящие вебхуки» или «API»
Примеры URL:
https://hooks.zapier.com/hooks/catch/123456/abcdef/
https://hook.eu1.make.com/abcdefghijklmnop
https://your-n8n.com/webhook/form-data

Шаг 2. Создайте интеграцию в Поптимайзер

  1. Откройте попап в редакторе
  2. Нажмите «Интеграции» в верхнем меню
  3. Нажмите «Добавить интеграцию»
  4. Выберите «Webhook»
Выбор Webhook интеграции Скриншот: Карточки выбора типа интеграции с выбранным «Webhook»
  1. Заполните форму:
    • Название — как интеграция будет отображаться (например, «amoCRM» или «Zapier → Google Sheets»)
    • URL — адрес для отправки данных
    • Метод — обычно POST (оставьте по умолчанию)
Форма настройки Webhook Скриншот: Форма создания Webhook интеграции — поля «Название», «URL», «Метод»
  1. Нажмите «Создать»

Шаг 3. Протестируйте

  1. Нажмите кнопку «Тест» рядом с интеграцией
  2. Проверьте, что данные дошли до сервиса
Тестирование Webhook Скриншот: Карточка интеграции с кнопкой «Тест» и сообщением об успешной отправке

Формат отправляемых данных

По умолчанию данные отправляются в формате JSON:
{
  "popupId": "abc123",
  "timestamp": "2025-01-26T15:30:00.000Z",
  "data": {
    "email": "ivan@example.com",
    "name": "Иван Иванов",
    "phone": "+7 999 123-45-67"
  }
}

Плоский формат

Некоторые сервисы лучше работают с «плоскими» данными (без вложенности). Выберите формат «Плоский» в настройках:
{
  "popupId": "abc123",
  "timestamp": "2025-01-26T15:30:00.000Z",
  "email": "ivan@example.com",
  "name": "Иван Иванов",
  "phone": "+7 999 123-45-67"
}
Выбор формата данных Скриншот: Выпадающий список «Формат данных» с опциями «По умолчанию», «Плоский», «Кастомный»

Кастомный формат

Если сервис требует особую структуру данных, используйте кастомный шаблон:
{
  "lead": {
    "email": "{{data.email}}",
    "name": "{{data.name}}",
    "phone": "{{data.phone}}"
  },
  "source": "poptimizer",
  "campaign": "landing_page"
}
Переменные в двойных фигурных скобках заменятся на реальные данные.
Кастомный шаблон Скриншот: Текстовое поле с JSON-шаблоном и подсказкой о доступных переменных

Дополнительные заголовки

Некоторые сервисы требуют авторизацию или специальные заголовки. Добавьте их в разделе «Заголовки»:
| Заголовок | Значение | | ------------- | --------------------- | | Authorization | Bearer your-api-token | | X-API-Key | your-api-key | | Content-Type | application/json |
Настройка заголовков Скриншот: Раздел «Заголовки» с полями для добавления пар ключ-значение
Примечание: Заголовок Content-Type: application/json добавляется автоматически.

Превью данных

Перед созданием интеграции вы можете посмотреть, какие данные будут отправляться. Раздел «Превью полей» показывает все поля из вашей формы.
Превью полей формы Скриншот: Таблица с полями формы — колонки «Название поля», «Тип», «Пример значения»
Эта информация поможет правильно настроить приём данных на стороне сервиса.

Проверка маппинга полей

При использовании кастомного шаблона внизу формы появляется блок маппинга полей. Он автоматически проверяет, что переменные из шаблона совпадают с полями формы в попапе:
  • Совпадающие поля (зелёная точка) — переменная найдена в форме попапа. Данные будут подставлены корректно.
  • Отсутствующие поля (оранжевое предупреждение) — переменная указана в шаблоне, но такого поля нет в попапе. При отправке вместо данных будет пустое значение.
  • Неиспользуемые поля (сворачиваемый список) — поля есть в форме попапа, но не упомянуты в шаблоне. Они будут отправлены в стандартном объекте data, но не попадут в кастомный шаблон.
Маппинг полей Webhook Скриншот: Блок маппинга полей — зелёные совпадения, оранжевые предупреждения и сворачиваемый список неиспользуемых полей
[!TIP] Проверяйте маппинг перед сохранением, чтобы убедиться, что все нужные данные попадут в вебхук. Оранжевые предупреждения означают, что переменная не найдена в форме попапа.

Примеры интеграций

amoCRM

  1. В amoCRM перейдите в Настройки → Интеграции → Webhooks
  2. Создайте входящий вебхук
  3. Скопируйте URL и вставьте в Поптимайзер
  4. Настройте маппинг полей в amoCRM

Битрикс24

  1. Создайте входящий вебхук в разделе Приложения
  2. Выберите права доступа (CRM, контакты)
  3. Используйте полученный URL

Google Sheets (через Zapier)

  1. Создайте Zap: Webhooks → Google Sheets
  2. Используйте URL из Zapier
  3. Настройте маппинг колонок
Подробный пример с Zapier: Интеграция через Zapier

Отладка

Данные не приходят

  1. Проверьте URL — он должен быть полным (начинаться с https://)
  2. Нажмите «Тест» и проверьте статус
  3. Посмотрите логи на стороне принимающего сервиса

Ошибка авторизации (401, 403)

Проверьте заголовки авторизации. Возможно, нужно добавить API-ключ или токен.

Неправильный формат данных

Попробуйте другой формат (плоский или кастомный). Посмотрите документацию сервиса — какую структуру он ожидает.

Безопасность

  • Токены и ключи в заголовках хранятся в зашифрованном виде
  • Данные передаются только по HTTPS
  • URL вебхука не виден посетителям сайта
Нужна помощь с настройкой конкретного сервиса? Напишите на support@poptimizer.ru — мы составим пошаговую инструкцию для вашего случая или добавим нативную интеграцию.
Следующие шаги: