Інтеграція Zendesk Chat на сайт: від встановлення віджета до синхронізації з тікетами
Відзначимо: коли клієнт заходить на сайт і бачить кнопку чату, він очікує миттєвої відповіді. Але якщо чат не підключений до вашої системи підтримки, кожне звернення доводиться обробляти вручну — це втрата часу та клієнтів. Zendesk Chat (частина Zendesk Suite як Messaging) вирішує цю проблему, об'єднуючи чат і тікети в єдиному робочому столі агента. Часта помилка — спроба вбудувати iframe старого віджета без урахування CORS, що веде до помилок завантаження. Інша проблема — неправильна генерація JWT-токена через невірний secret-ключ, через що віджет не бачить користувача. Наша команда допомагає впровадити Zendesk Chat з урахуванням вашої архітектури: React, Vue, Laravel або навіть статичний HTML. Інтеграція під ключ включає встановлення віджета, налаштування JWT-аутентифікації та передачу даних про користувача в helpdesk. Оцінимо ваш проект безкоштовно. Неправильна інтеграція чату може коштувати бізнесу до 500 000 ₴ на рік через втрату клієнтів і неефективну підтримку.
Технічні складності підключення Zendesk Chat
Вибір версії віджета. Zendesk пропонує два API: Classic Web Widget (застаріваючий) та новий Web Widget (Messaging). Новий швидший на 30% за показником LCP і підтримує чат-ботів, але вимагає адаптації коду. Classic простіший у кастомізації, але вже не отримує оновлень. Ми допоможемо вибрати відповідний варіант під ваш стек і бюджет. Наприклад, на одному проекті з Vue 3 ми вибрали Classic через глибоку кастомізацію CSS, а на іншому з React 18 — Messaging для майбутньої інтеграції з чат-ботом.
JWT-аутентифікація. Без JWT віджет не зрозуміє, хто користувач, і тікети будуть анонімними. Генерація токена вимагає серверного коду та секретного ключа. Ми підготували готові приклади для PHP (з бібліотекою Firebase JWT) та Node.js. Як зазначено в документації Zendesk: JWT-токен повинен бути підписаний з використанням HS256 і містити поля name, email та external_id. Детальніше про JWT.
Передача кастомних даних. Часто потрібно передати номер замовлення, тариф або історію дій на сайті. Це реалізується через zE.identify() або messenger:set з додатковими параметрами. Без цього агент не бачить контекст — доводиться перепитувати, що збільшує час відповіді на 50%.
Як передати кастомні дані в Zendesk Chat?
Процес складається з чотирьох етапів:
- Аналіз поточного стеку. Визначаємо, який віджет підходить, де розміщувати код, чи потрібен JWT.
- Встановлення та налаштування віджета. Додаємо snippet в
<head>, налаштовуємо локалізацію, колірну схему. - Реалізація JWT та передачі даних. Пишемо endpoint для генерації токена, інтегруємо з вашою авторизацією.
- Інтеграція з API Zendesk. Налаштовуємо створення тікетів з форм зворотного зв'язку, синхронізацію з CRM. Дивіться API Zendesk для деталей.
Приклад коду: встановлення нового Web Widget
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=YOUR_KEY"></script>
<script>
zE('messenger:set', 'locale', 'ru');
zE('messenger', 'loginUser', function(callback) {
fetch('/zendesk-token').then(r => r.json()).then(data => {
callback(data.token);
});
});
</script>
Приклад JWT-генерації на PHP
use Firebase\JWT\JWT;
$payload = [
'iss' => 'yourcompany',
'iat' => time(),
'jti' => uniqid(),
'name' => $user->name,
'email' => $user->email,
'external_id' => (string)$user->id
];
$token = JWT::encode($payload, env('ZENDESK_JWT_SECRET'), 'HS256');
Приклад створення тікета через API
Http::withBasicAuth($email . '/token', $apiKey)
->post("https://yourcompany.zendesk.com/api/v2/tickets", [
'ticket' => [
'subject' => $subject,
'comment' => ['body' => $message],
'requester' => ['name' => $name, 'email' => $userEmail],
'priority' => 'normal',
'tags' => ['website', 'contact-form']
]
]);
Порівняння Classic та нового Web Widget
| Характеристика | Classic Widget | New Widget (Messaging) |
|---|---|---|
| Час завантаження (LCP) | ~1.5 с | ~1.0 с (на 30% швидше) |
| Підтримка чат-ботів | Ні | Так |
| Кастомізація | Висока (CSS) | Обмежена |
| Оновлення | Тільки критичні | Активні |
| Багатоканальність (месенджери) | Ні | Так |
Типові помилки при інтеграції та їх вирішення
| Помилка | Причина | Рішення |
|---|---|---|
| Віджет не завантажується | Неправильно вказано ключ або заблоковано CORS | Перевірити key в snippet, додати заголовки CORS на сервері |
| JWT-токен не спрацьовує | Закінчився час життя (exp) або невірний secret | Встановити iat та exp у розумних межах, звірити secret з панеллю Zendesk |
| Кастомні дані не передаються | Невірно вказано імена полів у zE.identify() |
Використовувати ті ж ключі, що й у налаштуваннях Zendesk |
Перед інтеграцією перевірте: визначте версію віджета, підготуйте endpoint для JWT, зберіть список переданих даних, налаштуйте API-ключі та переконайтеся в підтримці HTTPS.
Коли використовувати Classic Widget, а коли новий Messenger?
Classic Widget підходить, якщо потрібна глибока кастомізація CSS та повний контроль над інтерфейсом. Новий Messenger — якщо плануєте використовувати чат-ботів, багатоканальність (месенджери) та покращити LCP. Ми допомагаємо оцінити, виходячи з вашого трафіку, потреб у кастомізації та бюджету.
Що входить в роботу
- Встановлення та налаштування віджета (будь-яка версія).
- Реалізація JWT-аутентифікації з генерацією токена на сервері.
- Передача кастомних даних (ім'я, email, ID, мета-інформація).
- Налаштування авто-відповідей та тригерів у панелі Zendesk.
- Інтеграція з API для створення тікетів з форм сайту.
- Документація з експлуатації та навчання агентів підтримки.
- Гарантія стабільної роботи 24/7 та допомога при оновленнях Zendesk.
Переваги роботи з нами
Більше 10 років досвіду в інтеграції чатів та helpdesk-систем. Виконали 50+ проектів з підключення Zendesk Chat на сайтах з навантаженням до 100 000 відвідувачів на місяць. Сертифіковані спеціалісти з Zendesk Suite. Даємо гарантію на всі роботи — якщо щось зламається, виправимо протягом 24 годин. Середній час обробки заявок скорочується на 60% після інтеграції, а економія бюджету на підтримку досягає 35% — у грошовому вираженні це може становити більше 200 000 ₴ на рік для середнього бізнесу. Один з клієнтів з трафіком 50 000 відвідувачів на місяць зекономив 150 000 ₴ за перший квартал після інтеграції.
Терміни та вартість
Базова інтеграція (віджет без JWT) — 1 робочий день. З JWT та передачею даних — 2-3 дні. Повний проект з кастомізацією та навчанням — до 5 днів. Вартість розраховується індивідуально після аудиту вашого сайту. Зв'яжіться з нами — оцінимо проект безкоштовно.
Для інтеграції Zendesk Chat зв'яжіться з нами. Ми запропонуємо оптимальне рішення під ваш бюджет і терміни. Отримайте консультацію з інтеграції Zendesk Chat — ми проаналізуємо ваш сайт і запропонуємо оптимальне рішення. Замовте безкоштовний аудит поточного чату.