Интеграция 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 — мы проанализируем ваш сайт и предложим оптимальное решение. Закажите бесплатный аудит текущего чата.