Краткий ответ: чтобы интегрировать Битрикс24 с сайтом, есть три пути — встроенные CRM-формы (проще всего, 10 минут на настройку), виджет кнопки/онлайн-чата (30 минут), и полная интеграция через REST API и вебхуки (от 1 дня у разработчика). Самый частый сценарий —CRM-форма встроенная в страницу, при отправке которой в Битрикс24 автоматически создаётся лид или сделка. Ниже — все три варианта с примерами кода от меня, Константина Астафьева, системного интегратора из Питера с 150+ внедрениями.

Каждый раз, когда клиент оставляет заявку на сайте — это потенциальные деньги. И каждый раз, когда эта заявка теряется (менеджер не перезвонил, потому что «не увидел»), — это потерянные деньги. Интеграция сайта с Битрикс24 решает эту проблему раз и навсегда: заявка с сайта мгновенно появляется в CRM, распределяется на менеджера, запускает робота «перезвонить за 4 часа». На 150+ внедрениях я видел, как правильная интеграция поднимала конверсию из заявки в сделку с 8% до 25%. Разница — в скорости реакции.

Три способа интеграции: что выбрать

Прежде чем нырять в технические детали, давайте определимся со способом. От этого зависит всё — время, стоимость, необходимость программиста.

Способ Время настройки Нужен программист Гибкость
CRM-форма (встроенная) 10–30 минут Нет Низкая
Виджет кнопки/чата 30 минут Нет Средняя
REST API + вебхук 1–3 дня Да Высокая
Готовый модуль 1С-Битрикс 30–60 минут Нет Средняя

Для 80% малого бизнеса хватает CRM-формы или виджета. Программист нужен, если у вас сложный сайт с нестандартными формами, нужна двусторонняя синхронизация (сделка в CRM → обновление на сайте), или собственная логика обработки заявок.

Способ 1. CRM-форма Битрикс24: самый простой путь

CRM-форма — это встроенный конструктор форм в Битрикс24. Вы создаёте форму, настраиваете поля, копируете JS-код — и вставляете в любую страницу сайта. При отправке в CRM автоматически создаётся лид или сделка с заполненными полями.

Шаг 1. Создание CRM-формы

Путь: CRM → CRM-формы → Создать форму. Откроется конструктор. Слева — блоки полей (перетаскиваются мышкой), справа — предпросмотр. Настройки:

  • Название — для вас, не видно клиентам («Заявка с главной страницы»).
  • Поля: Имя, Телефон, Email — обязательно. Дополнительно: Комментарий, Услуга (выпадающий список), Источник, Бюджет. Не делайте 10 полей — конверсия упадёт.
  • Кнопка: «Отправить», «Получить консультацию», «Оставить заявку». Короткий призыв.
  • Сообщение об успехе: «Спасибо! Мы свяжемся с вами в течение 15 минут».

После сохранения формы — раздел «Получить код» предлагает 3 варианта встраивания: баннер, кнопка, встроенная форма. Копируете код и вставляете в HTML страницы вашего сайта.

📸
Скриншот: Конструктор CRM-формы в Битрикс24
Покажите экран создания CRM-формы: слева — палитра блоков и полей (Имя, Телефон, Email, Список, Комментарий), по центру — предпросмотр формы, справа — настройки и кнопка «Получить код».

Шаг 2. Куда вставлять код на сайте

Битрикс24 даёт вам кусок JS-кода вида:

<script data-b24-form="inline/123/abc123" data-skip-moving="true">
  (function(w,d,u){
    var s=d.createElement('script');s.async=true;s.src=u+'?'+(Date.now()/180000|0);
    var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);
  })(window,document,'https://cdn-ru.bitrix24.ru/b12345/crm/form/loader_123.js');
</script>

Этот код вставляется в HTML страницы в том месте, где должна появиться форма. На обычном HTML-сайте — в нужный <div>. На WordPress — в виджет «Произвольный HTML» или через плагин «Insert HTML». На Tilda — в блок T123 («HTML-код»). На 1С-Битрикс — в редактор страницы.

Если форма должна быть на всех страницах — вставьте код в шаблон сайта (в <footer> или <head>).

