Как настроить интеграцию CRM с сайтом: формы, чаты, события

Интеграция CRM с сайтом позволяет автоматически фиксировать лиды, связывать их с клиентами в базе и запускать последующие маркетинговые сценарии без ручного ввода. В статье разберём, какие инструменты нужны для соединения форм, онлайн‑чатов и событий сайта с популярными CRM‑системами, какие настройки следует выполнить в интерфейсе и на что обратить внимание, чтобы интеграция работала надёжно.

Мы рассмотрим пошаговый процесс для amoCRM и Битрикс24 — два решения, которые чаще всего выбирают компании в России. При необходимости вы сможете адаптировать описанные действия под отраслевые CRM, используя аналогичные модули и API‑конечные точки.

Подготовка сайта к интеграции

• Убедитесь, что сайт работает по HTTPS — большинство CRM отклоняют запросы с небезопасных протоколов.
• Разместите на страницах формы и чат‑виджеты в отдельном контейнере, чтобы их можно было легко идентифицировать в коде.
• Создайте отдельный API‑ключ или токен в CRM, который будет использоваться только для веб‑интеграции. Не используйте административный токен, иначе вы рискуете раскрыть лишние права.
• Определите набор полей, которые необходимо передавать: имя, телефон, e‑mail, источник, UTM‑метки, комментарий.

Интеграция веб‑форм с amoCRM

Создание веб‑формы в конструкторе сайта

В большинстве конструкторов (WordPress, Tilda, 1C‑Bitrix) формы собираются через HTML‑шаблон или встроенный Form Builder. Важно добавить скрытые поля для UTM‑меток и ID сессии.

Настройка входящего webhook в amoCRM

1. Перейдите в Настройки → Интеграции → Вебхуки.
2. Нажмите «Создать вебхук», выберите «Входящий», укажите название (например, «Форма заявки с сайта»).
3. Скопируйте URL‑адрес вебхука — он будет использоваться в коде формы.
4. В разделе «Поля» сопоставьте параметры формы (name, phone, email) с полями сделки/контакта в amoCRM.

Код отправки данных

Вставьте в форму следующий JavaScript‑фрагмент (пример для jQuery):

$('#myForm').on('submit', function(e){
    e.preventDefault();
    var data = {
        name: $('#name').val(),
        phone: $('#phone').val(),
        email: $('#email').val(),
        utm_source: $('input[name="utm_source"]').val(),
        utm_medium: $('input[name="utm_medium"]').val()
    };
    $.ajax({
        url: 'https://youraccount.amocrm.ru/api/v4/leads/complex',
        method: 'POST',
        headers: {'Authorization': 'Bearer YOUR_ACCESS_TOKEN'},
        data: JSON.stringify(data),
        contentType: 'application/json',
        success: function(){ alert('Заявка принята'); },
        error: function(){ alert('Ошибка отправки'); }
    });
});

Не забудьте заменить YOUR_ACCESS_TOKEN на токен, полученный через OAuth‑процесс. При первом запросе система потребует подтверждения доступа.

Интеграция чата с Битрикс24

Подключение онлайн‑чата JivoSite

JivoSite предлагает готовый модуль «Битрикс24». В личном кабинете JivoSite откройте Настройки → Интеграции → Битрикс24 и укажите:

