Онлайн-чат для WordPress: установка плагина и настройка

Онлайн-чат для WordPress ставится без программиста: в админке сайта есть всё, чтобы подключить виджет за несколько минут. Вопрос скорее в том, какой способ выбрать — готовый плагин или вставку кода — и что проверить после установки, чтобы чат действительно появился у посетителей, а не только у вас в браузере. Разберём оба варианта по шагам, отдельно поговорим о магазинах на WooCommerce и о передаче данных авторизованных пользователей.

Какие способы установки чата есть в WordPress

Любой виджет чата — это небольшой скрипт, который должен загрузиться на каждой странице сайта. В WordPress его можно добавить тремя путями:

• Плагин сервиса чата. Самый простой вариант: устанавливаете плагин, вставляете ключ в настройках, и он сам добавляет скрипт на все страницы. Хороший плагин умеет больше, чем просто вставить код, — например, передать оператору, кто именно пишет.
• Плагин для вставки кода (WPCode и аналоги). Универсальный способ для любого сервиса, если готового плагина нет или вы не хотите ставить ещё один.
• Правка темы — header.php, footer.php или functions.php. Работает, но требует аккуратности: при обновлении темы изменения могут пропасть, а ошибка в PHP способна «уронить» сайт.

Если у сервиса есть свой плагин, начинайте с него. Остальные способы — запасные.

Установка через плагин: пошагово

Покажем на примере ChatDeck — у него есть готовый плагин для WordPress. Порядок действий у большинства сервисов похожий. Общая схема установки для любой платформы со скриншотами — в уроке «Установка чата на сайт».

1. Зарегистрируйтесь в сервисе и найдите публичный ключ виджета. В ChatDeck он начинается с pk_ и лежит в разделе «Настройки» → «Документация».
2. Скачайте архив плагина со страницы интеграции с WordPress.
3. В админке WordPress откройте «Плагины» → «Добавить новый» → «Загрузить плагин», выберите файл chatdeck-wordpress.zip, нажмите «Установить», затем «Активировать».
4. Перейдите в «Настройки» → «ChatDeck», вставьте ключ и нажмите «Сохранить».
5. Откройте сайт в новой вкладке — в углу должна появиться кнопка чата.

Плагин подключает скрипт асинхронно, поэтому он не задерживает отрисовку страницы. Если ключ вставлен с ошибкой, плагин предупредит об этом прямо в настройках и не станет выводить нерабочий код.

Установка кодом: header.php, functions.php или плагин вставки кода

Если вы предпочитаете не ставить отдельный плагин, используйте код виджета. В ChatDeck он выглядит так:

<script src="https://chatdeck.ru/widget.js" data-chatdeck-key="pk_ВАШ_КЛЮЧ" async></script>

Его можно разместить как в <head>, так и перед закрывающим </body> — работать будет одинаково.

Через плагин вставки кода

Самый безопасный из «ручных» способов:

1. Установите бесплатный плагин WPCode («Insert Headers and Footers»).
2. Откройте «Code Snippets» → «Header & Footer».
3. Вставьте код в поле «Footer» и сохраните.

Код не зависит от темы и переживёт её смену и обновления.

Через файлы темы

Если всё же правите тему, делайте это в дочерней теме, иначе при обновлении родительской темы правки исчезнут. Варианты:

• вставить код перед </body> в footer.php;
• добавить в functions.php функцию на хук wp_footer, которая выводит тег скрипта.

Перед правкой functions.php сделайте резервную копию: синтаксическая ошибка в этом файле приводит к белому экрану, и исправлять её придётся через FTP или файловый менеджер хостинга.

Передача данных авторизованных пользователей оператору

Когда на сайте есть личный кабинет — магазин, онлайн-школа, сервис по подписке, — оператору важно сразу понимать, кто пишет. Без этого первые сообщения уходят на «Подскажите ваш email» и «Какой номер заказа?», а клиент раздражается: он ведь уже вошёл в аккаунт.

Плагин ChatDeck решает это автоматически: если посетитель вошёл в WordPress, плагин передаёт оператору его имя и email. Оператор видит карточку с этими данными с первого сообщения, а все обращения одного пользователя собираются в один диалог, даже если он пишет с разных устройств. Передачу можно отключить галочкой в настройках плагина.

