Онлайн-чат в WordPress: установка за 20 минут

Кнопка чата в углу сайта, входящие сообщения в кабинете сервиса и уведомления на телефоне: на всё уходит около 20 минут. Ниже два пути для WordPress 6.x. Первый, через плагин сервиса, подходит большинству. Второй, одним скриптом через дочернюю тему, нужен тем, кто не хочет ставить плагин ради одного виджета.

Что нужно до начала

• WordPress 6.x. Для варианта со скриптом нужна версия 6.3 или новее. Номер версии виден в правом нижнем углу админки.
• Права администратора. Без них не получится ни поставить плагин, ни править тему.
• Свежая резервная копия файлов и базы. Если ошибётесь в коде, откат займёт минуту.
• Адрес электронной почты для регистрации в сервисе чата.
• Для варианта со скриптом: доступ к файлам по SFTP или файловый менеджер на хостинге и активная дочерняя тема.

Какой сервис взять

Подойдёт любой, который закрывает четыре пункта:

• есть плагин в каталоге WordPress или готовый код установки;
• есть офлайн-форма: ночью чат превращается в заявку, а не в пустую кнопку;
• уведомления приходят туда, где вы реально сидите: на почту, в мессенджер или приложение;
• понятно, где хранятся переписки.

Среди популярных вариантов Tawk.to и JivoChat. Условия тарифов и ограничения бесплатных планов меняются, поэтому сверяйте их на сайтах сервисов.

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

1. Зарегистрируйтесь и добавьте сайт. Укажите домен без лишних путей. Проверка: в кабинете виден ваш сайт и блок с кодом установки или ссылкой на плагин.
2. Установите плагин. В админке откройте «Плагины → Добавить новый», найдите плагин по названию сервиса, нажмите «Установить», затем «Активировать». Проверка: в списке плагинов у него статус «Активен», в меню админки обычно появляется новый раздел с настройками.
3. Привяжите аккаунт. В настройках плагина войдите в кабинет сервиса или вставьте идентификатор сайта из кабинета. Проверка: плагин показывает название вашего сайта или виджета, а не пустую форму входа.
4. Задайте приветствие, график и офлайн-форму. Хватит одной фразы приветствия. Проверка: после перезагрузки страницы настроек сохранённые значения на месте.
5. Очистите кеш и откройте сайт в окне инкогнито. Если стоит плагин кеширования (WP Rocket, LiteSpeed Cache и подобные) или CDN, сначала сбросьте их кеш. Проверка: в нижнем углу появилась кнопка чата. Напишите тестовое сообщение: оно должно прийти в кабинет сервиса.

Чат, на который отвечают через сутки, хуже обычной формы: форма хотя бы не обещает ответа сразу.

Подключение без плагина: один скрипт в дочерней теме

Этот путь работает, если сервис даёт код установки в виде одного тега script с адресом в атрибуте src. Если в коде есть ещё и блок инициализации с идентификатором, проще вставить его целиком через плагин для вставки кода в шапку и подвал, например WPCode. Что такое дочерняя тема и как её создать, описано в руководстве по темам WordPress.

Виджет - небольшой скрипт, который рисует кнопку чата поверх страницы и связывается с сервером сервиса. Хук - точка в коде WordPress, к которой можно подключить свою функцию.

Что куда вписать

Код

Для WordPress 6.3 и новее. Ключ strategy появился именно в этой версии, подробности в документации функции wp_enqueue_script.

<?php
/**
 * Подключение скрипта чат-виджета в подвале сайта.
 * Нужен WordPress 6.3 или новее.
 */

// Хук wp_enqueue_scripts срабатывает на страницах сайта, но не в админке.
add_action( 'wp_enqueue_scripts', 'mysite_enqueue_chat_widget' );

function mysite_enqueue_chat_widget() {
    wp_enqueue_script(
        'mysite-chat-widget',                       // уникальная метка скрипта
        'https://YOUR_CHAT_SERVICE_HOST/widget.js', // адрес из кода установки сервиса
        array(),                                    // зависимостей нет
        null,                                       // без параметра ?ver= в адресе
        array(
            'strategy'  => 'defer', // скрипт не задерживает отрисовку страницы
            'in_footer' => true,    // вывод в подвале, перед закрывающим body
        )
    );
}

Шаги

1. Сохраните копию functions.php дочерней темы на свой компьютер. Проверка: копия лежит локально и открывается.
2. Откройте functions.php по SFTP и вставьте код в конец файла. Если в файле уже есть открывающий <?php, первую строку из примера не копируйте. Если файл заканчивается закрывающим ?>, вставляйте код перед ним. Не правьте файл через редактор тем в админке: опечатка уронит сайт, а исправить её оттуда уже не выйдет.
3. Замените адрес скрипта. Проверка: адрес в кавычках совпадает с тем, что указан в коде установки.
4. Сохраните файл, сбросьте кеш и обновите страницу. Проверка: в исходном коде страницы (Ctrl+U) есть строка с mysite-chat-widget-js и атрибутом defer, а в углу видна кнопка чата.

Если не получилось

• Кнопки нет, а строки со скриптом в исходном коде страницы тоже нет. Почти всегда виноват кеш страниц или CDN. Сбросьте кеш и откройте сайт в окне инкогнито. Если плагин вставляет код, проверьте, что виджет не отключён для нужных типов страниц.
• Скрипт в коде есть, виджета нет, в консоли браузера (F12, вкладка Console) написано Refused to load the script ... because it violates the following Content Security Policy directive. Сайт запрещает загрузку чужих скриптов. Добавьте домен сервиса в политику CSP: она настраивается в конфиге веб-сервера или в плагине безопасности.
• В консоли net::ERR_BLOCKED_BY_CLIENT. Запрос режет блокировщик рекламы. Проверьте в окне без расширений. Часть посетителей с блокировщиками чата не увидит, и это не лечится настройками сайта.
• После правки functions.php белый экран или сообщение о критической ошибке на сайте, либо Parse error: syntax error. В коде опечатка или лишний <?php. Верните сохранённую копию файла по SFTP. Ссылка для входа в режим восстановления обычно приходит на почту администратора.
• На странице две кнопки чата. Вы поставили и плагин, и скрипт. Оставьте один способ и сбросьте кеш.

Данные посетителей

Чат собирает имя, почту, текст переписки и технические данные посетителя. Это персональные данные в смысле закона 152-ФЗ, поэтому на сайте нужна политика обработки и, как правило, согласие. Если сервис хранит переписки за рубежом, вопрос о том, где хранятся данные россиян, стоит обсудить с юристом. Это не вопрос настройки WordPress.

Что делать дальше

• Замерьте скорость до и после подключения в PageSpeed Insights на одной и той же странице. Виджет добавляет скрипт, и вам важно знать, сколько он стоит.
• Через неделю откройте статистику в кабинете сервиса: сколько диалогов осталось без ответа и за какое время вы отвечаете в среднем.
• Настройте автоответ вне рабочих часов и уведомления на телефон.

Связка чата с CRM и WooCommerce - отдельная тема, здесь её не разбираем.