Шаг 3. Настройка обработки заявки

В настройках CRM-формы есть важная вкладка «Обработка». Здесь указываете:

  • Что создавать: лид или сделку. На старте рекомендую сделку — меньше путаницы.
  • Воронка и стадия: в какую воронку положить сделку и на какую стадию (обычно «Новая»).
  • Ответственный: конкретный менеджер или «распределять по очереди» (round-robin).
  • Источник: «Сайт — форма обратной связи». Помогает в аналитике.
  • Запустить робота/БП: если настроен робот «перезвонить за 4 часа» — он запустится автоматически.

Лайфхак: создайте отдельную форму под каждый раздел сайта. «Заявка с главной», «Заявка из раздела Услуги», «Заявка из блога». По источнику в аналитике видно, какой раздел работает лучше. На 150+ внедрениях это простое разделение поднимало конверсию на 15–20% за счёт оптимизации тех разделов, которые «не конвертили».

Способ 2. Виджет кнопки и онлайн-чата на сайт

Если вам нужна не форма, а кнопка «Обратный звонок» в углу экрана или онлайн-чат для общения с посетителями — это другой инструмент, называется «Открытые линии» + «Виджет на сайт».

Кнопка обратного звонка

Разместите в углу сайта кнопку, по клику на которую открывается маленькая форма: имя + телефон. После отправки — в CRM создаётся лид с темой «Заявка на обратный звонок», менеджер получает уведомление в Telegram, и звонит в течение 5 минут.

Путь: CRM → CRM-формы → Создать → выбрать тип «Кнопка». Настроить текст, цвет, позицию на экране. Получить код — вставить в <body> сайта перед закрывающим тегом.

📸
Скриншот: Виджет кнопки обратного звонка в углу сайта
Покажите сайт с виджетом Битрикс24 в правом нижнем углу: круглая кнопка с иконкой телефона, при наведении — всплывающая подсказка «Заказать звонок». Ниже — открытая мини-форма.

Онлайн-чат с посетителями

Если у вас есть менеджер, который готов отвечать в чате — включите онлайн-чат. Это открытая линия, через которую посетители сайта могут писать прямо в Битрикс24.

  1. Создайте открытую линию: CRM → Открытые линии → Создать линию. Название — «Сайт».
  2. Подключите канал «Онлайн-чат» (встроенный виджет Битрикс24).
  3. Настройте приветствие: «Здравствуйте! Я Анна, менеджер. Чем могу помочь?»
  4. Настройте распределение: на конкретного менеджера или по очереди.
  5. Скопируйте код виджета и вставьте в <body> сайта.

После этого в правом нижнем углу появится иконка чата. Посетитель пишет — в CRM создаётся контакт, открывается диалог, менеджер получает уведомление. Все сообщения сохраняются в карточке контакта — даже если посетитель закрыл вкладку и вернулся через неделю, история сохранится.

Способ 3. REST API и вебхуки: для разработчиков

Когда встроенных форм мало — нужна полная интеграция. Например, у вас сложная форма с зависимыми полями, или нужно передавать данные с сайта в Битрикс24 и обратно (двусторонняя синхронизация). Тут без программиста не обойтись.

Создание входящего вебхука

Вебхук — это URL с правами доступа, через который ваш сайт может обращаться к Битрикс24. Создаётся один раз, используется сколько угодно.

  1. В Битрикс24 откройте раздел «Разработчикам» (иконка в левом меню или через Настройки).
  2. Выберите «Входящий вебхук».
  3. В настройках прав выберите: CRM (сделки, контакты, лиды), Бизнес-процессы (если нужно).
  4. Сохраните — получите URL вида https://your-portal.bitrix24.ru/rest/1/abc123def456/.

Безопасность: URL вебхука — это «ключ» от вашего портала. Не коммитьте его в Git, не публикуйте в чатах, не вставляйте в публичные страницы. Храните в переменных окружения (env) сервера.

Создание лида через вебхук: пример на PHP

Пример: на сайте есть форма, после отправки нужно создать лид в Битрикс24. PHP-код на сервере:

