poptimizer Docs

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

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

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

Когда посетитель отправляет форму, Poptimizer делает 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. Создайте интеграцию в Poptimizer

  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 добавляется автоматически.

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

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

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

amoCRM

  1. В amoCRM перейдите в Настройки → Интеграции → Webhooks
  2. Создайте входящий вебхук
  3. Скопируйте URL и вставьте в Poptimizer
  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 вебхука не виден посетителям сайта
Нужна помощь с настройкой конкретного сервиса? Напишите на js@asychev.ru — мы составим пошаговую инструкцию для вашего случая или добавим нативную интеграцию.
Следующие шаги: