Как установить Telegram Чат на Wordpress сайт
В данной инструкции мы подробно проиллюстрируем, как установить Телеграм чат для Wordpress страницы. Примерное время установки - 5 минут.
Увеличьте конверсии и доверие к вашему сайту с помощью онлайн-чата!
Подключение чата значительно повышает продажи и уровень доверия посетителей.
Сервис WidgetSpark позволяет бесплатно установить чат с поддержкой Telegram на ваш сайт, работающий на WordPress.
Быстрый старт, простая настройка — оставайтесь на связи с клиентами 24/7!
1. Регистрация
Перейдите на сайт https://widgetspark.com/app и зарегистрируйтестесь, если еще не сделали это. Регистрация займет не более 1 минуты. После регистрации вы увидите интерфейс управления виджетами.
2. Добавление Telegram Чат Виджета
Необходимо добавить Telegram Чат Виджет и получить код, который мы вставим на сайт. Для этого переходим во вкладку Каталог и нажимаем на кнопку Telegram Чат.
Изображение 1 - Каталог виджетов WidgetSpark
Откроется модальное окно с описанием небольших шагов, которые нужно выполнить.
Шаг 1. Установка названия
На этом шаге придумываем название для нашего ТГ чата, оно будет отоброжено в списке активных виджетов.
Изображение 2 - Установка названия для Telegram Чат Виджета
Шаг 2. Выбор цвета чата
На этом этапе вам предлагается выбрать цвет Телеграм Чат Виджета и форму кнопки запуска. Это не все настройки, а только лишь необходимый минимум, чтобы вы могли как можно быстрее запустить чат. Более подробные настройки дизайна будут доступны после добавления виджета.
Изображение 3 - Выбор цвета Телеграм чата
После выбора цвета в ниждей части модального окна появится превью вашего виджета. После выбора цвета и формы кнопки запуска нажимаем на кнопку Продолжить.
Изображение 4 - Превью телеграм чата на сайте Вордпресс
Шаг 3. Подключение чата телеграм
Теперь необходимо создать супергруппу в Телеграм, для того чтобы получать в ней сообщения от ваших клиентов с сайта. Для этого переходим в телеграм, открываем боковое меню и выбираем пункт Новая группа (New Group).
Изображение 5 - Создание новой супергруппы
Вводим название нашей новой группы, в которую мы будем получать сообщения от клиентов.
Изображение 6 - Установка названия супергруппы
После создания группы нужно открыть её настройки.
Изображение 7 - Открытие настроек супергруппы
В настройках необходимо включить Темы (Topics). Данная функция позволит разделять чаты для общения с каждым новым пользователем. Это значительно упрощает работу с обращениями.
Важно! Необходимо сначала включить Темы для группы и сохранить настройки. Только после этого переходить к добавлению администратора, в противном случае для бота не откроются все необходимы уровни доступа.
Также необходимо добавить в администраторы супергруппы нашего Telegram бота @tg_widgetspark_bot. Через него будет осуществляться отправка сообщения с Wordpress сайта и обратно.
Изображение 8 - Включение топиков и добавление администратора
После завершения настройки остается открыть топик #General и ввести команду /auth. В ответ на эту команду бот вернет код доступа, нажав на который вы можете его скопировать.
Изображение 9 - Получение кода доступа для чата на сайт Wordpress
Код необходимо вставить в форму добавления Телеграм чата и нажать Продолжить.
Изображение 10 - Вставка кода доступа в панель управления WidgetSpark
Шаг 4. Получение скрипта Telegram чата для сайта
На конечном этапе настройки вы получите скрипт для вставки на ваш сайт.
Изображение 11 - Получение скрипта для вставки сайт
3. Установка скрипта Telegram Чата на Wordpress сайт
Для того чтобы вставить скрипт на ваш WordPress-сайт, вы можете воспользоваться одним из следующих способов:
- с помощью плагина Shortcoder;
- с помощью плагина Insert Headers and Footers;
- с помощью изменения файла functions.php вашей темы.
Выберите наиболее удобный способ и вставьте в него HTML-скрипт Telegram Чат Виджета от WidgetSpark.
Вариант 1. Установка Telegram Чата на WordPress сайт с помощью Shortcoder
Shortcoder — это плагин, позволяющий создать пользовательский блок кода (шорткод), который можно вставить на любую нужную страницу вашего сайта. После публикации такого блока генерируется специальный шорткод, который легко интегрируется в содержимое страницы или записи.
Как установить Shortcoder:
- Перейдите в админку
- Откройте раздел Плагины
- Найдите плагин Shortcoder
- Установите плагин
- Активируйте плагин
- Выберите пункт меню Shortcoder -> Create shortcode
- На экране откроется встроенный редактор, для которго есть 3 режима: Text Editor, Visual Editor и Code Editor (лучше всего использовать Code Editor).
Мы установили и открыли редактора плагина, теперь нам осталось только копировать и вставить скрипт, колученный на шаге 4 создания Телеграм Чат Виджета. После вставки нажимаем кнопку Опубликовать и на этом настройка виджета завершена.
Изображение 12 - Публикация скрипта Телеграм Чат виджета на сайт WordPress
Изображение 13 - Добавлен телеграм чат на сайт (Вордпресс)
Вариант 2. Установка Telegram Чата на WordPress сайт с помощью Insert Headers and Footers
Для начала нам нужно найти и установить плагин как показано на скриншоте ниже.
Изображение 14 - Поиск плагина Insert Headers and Footers
Перейдите в пункт меню Плагины - Установленные. 
Изображение 15 - Открытие плагина Insert Headers and Footers
Далее нажмите на кнопку Настройки (Settings).
Изображение 16 - Настройки плагина Insert Headers and Footers
Откроется редактор с 3 вариантами вставки:
- Header - шапка сайта,
- Body - тело сайта,
- Footer - подвал сайта.
Лучше всего устанавливать виджет в Header, таким образом он быстрее загрузится.
После вставки кода нажимаем на кнопку Сохранить. На этом настройка чата на WordPress сайте завершена!
Вариант 3. Установка Telegram Чата на WordPress сайт с помощью functions.php
Вам понадобится ваша панель управления хостингом. Её можно открыть через личный кабинет вашего хостинг провайдера (например TimeWeb, RegRU и другие). В целом порядок действий схож для разных панелей управления, поэтому мы рассмотрим только ispmanager.
В панели управления хостингом нужно найти файл functions.php, обычно он находится по пути /var/www/<domain>/wp-includes.
Изображение 17 - Открытие файла functions.php в ispmanager
После того как мы нашли и открыли файл вставляем туда наш скрипт, который мы получили на шаге 4 при создании Телеграм Чата на сайт.
Изображение 18 - Вставка скрипта Телеграм Чат виджета на сайт WordPress
4. Расширенная настройка и WEB клиент Телеграм Чата
После добавления виджета на ваш сайт WordPress, вы сможете получать и отправлять сообщения вашим клиентам напрямую через Telegram.
При необходимости вы можете настроить автосообщения, текстовые подписи, отступы, шрифты и другие параметры Telegram Чат-виджета.
Для этого перейдите в веб-клиент WidgetSpark. Нажмите на вкладку Мои виджеты, а затем выберите блок с Telegram-чатом.
Изображение 19 - Добавленный виджет Telegram чата
Вас перенаправит на интерфейс управления Telegram Чат Виджетом для сайта Wordpress. Здесь вы сможете как настраивать ваш виджет так и отвечать на сообщения ваших пользователей.
Изображение 20 - Web клиент виджета Telegram чата
Завершение
На этом настройка Telegram-чата для сайта на WordPress завершена.
Мы постарались подробно описать каждый этап, чтобы у вас не возникло трудностей или вопросов в процессе.
Наши виджеты совместимы с 99% платформ для создания сайтов. Чтобы установить виджет, просто создайте его на платформе WidgetSpark и вставьте сгенерированный скрипт в HTML-разметку вашего сайта.
Желаем вам успехов в использовании наших виджетов!
Всего оценок (0)