<?php
// Данные из формы
$name = $_POST['name'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$comment = $_POST['comment'];

// URL вашего вебхука + метод crm.lead.add
$webhookUrl = 'https://your-portal.bitrix24.ru/rest/1/abc123def456/crm.lead.add.json';

// Параметры лида
$fields = [
  'TITLE' => 'Заявка с сайта: ' . $name,
  'NAME'  => $name,
  'PHONE' => [['VALUE' => $phone, 'VALUE_TYPE' => 'WORK']],
  'EMAIL' => [['VALUE' => $email, 'VALUE_TYPE' => 'WORK']],
  'COMMENTS' => $comment,
  'SOURCE_ID' => 'WEB', // Источник: сайт
  'ASSIGNED_BY_ID' => 5, // ID ответственного менеджера
];

$queryData = http_build_query(['fields' => $fields]);

$curl = curl_init();
curl_setopt_array($curl, [
  CURLOPT_URL => $webhookUrl,
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_POST => true,
  CURLOPT_POSTFIELDS => $queryData,
]);
$response = curl_exec($curl);
curl_close($curl);

$result = json_decode($response, true);
if (isset($result['result'])) {
  // Лид создан, ID в $result['result']
  echo 'Спасибо! Заявка принята #' . $result['result'];
} else {
  // Ошибка
  error_log('Bitrix24 lead creation failed: ' . $response);
}
?>

Этот код обрабатывает POST-запрос с формы, обращается к Битрикс24 через вебхук и создаёт лид. Если у вас включён режим «без лидов» — используйте метод crm.deal.add вместо crm.lead.add.

Создание сделки через REST API: пример на JavaScript

Если нужно вызвать API из браузера (не с сервера) — нужен исходящий вебхук или OAuth. Но для простых случаев можно и напрямую:

// Функция создания сделки в Битрикс24
async function createDeal(formData) {
  const webhookUrl = 'https://your-portal.bitrix24.ru/rest/1/abc123def456/crm.deal.add.json';

  const params = new URLSearchParams({
    'fields[TITLE]': 'Заявка с сайта: ' + formData.name,
    'fields[CONTACT_ID]': formData.contactId,
    'fields[OPPORTUNITY]': formData.budget || 0,
    'fields[CATEGORY_ID]': 1, // ID воронки
    'fields[STAGE_ID]': 'C1:NEW', // Стадия "Новая"
    'fields[ASSIGNED_BY_ID]': 5,
    'fields[UTM_SOURCE]': formData.utm_source || '',
    'fields[UTM_MEDIUM]': formData.utm_medium || '',
    'fields[UTM_CAMPAIGN]': formData.utm_campaign || '',
  });

  try {
    const response = await fetch(webhookUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: params.toString(),
    });
    const result = await response.json();
    if (result.result) {
      console.log('Сделка создана, ID:', result.result);
      return result.result;
    } else {
      console.error('Ошибка Битрикс24:', result.error);
      throw new Error(result.error_description);
    }
  } catch (e) {
    console.error('Сеть/CORS:', e);
    throw e;
  }
}

CORS-ограничение: вызов вебхука напрямую из браузера может упереться в CORS-политику. Если на сайте включен CSP (Content Security Policy) — нужно добавить домен bitrix24.ru в whitelist. Лучше вызывать API с сервера (PHP/Node.js), а не из браузера — и быстрее, и безопаснее.

Исходящий вебхук: уведомление сайта о событии в CRM

Если нужно, чтобы Битрикс24 уведомлял ваш сайт о событиях (например, сменилась стадия сделки → обновить статус заказа на сайте) — создайте исходящий вебхук:

  1. Раздел «Разработчикам» → «Исходящий вебхук».
  2. Укажите URL вашего обработчика: https://yoursite.ru/webhooks/bitrix24.php.
  3. Выберите события: «Сделка обновлена», «Сделка удалена», «Контакт добавлен».
  4. Сохраните — Битрикс24 пришлёт тестовый запрос с кодом, который нужно вернуть обратно для подтверждения.

Пример обработчика на PHP:

<?php
// Читаем входящий запрос
$input = file_get_contents('php://input');
$event = json_decode($input, true);

