Інтеграція HubSpot з сайтом: налаштування CRM API під ключ

Інтеграція HubSpot з сайтом: налаштування CRM API під ключ

При запуску інтернет-магазину на Laravel зіткнулися з проблемою: ліди з форми зворотного зв'язку губилися, менеджери вручну переносили дані 20+ контактів щодня. HubSpot CRM та її API вирішили задачу — тепер дані течуть автоматично, без копіпасту. За час нашої роботи ми інтегрували HubSpot з десятками проєктів: від односторінкових сайтів до великих маркетплейсів. Знаємо типові граблі та як їх обійти.

HubSpot — CRM з відкритим REST API, безоплатним тарифом та вбудованим трекінгом. Інтеграція дозволяє передавати контакти, угоди, події та запускати ланцюжки листів без участі розробника після налаштування. Ми забезпечуємо повний цикл: від аудиту до впровадження. Автоматизація скорочує час обробки ліда на 60% — цифри з нашої практики. В одному проєкті після інтеграції кількість оброблених заявок зросла з 20 до 70 на день без розширення штату.

Як передати ліди через Forms API?

Forms API — простий endpoint для надсилання даних форми. Приклад на JavaScript:

const PORTAL_ID = '12345678';
const FORM_ID = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';

const response = await fetch(
  `https://api.hsforms.com/submissions/v3/integration/submit/${PORTAL_ID}/${FORM_ID}`,
  {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      fields: [
        {name: 'firstname', value: formData.firstName},
        {name: 'lastname', value: formData.lastName},
        {name: 'email', value: formData.email},
        {name: 'phone', value: formData.phone},
        {name: 'message', value: formData.message}
      ],
      context: {
        hutk: getCookie('hubspotutk'),
        pageUri: window.location.href,
        pageName: document.title
      }
    })
  }
);

hutk пов'язує лід з історією візиту — без нього атрибуція зламається. Важливо перевіряти відповідь сервера: код 200 — лід створено, 400 — помилка валідації. Обробляйте статуси, щоб не втрачати дані. Відповідь сервера містить ID контакту, який можна зберегти в локальній БД для подальшої синхронізації.

Чому CRM API краще готових модулів?

Готові модулі WordPress обробляють до 10 запитів на хвилину, CRM API v3 — до 100 на секунду. Різниця в 600 разів. Для високонавантажених проєктів вибір очевидний. Крім продуктивності, готові модулі не дають кастомної логіки: складно синхронізувати угоди, прив'язувати користувачів або створювати кастомні поля. CRM API v3 дає повний контроль.

Приклад створення контакту та угоди на PHP (через офіційний SDK):

$client = \HubSpot\Factory::createWithAccessToken(env('HUBSPOT_ACCESS_TOKEN'));
$contact = $client->crm()->contacts()->basicApi()->create(
    new \HubSpot\Client\Crm\Contacts\Model\SimplePublicObjectInput([
        'properties' => [
            'email' => $user->email,
            'firstname' => $user->first_name,
            'phone' => $user->phone,
            'website_user_id' => $user->id
        ]
    ])
);
$deal = $client->crm()->deals()->basicApi()->create(
    new \HubSpot\Client\Crm\Deals\Model\SimplePublicObjectInput([
        'properties' => [
            'dealname' => "Замовлення #{$order->id}",
            'amount' => $order->total / 100,
            'dealstage' => 'closedwon',
            'closedate' => $order->created_at->timestamp * 1000
        ]
    ])
);
$client->crm()->deals()->associationsApi()->create(
    $deal->getId(),
    'contact',
    $contact->getId(),
    'deal_to_contact'
);

Зверніть увагу: асоціація угоди з контактом — окремий виклик. Без неї в HubStats видно лише розрізнену інформацію.

Як налаштувати двонаправлену синхронізацію?

Webhooks HubSpot надсилають сповіщення при зміні контакту або угоди. Endpoint сайту оновлює локальну БД — статус замовлення змінюється без ручного вводу. Приклад підписки на події через Webhooks API:

$client->crm()->lists()->membershipsApi()->addAndRemoveMemberships(
    $listId,
    new AddAndRemoveMembershipsInput(['recordIdsToAdd' => [$contactId]])
);

При зміні статусу угоди в HubSpot вебхук надсилає POST-запит на ваш endpoint. Ваш скрипт оновлює локальну БД — статус замовлення змінюється автоматично. Так досягається повна синхронізація без затримок.

Продвинутий трекінг через Events API

Custom Behavioral Events дозволяють передавати будь-які дії користувача (перегляд товару, додавання в кошик). Створіть подію в інтерфейсі HubSpot та надсилайте:

$client->events()->send()->basicApi()->sendEvent([
    'eventName' => 'pe123456_product_viewed',
    'email' => $user->email,
    'properties' => [
        'product_id' => $productId,
        'product_name' => $productName
    ]
]);

Події дозволяють відстежити, який товар користувач переглядав, скільки разів, і на якому етапі покинув кошик. В одному з проєктів ми налаштували 15 кастомних подій — це підвищило точність таргетингу листів на 40%.

Порівняння способів інтеграції

Терміни інтеграції HubSpot

Вартість розраховується індивідуально на основі ТЗ. Зверніться за оцінкою — ми підготуємо комерційну пропозицію за 1 робочий день.

Що входить в роботу під ключ?

• Аудит поточних форм та сценаріїв — виявимо вузькі місця.
• Налаштування API-ключів та порталу HubSpot — безпечне підключення.
• Розробка надсилання лідів, контактів, угод — з використанням PHP або JavaScript SDK.
• Встановлення tracking-скрипту та кастомних подій — точна атрибуція.
• Реалізація вебхуків для зворотного зв'язку — синхронізація в реальному часі.
• Документація по API та навчання команди — ви зможете підтримувати самостійно.
• Тестування синхронізації та виправлення помилок — гарантуємо стабільність.

Допомога інженера в нестандартних випадках

Якщо на сайті нестандартна логіка (кастомні поля, складні воронки, багатомовність), залучаємо веб-розробника з досвідом HubSpot. Приклад: інтеграція з ERP-системою через проміжний шар або синхронізація користувацьких списків.

Отримайте консультацію з інтеграції HubSpot — оцінимо ваш проєкт за 1 день. Зв'яжіться з нами, щоб обговорити деталі.