• URL портала Битрикс24 (пример: https://yourcompany.bitrix24.ru/).
• Веб‑хук, созданный в разделе CRM → Настройки → Веб‑хуки → Добавить веб‑хук. Выберите права «CRM: добавление лида» и «CRM: добавление контакта».
• Сопоставление полей: имя → NAME, телефон → PHONE, e‑mail → EMAIL, источник → SOURCE_ID.

После сохранения все новые диалоги в чате будут автоматически создавать лиды в Битрикс24, а менеджер получит уведомление в личном кабинете.

Настройка автоматических сценариев

В Битрикс24 откройте CRM → Автоматизация → Роботы. Добавьте робот «Отправить письмо клиенту» и укажите шаблон письма, в котором будут подставлены данные из чата (имя, телефон, ссылка на переписку). Это ускорит обратную связь и повышает конверсию.

События сайта: отслеживание кликов и скроллинга

События помогают понять, какие действия посетителя предшествовали конверсии. Их можно передавать в CRM через API или через сторонние сервисы, такие как Google Tag Manager (GTM).

Настройка GTM для передачи событий в amoCRM

1. Создайте переменные {{Click Text}}, {{Click URL}} и {{Page Path}} в GTM.
2. Сформируйте триггер «Все клики», ограничив его условием «Click URL содержит /checkout/».
3. В качестве тега выберите «Custom HTML» и вставьте скрипт, который отправит POST‑запрос в вебхук amoCRM:

fetch('https://youraccount.amocrm.ru/api/v4/leads/complex', {
    method: 'POST',
    headers: {'Authorization': 'Bearer YOUR_ACCESS_TOKEN','Content-Type':'application/json'},
    body: JSON.stringify({
        name: 'Событие: клик по кнопке',
        price: 0,
        custom_fields_values: [
            {field_id: 123456, values: [{value: {{Click Text}}}]},
            {field_id: 654321, values: [{value: {{Page Path}}}]}
        ]
    })
});

Токен следует хранить в переменной окружения GTM, а не в открытом коде.

Отслеживание скроллинга в Битрикс24

В Битрикс24 нет готового модуля для скроллинга, поэтому используем webhook:

• В GTM создайте триггер «Scroll Depth», укажите пороги 25 %, 50 % и 75 %.
• Тег «Custom Image» отправит запрос вида https://yourcompany.bitrix24.ru/rest/1/WEBHOOK_KEY/crm.lead.add.json?fields[title]=Скролл+25%25. Параметр fields[title] будет содержать название события.

Сравнительная таблица способов интеграции

Чек‑лист контроля качества интеграции

1. Проверьте, что все поля формы соответствуют полям в CRM (имена полей, типы данных).
2. Сделайте тестовую отправку из формы и убедитесь, что лид появился в CRM со всеми данными.
3. Проверьте, что UTM‑метки сохраняются в пользовательском поле «Источник».
4. Убедитесь, что чат‑сообщения создают только один лид, а не дублируются при каждой новой сессии.
5. Настройте уведомления менеджеров (email, push, Telegram) и протестируйте их доставку.
6. Включите логирование запросов (веб‑сервер, GTM) для быстрой диагностики ошибок.
7. Регулярно обновляйте токен доступа (обычно каждые 30 дней) и проверьте, что автоматические сценарии продолжают работать.

Частые вопросы

Какой способ интеграции выбрать для небольшого сайта?

Для небольших проектов, где требуется лишь собрать заявки, достаточно встроить виджет‑форму с входящим вебхуком. Он быстро настраивается и не требует отдельного сервера.

Можно ли передавать данные из чата без создания отдельного лида?

Да, в Битрикс24 и amoCRM есть возможность привязывать сообщения к уже существующему контакту по e‑mail или телефону. Для этого в настройках вебхука укажите параметр «update_if_exists».

Как обезопасить токен доступа, если его используют в клиентском коде?

Токен, который хранится в клиентском JavaScript, может быть перехвачен. Лучше использовать серверный прокси: клиент отправляет запрос на ваш сервер, а сервер уже с токеном делает запрос к CRM. Это также упрощает обновление токена.

Что делать, если лиды дублируются после каждого обновления страницы?

Проверьте, не срабатывает ли событие отправки формы дважды (например, из‑за двойного привязки обработчика). Добавьте флаг disabled у кнопки после первого клика или используйте event.stopPropagation().

Если вам нужна помощь с настройкой интеграции, подбором оптимального сценария или обучением команды, услуги D7 помогут быстро запустить процесс. Для уточнения деталей оставьте заявку на консультацию — мы подберём решение под ваш бизнес.