// Проверка кода при первом подключении
if (isset($_GET['event']) && $_GET['event'] === 'ONAPPTEST') {
  echo json_encode(['event' => 'ONAPPTEST', 'result' => 'OK']);
  exit;
}

// Обработка события "Сделка обновлена"
if ($event['event'] === 'ONCRMDEALUPDATE') {
  $dealId = $event['data']['FIELDS']['ID'];

  // Запросить детали сделки через REST
  $dealData = getDealFromBitrix24($dealId);

  // Обновить заказ на сайте
  updateOrderOnSite($dealData);

  // Лог для отладки
  file_put_contents('bitrix24.log', date('Y-m-d H:i:s') . ' Deal ' . $dealId . ' updated' . PHP_EOL, FILE_APPEND);
}

function getDealFromBitrix24($id) {
  $url = 'https://your-portal.bitrix24.ru/rest/1/abc123def456/crm.deal.get.json?id=' . $id;
  return json_decode(file_get_contents($url), true)['result'];
}
?>
📸
Скриншот: Создание исходящего вебхука в разделе «Разработчикам»
Покажите форму создания исходящего вебхука: поле URL обработчика, выбор событий (ONCRMDEALUPDATE, ONCRMCONTACTADD), кнопка сохранения. И пример подтверждения через тестовый запрос.

Способ 4. Интеграция с 1С-Битрикс: готовый модуль

Если ваш сайт работает на 1С-Битрикс (это CMS, не путать с Битрикс24 — разные продукты одной компании) — есть готовый модуль интеграции. Устанавливается из Маркетплейса 1С-Битрикс, настраивается за 30 минут.

Что даёт модуль:

  • Автоматическое создание лида/сделки при оформлении заказа в интернет-магазине.
  • Синхронизация контактов и компаний между сайтом и CRM.
  • Передача статусов заказа обратно на сайт (оплачен/отправлен/доставлен).
  • Подстановка данных о клиенте из CRM в формы сайта.
  • Авторизация на сайте по данным портала Битрикс24 (SSO).

Путь: в админке 1С-Битрикс → Marketplace → Каталог → найти «Интеграция с Битрикс24» (от компании 1С-Битрикс, бесплатно). Установить, ввести URL портала и код авторизации. Всё — интеграция работает.

Передача UTM-меток: обязательно!

Частая ошибка — форма отправляет в CRM только имя и телефон, без UTM. В итоге вы не знаете, откуда пришёл клиент — из Директа, из VK, из органики. А без этого нельзя посчитать ROI рекламы.

Решение: при заходе на сайт ловим UTM-метки из URL, сохраняем в cookies (на 30 дней), при отправке формы добавляем в скрытые поля:

// Сохраняем UTM в cookies при заходе на сайт
function saveUtmToCookies() {
  const params = new URLSearchParams(window.location.search);
  const utmFields = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];

  utmFields.forEach(field => {
    const value = params.get(field);
    if (value) {
      // Cookie на 30 дней
      document.cookie = field + '=' + encodeURIComponent(value) + ';max-age=2592000;path=/';
    }
  });
}

// Подставляем UTM в скрытые поля формы
function fillUtmFields() {
  const utmFields = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];

  utmFields.forEach(field => {
    const match = document.cookie.match(new RegExp('(^| )' + field + '=([^;]+)'));
    const input = document.querySelector('input[name="' + field + '"]');
    if (match && input) {
      input.value = decodeURIComponent(match[2]);
    }
  });
}

saveUtmToCookies();
document.addEventListener('DOMContentLoaded', fillUtmFields);

В форме добавьте 5 скрытых полей с этими именами. CRM-форма Битрикс24 поддерживает UTM «из коробки» — нужно только включить в настройках формы соответствующую опцию.

Частые проблемы и решения

1. CRM-форма не появляется на сайте

Проверьте:

  • Код вставлен в <body>, а не в <head> (для inline-форм).
  • На сайте нет CSP (Content Security Policy), блокирующего cdn-ru.bitrix24.ru.
  • AdBlock или расширения браузера не блокируют скрипты.
  • Форма опубликована (в конструкторе есть кнопка «Опубликовать» — иногда забывают).

2. Заявки не доходят до CRM

