При розробці інтернет-магазину ми зіткнулися з проблемою: після додавання віджету Chatra на сайт LCP зріс на 400 мс через неправильне розміщення скрипту. Після оптимізації та правильного налаштування автоповідомлень конверсія зросла з 2% до 12%. Chatra — російський сервіс з безкоштовним тарифом і потужним REST API. Ми інтегрували його в 50+ проєктах на Laravel, React та WordPress, досягнувши стабільної роботи з нульовим часом простою. Розберемо технічні деталі встановлення, які винесли з практики. Зв'яжіться з нами для безкоштовної консультації та аудиту вашого проєкту.
Які типові проблеми виникають при інтеграції Chatra?
Часта помилка — розміщення скрипту в <head>. Блокує завантаження, додає 200-400 мс до LCP. Друга проблема — відсутність передачі даних про користувача: оператор не бачить історії замовлень, доводиться перепитувати, знижуючи конверсію на 15-20%. Третя — неефективні автоповідомлення: стандартні привітання без персоналізації дратують клієнтів. Ми вирішуємо це правильним встановленням, інтеграцією через API та налаштуванням тригерів під воронку.
Як встановити Chatra на сайт?
- Зареєструйтесь на chatra.io — займе пару хвилин.
- В особистому кабінеті отримайте ChatraID (рядок виду
YOUR_CHATRA_ID).
- Вставте скрипт перед закриваючим тегом
</body>. Код нижче:
<script>
(function(d, w, c) {
w.ChatraID = 'YOUR_CHATRA_ID';
var s = d.createElement('script');
w[c] = w[c] || function() { (w[c].q = w[c].q || []).push(arguments); };
s.async = true; s.src = 'https://call.chatra.io/chatra.js';
if (d.head) d.head.appendChild(s);
})(document, window, 'Chatra');
</script>
Типова помилка — розміщення скрипту в <head>. Це блокує завантаження сторінки, погіршуючи LCP на 200-400 мс. Завжди ставте його перед </body>. Після встановлення перевірте віджет на мобільних — адаптивність з коробки, але іноді потрібне коригування CSS для вбудовування в лендінги.
Ідентифікація та передача даних користувача
Якщо на сайті є авторизація, передавайте дані в Chatra через об'єкт window.ChatraIntegration:
window.ChatraIntegration = {
name: user.name,
email: user.email,
phone: user.phone,
// Кастомні поля — видно оператору в картці контакту
'Замовлень': user.ordersCount,
'Регіон': user.city
};
Це підвищує релевантність автоповідомлень: можна вітати клієнта по імені або пропонувати знижку після трьох замовлень.
API для керування чатом
Chatra надає JavaScript API для програмного керування:
// Відкрити чат програмно
Chatra('openChat', true);
// Сховати віджет
Chatra('hide');
// Відправити автоповідомлення
Chatra('sendAutoMessage', "Потрібна допомога із замовленням?");
Використовуйте це для кастомних тригерів: наприклад, відкривати чат при помилці 404 або після заповнення форми.
Чому Chatra вигідніша за аналоги
Порівняємо Chatra з JivoSite та LiveChat за ключовими параметрами:
| Критерій |
Chatra |
JivoSite |
LiveChat |
| Безкоштовний тариф |
Так (1 оператор) |
Ні |
Ні |
| Інтеграція з соцмережами |
VK, Facebook, Email |
VK, Telegram |
Facebook, Email |
| Групові чати |
Так |
Так |
Так |
| API для кастомних полів |
REST API |
Обмежений |
Розвинутий |
| Час завантаження віджету |
~150 мс |
~300 мс |
~250 мс |
Chatra завантажується вдвічі швидше за JivoSite, що критично для Core Web Vitals. Економія на ліцензіях порівняно з аналогами сягає 50%. Для стартапів і малого бізнесу це оптимальний вибір: мінімальні витрати при повному функціоналі.
Які можливості інтеграції доступні?
Серверний API (REST)
Через REST API можна оновлювати дані контакту, створювати тікети, отримувати історію діалогів. Приклад на PHP (Laravel):
Http::withToken(env('CHATRA_API_KEY'))
->patch("https://app.chatra.io/api/v1/visitors/{$visitorId}", [
'name' => $user->name,
'email' => $user->email,
'notes' => "VIP клієнт, замовлень: {$user->orders_count}"
]);
Це дозволяє синхронізувати дані між CRM та Chatra без ручного введення.
Автоматизація та додаткові канали
- Автоматичні запрошення — налаштуйте тригери: час на сайті, перегляд певної сторінки, повернення. Наприклад, для інтернет-магазину — запропонувати допомогу на сторінці кошика.
- Email-чат — якщо клієнт не дочекався відповіді, діалог автоматично конвертується в email-тікет. Жодне звернення не губиться.
- Мобільні додатки — оператори відповідають з iOS/Android, навіть поза робочим місцем.
Що входить в інтеграцію?
| Етап |
Що робимо |
Результат |
| Встановлення та налагодження |
Розміщення скрипту, перевірка на всіх сторінках (включаючи мобільні) |
Робочий віджет з нульовим часом простою |
| Налаштування автоповідомлень |
Тригери, сценарії, персоналізація |
Привітання під воронку клієнта |
| Інтеграція з CRM |
Передача даних про користувача та замовлення через API |
Картка контакту з історією |
| Навчання операторів |
Робота з панеллю, групи, звіти |
Самостійне управління |
| Технічна підтримка |
Гарантія стабільної роботи протягом місяця |
Безперебійна робота |
Які типові сценарії автоматизації ми реалізуємо
Тригери налаштовуються за кількома параметрами. Наприклад:
| Тригер |
Умова |
Дія |
Приклад |
| Час на сайті |
>30 секунд |
Привітання з іменем |
"Здрастуйте, Іване! Чим допомогти?" |
| Перегляд сторінки |
Кошик |
Пропозиція допомоги |
"Залишились питання щодо замовлення?" |
| Повернення |
>=2 візити |
Персоналізована пропозиція |
"Знову до нас? Знижка 10% на замовлення" |
Етапи інтеграції
- Встановлення та налагодження — розміщення скрипту, перевірка на всіх сторінках (включаючи мобільні).
- Налаштування автоповідомлень — тригери, сценарії, персоналізація.
- Інтеграція з CRM — передача даних про користувача та замовлення через API.
- Навчання операторів — робота з панеллю, групи, звіти.
- Технічна підтримка — гарантія стабільної роботи протягом місяця.
Згідно з документацією Chatra, віджет завантажується за ~150 мс, що підтверджує наша практика.
Строки та вартість
Просте встановлення віджету — від 2 днів. Повноцінна інтеграція з API, кастомними полями та навчанням — до 5 днів. Економія на ліцензіях сягає 50%. Вартість розраховується індивідуально під ваш проєкт.
Зв'яжіться з нами для консультації — оцінимо проєкт безкоштовно. Замовте інтеграцію під ключ: 50+ реалізованих проєктів. Гарантуємо стабільну роботу та повну документацію.
Інтеграція email розсилок: чому вона часто ламається?
Ми стикалися з тим, що тригерний лист через 10 хвилин після реєстрації конвертує в 4–5 разів краще, ніж той самий лист через 24 години. Це не маркетинговий міф — це механіка: поки користувач теплий, поки пам'ятає контекст. Але більшість інтеграцій з розсильниками зроблені так: форма сабмітиться → синхронний HTTP-запит до API → якщо API гальмує, користувач чекає 3 секунди → лист йде або не йде, ніхто не знає.
Якщо ви зіткнулися з втраченими листами або потраплянням у спам, замовте аудит існуючої інтеграції — ми знайдемо вузькі місця за 2 дні.
Провайдери та їх API
Unisender — російський провайдер, популярний у сегменті SMB. REST API, простий. Додавання контакту: importContacts, відправка транзакційного листа: sendEmail. Важливо: для транзакційних листів (підтвердження замовлення, скидання пароля) Unisender Go — окремий сервіс з іншим API та окремою ціною. Змішувати масові розсилки та транзакційні в одному потоці — погана ідея для репутації домену.
SendPulse — надає email, SMS, web push, Viber, Telegram-боти через єдиний API. Для проєктів, де потрібен омніканал, це зручно. Automation 360 — візуальний конструктор ланцюжків, можна запустити автоматизацію через API event. SDK для PHP (sendpulse/rest-api-php-sdk) підтримується, але оновлюється нерегулярно — краще використовувати напряму через Guzzle.
Mailchimp — вибір для міжнародної аудиторії та маркетингових команд, звиклих до екосистеми Mailchimp. Transactional email — через Mandrill (дочірній сервіс). Marketing API v3 для управління списками, тегами, кампаніями. Webhook для подій: відкриття, клік, відписка, bounce.
SMS. Для Росії: СМСЦ, МТС Exolve, Devino Telecom, SMS Aero. API у всіх схожий: метод send, параметри phone, message, sender (ім'я відправника — потрібно реєструвати окремо у оператора). Один нюанс: ім'я відправника має бути зареєстровано через агрегатора з договором — без цього SMS не відправляться на мережі МТС/МегаФон/Білайн.
| Провайдер |
Тип |
Транзакційні листи |
Маркетингові |
Особливості |
| Unisender |
email+SMS |
Unisender Go (окремо) |
так |
Популярний в РФ, простий REST |
| SendPulse |
email+SMS+web push+Viber |
так |
так |
Єдиний API, омніканальність |
| Mailchimp |
email |
Mandrill |
так |
Аналітика, міжнародний |
| Twilio |
SMS+email |
так |
ні |
Глобальний, дорогий в РФ |
Як побудувати інтеграцію, щоб не втрачати листи?
Розділяємо транзакційні та маркетингові потоки
Транзакційні листи (підтвердження замовлення, скидання пароля, статус доставки) — через окремий домен-відправник або субдомен tx.example.com. Маркетингові розсилки — через mail.example.com або news.example.com. Якщо маркетингова розсилка отримає багато скарг на спам, це не повинно зачепити репутацію транзакційного потоку. Згідно з документацією SendGrid, транзакційні повідомлення слід відправляти через виділений IP-пул для запобігання перехресному впливу.
Черга та retry
Будь-який виклик до email API — через чергу (Laravel Queue, Bull, Celery). Якщо Unisender повернув 503 — задача йде в retry через 5 хвилин, потім 15, потім 60. Після 5 невдалих спроб — у dead letter queue з алертом. Користувач при цьому вже отримав свій 200 OK і не знає про проблему. Завдяки цьому підходу bounce rate на проєктах знижується до 0.5%.
Приклад job для Laravel:
public function handle(): void
{
try {
$response = Http::post(config('services.unisender.email_url'), $this->params);
if ($response->failed()) {
$this->release(300); // retry через 5 хв
}
} catch (\Throwable $e) {
$this->release(300);
}
}
Шаблони
Зберігаємо шаблони в коді (Blade, Twig, React Email), не в інтерфейсі провайдера. Причини: версіонування через Git, preview у браузері без відправки, можливість тестування. Для складних шаблонів з динамічним контентом — react-email з експортом в HTML через @react-email/render.
Валідація та згоди
Перед додаванням контакту до списку — double opt-in (лист з підтвердженням). Зберігати факт підтвердження з timestamp у своїй БД. При відписці — синхронно відписуємо і у провайдера, і в своїй базі. Ігнорувати webhook відписки — прямий шлях до блокування акаунта у провайдера. Всі процеси відповідають ФЗ-152 про персональні дані.
Як налаштувати DKIM для домену-відправника?
DKIM дозволяє підписувати листи цифровим підписом, що підвищує довіру поштових серверів.
- Згенеруйте пару ключів (наприклад, через OpenSSL:
openssl genrsa -out private.key 2048).
- Опублікуйте публічний ключ у DNS як TXT-запис для селектора (наприклад,
mail._domainkey.tx.example.com).
- Вкажіть селектор у провайдера (SendGrid, Mailgun, Unisender).
- Перевірте командою
dig TXT mail._domainkey.tx.example.com.
Моніторинг доставності
Підключаємо webhook від провайдера на події bounce (жорсткий і м'який), spam_complaint, unsubscribe. Жорсткий bounce — негайно позначаємо email як невалідний у своїй БД, більше не відправляємо. М'який bounce 3 рази поспіль — те саме. Метрики: open rate, click rate, bounce rate, unsubscribe rate — дивимося не рідше разу на тиждень. Наші сертифіковані інженери налаштовують алерти в Grafana/Prometheus.
Чому важливо розділяти потоки?
Якщо відправити маркетингову розсилку з того ж домену, що й транзакційні листи, отримавши скарги на спам, ви ризикуєте заблокувати домен — і користувачі перестануть отримувати навіть підтвердження замовлень. SPF, DKIM, DMARC (Wikipedia SPF, Wikipedia DKIM) повинні бути налаштовані окремо для кожного потоку. Ми використовуємо субдомени з різними DNS-записами.
Обсяг робіт з інтеграції
- Аудит поточних потоків комунікації та репутації домену (SPF, DKIM, DMARC)
- Вибір провайдера та схеми: транзакційний vs маркетинговий трафік
- Налаштування DNS-записів SPF, DKIM, DMARC (Wikipedia DMARC)
- Розробка шаблонів листів (HTML + динамічний контент)
- Інтеграція з бекендом через черги та API
- Налаштування webhook для доставності та скарг
- Документація з експлуатації та навчання команди
- Гарантія доставності та підтримка після запуску
Терміни та вартість
| Сценарій |
Термін (робочі дні) |
Примітка |
| Базові транзакційні листи (один провайдер) |
5–7 днів |
Ціна розраховується індивідуально після аудиту |
| Тригерні ланцюжки + SMS + веб-пуши |
10–20 днів |
Ціна розраховується індивідуально після аудиту |
| Повна омніканальна автоматизація |
20–40 днів |
Ціна розраховується індивідуально після аудиту |
Вартість розраховується індивідуально після аудиту. Ми працюємо під ключ: від аналізу до моніторингу в продакшені. Отримайте консультацію інженера — оцінимо проєкт безкоштовно та скажемо точні терміни. Досвід більше 7 років в інтеграції поштових сервісів, реалізовано 50+ проєктів. Замовте безкоштовний аудит поточної інтеграції — отримайте звіт з рекомендаціями.
