Добавление виджета веб-чата на ваш сайт WordPress — быстрый и простой процесс. Для этого не требуются какие-либо навыки кодирования или технические знания.
Подготовка к установке
Для установки виджета веб-чата на WordPress вам понадобится следующее:
Доступ к панели инструментов WordPress вашего сайта'.
Фрагмент кода для вашего виджета веб-чата.
Если у вас еще нет фрагмента кода, создайте его при создании виджета Чата Сайта или используя Плагин Чата Facebook для Facebook Messenger.
Если у вас уже подключены каналы на платформе response.io и вам необходимо получить сгенерированный фрагмент кода, следуйте инструкциям здесь.
Для успешной установки убедитесь, что домен вашего сайта заполнен. Есть два способа сделать это.
Перейдите на response.io Настройки > выберите Каналы > выберите канал чата вашего сайта > нажмите «Настроить» > добавьте домен сайта.
Перейдите в настройки response.io > выберите Виджеты роста > нажмите на виджет, который вы хотите добавить на свой сайт > в переключателе Общие добавьте домен вашего сайта в поле Домены сайта .
Установка на WordPress
Шаг 1: Войдите в WordPress.
Перейдите в панель администратора WordPress вашего сайта и войдите в систему.
Шаг 2: Перейдите на страницу плагинов.
На левой навигационной панели нажмите Плагины. На странице плагинов нажмите синюю кнопку Добавить новый в верхней части страницы.
Шаг 3: Добавьте новый плагин
Используя строку поиска, найдите плагин WPCode . На странице результатов поиска вы увидите множество опций, которые можно использовать, но для этого урока мы будем использовать плагин "Insert Header and Footers" от WPCode. Нажмите кнопку Установить сейчас и обязательно активируйте плагин, чтобы использовать его.
Шаг 4: Откройте консоль верхних и нижних колонтитулов
В левом навигационном меню нажмите «Фрагменты кода» и выберите «Верхний колонтитул и Нижний колонтитул» из подменю.
Шаг 5: Добавьте скрипт чата в реальном времени
Скопируйте скрипт плагина с response.io и вставьте его в раздел Скрипт в нижнем колонтитуле на странице консоли верхнего и нижнего колонтитула.
После того, как вы вставили скрипт, нажмите синюю кнопку "Сохранить" внизу страницы.
Готово!
Откройте сайт и проверьте плагин чата. Вы найдете его в правом нижнем углу. Теперь посетители вашего сайта смогут без труда общаться с вами. Если вы использовали фрагменты кода, сгенерированные на платформе response.io, вы сможете управлять беседами и обновлять внешний вид виджета с платформы.
Виджет чата теперь активен на вашем сайте!
Определите вошедших в систему пользователей
Этот раздел применим только в том случае, если на вашем сайте предусмотрена функция входа пользователя в систему.
Шаг 1: Войдите в учетную запись WordPress.
Перейдите в панель администратора WordPress вашего сайта и выполните вход.
Шаг 2: Откройте файлы заголовков темы
В левом навигационном меню нажмите Внешний вид и выберите Редактор файлов темы. Продолжайте выбор файла заголовка темы.
Шаг 3: Добавьте полученный идентификатор пользователя и код имени.
Скопируйте приведенный ниже пример кода и вставьте его в файл заголовка темы. После того, как вы вставили код, нажмите кнопку Обновить файл в нижней части страницы.
Пример кода ниже позволяет получить идентификатор пользователя, его имя и фамилию из WordPress. Не стесняйтесь вносить изменения, если вы хотите получить другие контактные поля.
<?php
$user_info = get_userdata(get_current_user_id());
?>
<script type="text/javascript">
окно.$wp_ID = "<?php echo $user_info->ID; ?>";
окно.$wp_firstname = "<?php echo $user_info->имя_имя; ?>";
окно.$wp_lastname = "<?php echo $user_info->фамилия; ?>";
</script>`
Шаг 4: Откройте консоль верхних и нижних колонтитулов
На левой панели навигации нажмите Настройки, затем выберите плагин Верхний колонтитул и Нижний колонтитул из подменю.
Шаг 5: Добавьте сценарий идентификации вошедшего в систему пользователя
Скопируйте приведенный ниже пример кода и вставьте его в раздел Скрипт в нижнем колонтитуле на странице консоли верхнего и нижнего колонтитула. Обратите внимание, что скрипт идентификации вошедшего в систему пользователя должен быть помещен выше скрипта Живого Чата.
В примере кода ниже в качестве идентификатора используется идентификатор пользователя, а также имя и фамилия. Не стесняйтесь вносить изменения, если вы хотите получить другие контактные поля.
<script>
window.__respond_settings = {
identifier: $wp_ID,
firstName: $wp_firstname,
lastName: $wp_lastname,
};
</script>После того, как вы вставили скрипт, нажмите синюю кнопку "Сохранить" внизу страницы.
Готово!
Откройте сайт и проверьте плагин чата. Можно идентифицировать вошедших в систему пользователей вашего WordPress. Как только переданный идентификатор сопоставится с существующим контактом, текущий разговор будет возобновлен.
Часто задаваемые вопросы и устранение неполадок
WPCode
Если вы используете плагин кэширования WordPress, такой как WPCode, выполните следующие действия, чтобы виджет отображался правильно.
Отключить функцию минимизации данных для JavaScript
Перейдите в Настройки Wordpress > Выберите WPCode > На странице WPCode выберите Оптимизация файлов вкладка > снимите отметку Уменьшить файлы JavaScript
Добавьте наш домен виджета в исключенные файлы Javascript
https://cdn.respond.io/webchat/widget/(.*).js
После сохранения рекомендуется очистить кэш в WordPress.