Проверьте:

  • В настройках формы выбрано «Создавать лид/сделку».
  • Корзина CRM не переполнена (бывает редко, но если тариф бесплатный — лид может не создаться из-за лимитов).
  • Открыта ли форма для публичного доступа (в настройках видимости).
  • Не выключена ли CRM целиком (Настройки → Настройки CRM → Включить CRM).

3. Лиды дублируются

Если один клиент отправил форму дважды — в CRM создастся два лида. Решение: включить дедупликацию по телефону/email. CRM → Настройки → Настройки CRM → Дедупликация → включить автоматическое слияние.

4. Вебхук возвращает ошибку авторизации

Проверьте:

  • URL вебхука скопирован полностью (с последним слэшем).
  • Права на нужный метод выставлены (CRM → сделки/лиды/контакты).
  • Вебхук не отозван в настройках портала.
  • Не превышен лимит запросов (60 в секунду для облачного портала).
🎥
Видео: Полная интеграция сайта с Битрикс24 за 20 минут
Длительность ~20 мин: создание CRM-формы, получение кода, вставка на тестовую страницу Tilda, отправка тестовой заявки, проверка что лид появился в CRM. Плюс пример webhook на PHP.

Безопасность и лимиты REST API

При работе через REST API важно помнить о лимитах и безопасности:

  • Лимит запросов: для облачного портала — 2 запроса в секунду на один вебхук. Если превысите — получите 429 ошибку. Для массовых операций используйте пакетные методы (batch).
  • Безопасность вебхука: URL вебхука — это «пароль». Не коммитьте в Git, не вставляйте в публичные страницы. Храните в переменных окружения сервера.
  • HTTPS обязательно: Битрикс24 принимает только HTTPS-запросы (наhttp — ошибка). Для исходящих вебхуков ваш сайт тоже должен быть на HTTPS.
  • Валидация входящих данных: если принимаете исходящий вебхук от Битрикс24 — проверяйте подпись или хотя бы IP отправителя (диапазоны Битрикс24).
  • Логирование: все запросы к API логируйте (минимум: дата, метод, результат). Помогает при отладке и при разборе инцидентов.

Чек-лист: что должно быть настроено после интеграции

  • ✅ Создана хотя бы одна CRM-форма с полями Имя/Телефон/Email.
  • ✅ Код формы вставлен на ключевые страницы сайта (главная, контакты, услуги).
  • ✅ Настроена обработка: создаётся лид или сделка, назначается ответственный.
  • ✅ Указан источник «Сайт — форма обратной связи».
  • ✅ Включена передача UTM-меток.
  • ✅ Тестовая заявка отправлена — лид/сделка появились в CRM за 30 секунд.
  • ✅ Включён робот «перезвонить за 4 часа» на стадии «Новая».
  • ✅ Настроена дедупликация по телефону/email.
  • ✅ Если нужна двусторонняя синхронизация — настроен исходящий вебхук.
  • ✅ Включено уведомление менеджеру в Telegram о новой заявке (через БП).

Итог

Интеграция сайта с Битрикс24 — не роскошь, а необходимость для любого бизнеса, где сайт генерирует заявки. Минимальный вариант — CRM-форма за 10 минут. Максимальный — двусторонняя синхронизация через REST API за 1–3 дня. Между ними — виджеты, онлайн-чат, готовые модули для 1С-Битрикс.

Главный эффект от интеграции — скорость реакции на заявку. Чем быстрее менеджер реагирует (минуты, а не часы), тем выше конверсия в сделку. На моих внедрениях после подключения сайт→CRM и настройки робота «перезвонить за 4 часа» конверсия стабильно растёт на 20–30%. Это не магия, это простая арифметика: заявка не теряется, менеджер не забывает, клиент не уходит к конкурентам.

Если нужна помощь с интеграцией — от простой CRM-формы до сложной синхронизации через REST API — приходите на консультацию. Я, Константин Астафьев, помогу и с настройкой, и с написанием кода, и с обучением менеджеров. Из Питера, по всей России удалённо.

Автор: Астафьев Константин Евгеньевич, системный интегратор Битрикс24, основатель Lead4Sell. 150+ внедрений, 7 лет опыта. Санкт-Петербург.