При установке кодом то же самое делается вызовом chatdeck('identify', {...}) — подробнее о том, какие данные стоит передавать и зачем, рассказано в статье про идентификацию посетителей.

Передавайте только то, что действительно нужно оператору для ответа. Имени и email обычно достаточно; лишние персональные данные в чате — лишние риски.

Проверка: кэш, оптимизаторы JS и конфликт плагинов

Самая частая жалоба после установки — «у меня чат есть, а у клиентов нет» или наоборот. Почти всегда причина в одном из трёх пунктов.

Кэш

Плагины кэширования (WP Rocket, W3 Total Cache, LiteSpeed Cache и другие) отдают посетителям сохранённую копию страницы. Пока кэш не обновится, новый скрипт на ней не появится. После установки чата очистите кэш плагина, а если сайт работает через CDN — и кэш CDN.

Оптимизация JavaScript

Многие оптимизаторы объединяют скрипты, откладывают их загрузку до первого действия пользователя или переносят в конец страницы. Обычно виджет это переживает, но если кнопка появляется с большой задержкой или не появляется вовсе, добавьте адрес chatdeck.ru/widget.js в исключения оптимизатора.

Конфликты и проверка

Порядок проверки:

1. Откройте сайт в режиме инкогнито — так вы увидите его глазами нового посетителя.
2. Проверьте несколько типов страниц: главную, запись, страницу товара, корзину.
3. Если кнопки нет, откройте код страницы и поищите widget.js. Нет скрипта — дело в кэше или настройках; скрипт есть — проверьте исключения оптимизатора.
4. Отправьте тестовое сообщение и убедитесь, что оно пришло в панель операторов.

Конфликта стилей с темой быть не должно: виджет ChatDeck работает внутри Shadow DOM, поэтому CSS темы не ломает чат, а чат не трогает оформление сайта.

Что настроить сразу после установки

Кнопка на сайте — только начало. Чтобы чат приносил пользу с первого дня, пройдитесь по короткому списку:

• Внешний вид. Цвет под фирменный стиль, светлая или тёмная тема, положение кнопки (слева или справа) — так, чтобы она не перекрывала кнопку «Наверх» или баннер cookies.
• Приветствие. Короткая фраза, которая объясняет, с чем вы помогаете.
• Рабочие часы. Вне них посетитель должен понимать, когда ему ответят.
• Уведомления операторам. Браузерные push-уведомления, приложение для iOS или десктопное приложение для macOS и Windows — чтобы новый чат не остался незамеченным.
• ИИ-ассистент — если хотите, чтобы на типовые вопросы отвечал бот, а сложные он передавал человеку.

Общий порядок подключения чата на любой платформе описан в статье как установить онлайн-чат на сайт.

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

Нужен ли отдельный плагин, если можно вставить код?

Нет, код работает и без плагина. Плагин удобнее тем, что не зависит от темы, проверяет ключ и автоматически передаёт данные вошедших пользователей. Если вам это не нужно, достаточно вставки через WPCode.

Почему чат не появился после установки на WordPress?

Чаще всего виноват кэш: очистите его в плагине кэширования и в CDN. Затем проверьте, сохранён ли ключ, и не блокирует ли скрипт оптимизатор JavaScript. Смотрите сайт в режиме инкогнито — у администратора кэш может не работать.

Замедлит ли виджет сайт?

Скрипт загружается асинхронно, поэтому не блокирует отрисовку страницы: сначала грузится сайт, потом появляется кнопка чата. Заметного влияния на скорость обычно нет.

Работает ли чат с WooCommerce?

Да. WooCommerce — это часть WordPress, поэтому плагин работает и на страницах магазина: в каталоге, карточках товаров, корзине. Покупатели, вошедшие в аккаунт, попадают к оператору с именем и email, а оператор видит, на какой странице находится клиент прямо сейчас.

Если хотите попробовать на своём сайте, зарегистрируйтесь в ChatDeck — это бесплатно, без оплаты за операторов, — и скачайте плагин на странице интеграции с WordPress.