Кнопка Telegram для сайта: как добавить + лучшие сервисы
Телеграм – это настоящий «прорыв» современности: высокая скорость работы, удобный интерфейс, безопасность данных – эти характеристики как нельзя лучше отвечают требованиям даже самого привередливого юзера. Этот мессенджер по праву заслужил доверие людей по всему миру. На момент написания статьи, согласно изданию «Ведомости», аудитория Телеграм составляет свыше 500 млн пользователей.
Преимущества подключения Телеграм-виджета к сайту:
- Вы или ваши сотрудники могут взаимодействовать с клиентом комфортным способом.
- У клиента сохраняется история переписки в его профиле, он может вернуться к диалогу в любой момент.
- Вы можете отвечать на запросы заказчиков в нерабочее время.
- К виджету можно подключить робота, который сэкономит вам время при обработке заявок. Бот «умеет» отвечать на популярные запросы заранее подготовленным сообщением. Например, при комбинации в тексте слов «адрес» и «склад» робот автоматически передает список с адресами складов.
Функции кнопки Telegram на сайте
Кнопка «умеет» выполнять 4 функции:
- Переход в чат или группу. Часто у потенциального клиента нет возможности позвонить, поэтому ему, вероятно, удобнее связаться текстовым способом, через личные сообщения или в чате для обсуждения вопросов с другими заказчиками.
- «Позвонить». Такой способ коммуникации повышает вероятность того, что клиент перейдет к вам, если его правильно ввести в разговор.
- Ссылка с переходом. Если вы работаете в сферах продаж и/или оказания услуг, этот вариант станет вашим незаменимым помощником. С помощью краткого «продающего» текста подогреваем интерес, а после него ставим соответствующую кнопку, по которой клиент может прочитать информацию о товаре более подробно.
- Всплывающее окно. Представляет собой окно, которое выводится поверх остального интерфейса и привлекает 100% внимания пользователя. Этот жест создает некую интерактивность. Существует три варианта использования: отдельная ссылка, скрытый текст (к примеру, доступ к полной информации откроется после подписки) и мини-игра, где пользователь угадывает правильный вариант из нескольких других кнопок и т.п.
Как добавить виджет Telegram на сайт вручную
HTML
Разберем HTML теги, которые используются для добавления виджета на сайт.
ВАЖНО. Код писать не потребуется, есть возможность воспользоваться специальными сервисами, которые сделают это за вас.
В качестве примера ниже описана строчка кода полноценно работающего виджета.
<script async src=»https://telegram.org/js/telegram-widget.js?21″ data-telegram-post=»t.me/GroupName/PostNumber» data- data-color=»13B4C6″ data-dark=»1″ data-dark-color=»39C4E8″></script>
- Тег script описывает скрипты.
- Скрипты уже написаны загружаются из открытого хранилища Телеграм, видим по значению атрибута src.
- Атрибут async даёт команду скрипту к загрузке отдельно от остальных элементов страницы.
- Значение data-telegram-post означает взятую в кавычки ссылку на пост в формате t.me/GroupName/PostNumber
- width определяет ширину виджета.
- Последние три атрибута отвечают за настройку цветового отображения.
JS
Скрипты JavaScript для виджетов прописаны компанией Телеграм, работа с JavaScript не потребуется.
CSS
При использовании виджетов можно изменять графические элементы с помощью следующих тегов:
- Ширина и высота виджета – height и width.
- Цветовая настройка отдельных элементов – data-color-etc, где etc – обозначения блоков для изменения цвета.
- data-dark – включение или выключение темной темы.
ТОП сервисов для добавления виджетов и инструкции к ним
Ниже мы подробно расскажем про лучшие сервисы, с помощью которых можно создать Телеграм-виджет:
- TGWidget. Платный сервис, в ассортименте которого представлены следующие окна: два вида для подписки на канал, один – для просмотра контента на канале, а также дополнительный – для приглашения в чат.
- T.website. Бесплатный виджет для отображения кнопки с подпиской.
- Telegram.im. Бесплатная кнопка для перевода в личный чат с указанным пользователем.
- Elfsight. Платный сервис, который открывает окно для ведения диалога во время посещения сайта пользователем.
- Hoversignal. Платный сервис, аналогичный Elfsight.
- Teletype. Платный сервис, подобный Elfsight и Hoversignal.
- Widg.io. Схожий виджет чата, но совместимый с Wix и WordPress.
- SendPulse. Бесплатный виджет чат-бота Телеграм.
- DiscussBot. Бесплатный бот для размещения комментария на отдельной интернет-странице.
- Общедоступный конструктор виджетов от Телеграм.
Кратко разберём работу сервисов на примерах.
T.website
Ссылка на официальный сайт: т.website
Типичный виджет для подписки на канал через сервис T.website.
Инструкция по использованию:
- Переходим по ссылке, вставляем название канала со знаком «@».
- Получаем готовый код для внесения в файл вашего сайта.
- Можно изменить дизайн, если вы разбираетесь в CSS.
Официальный сервис от Telegram
Ссылка на сайт: telegram.org/widgets
Инструкция по использованию:
- На выбор есть целых четыре виджета, нам нужен второй. Если задача состоит в обычном перенаправлении трафика с сайта в Телеграм, рекомендую создать простой виджет с кнопкой подписки на ваш канал в цветовой гамме площадки.
ВАЖНО. Пост должен быть в публичном доступе, т.е. опубликован в открытом канале.
- Вписываем ссылку на пост в поле. Можно настроить: прозрачность окна, отображение фото канала, основной цвет и включение/выключение тёмной темы.
- В строке «Embed Code» забираем готовый код для вставки виджета.
- С помощью сервиса Телеграм можно добавить кнопку «Поделиться», виджет «Логин» и «Комментарий» аналогичным способом.
- Если страница сайта оформлена с помощью конструкторов, например, «Tilda», в них предусмотрена возможность добавления виджетов с названием «HTML-код».
Teletype
Ссылка на официальный сайт: teletype.in
Функционал:
- Подключение через номер телефона или бота.
- Быстрая отправка и получение сообщений, файлов и различных графических документов, стикеров.
- Отсутствие лимитов по количеству сообщений и чатов.
- Автоматическая отправка сообщений по номеру телефона или никнейму.
Стоимость: подключение по номеру телефона – 2250 руб/мес, через бот – 450 руб/мес.
ВАЖНО. При оплате сразу на 3, 6 или 12 месяцев присутствует скидка в размере 10%, 15% и 25% соответственно.
Отличительные особенности:
- скорость работы,
- обработка большого объема информации,
- подключение операторов,
- статистика.
Инструкция по использованию
- После простой регистрации и оплаты тарифа требуется добавить в настройках Телеграм-канал.
- После этого все новые сообщения, которые приходят в ваш аккаунт, попадают на панель сервиса. Там любой свободный оператор может ответить на запрос клиента и заниматься продажами или другой задачей, связанной с общением.
Elfsight
Ссылка на официальный сайт: elfsight.com
Функционал:
- Быстрая передача сообщений от клиента в ваш Телеграм.
- Большой набор настройки параметров чата: триггеры появления виджета, в какие дни недели работает чат и остальные.
Стоимость:
- Lite. Бесплатная версия. Работает на одном сайте, ограничен на 200 просмотров в месяц, поддержка работает только на устранение ошибок, дизайн предоставляется самим сервисом, присутствует реклама. Можно использовать для проверки работы виджета на стадии разработки сайта, либо для первого тестового использования.
- Basic. Стоимость составляет 5$ в месяц. Этот тариф работает на неограниченном количестве сайтов, позволяет осуществить 5 000 просмотров в месяц, поддерживает 1 виджет. Полноценная поддержка, бесплатная установка, настройка дизайна и отсутствие рекламы. Используется для сайтов с низким трафиком.
- Pro. Стоимость составляет 10$ в месяц. Тариф поддерживает неограниченное количество сайтов, работает на 50 000 просмотров в месяц, поддерживает 3 виджета. Бесперебойная поддержка, бесплатная установка, настройка дизайна и отсутствие рекламы. Используется для быстрорастущего бизнеса.
- Premium. Стоимость составляет 20$ в месяц. Количество просмотров неограниченно, как и количество сайтов. Поддерживает 8 виджетов, поддержка улучшенного качества, бесплатная установка, настройка дизайна и отсутствие рекламы. Подходит для агентств и больших компаний с высоким трафиком.
Отличительные особенности:
- быстрое подключение;
- поддержка практически всех видов сайтов;
- большой выбор персонализации внешнего вида.
Инструкция по использованию
- Переходим на страницу создания виджета: elfsight.com/telegram-chat-widget/
- Настраиваем внешний вид виджета, иконку чата, приветственное сообщение, кнопку начала диалога.
- Нажимаем кнопку добавить на сайт, получаем уникальный код виджета. Остаётся скопировать его и вставить в схему сайта в нужное место.
- Если вам потребуется изменить стиль виджета, в личном кабинете можно зайти во вкладку виджета «Стиль» и внести нужные изменения.
Видео по виджету:
EnvyBox
Ссылка на официальный сайт: envybox.io
Функционал:
- интеграция Телеграм-виджета с сервисом «Обратный звонок»;
- уведомления при повторном посещении сайта для оперативной реакции.
ВАЖНО. По статистике продавца количество звонков увеличивается в 3,8 раз, сохраняются записи общения с клиентом;
Стоимость:
- Тестовая – 4 руб/мин. Можно подключить на 7 дней.
- Базовая – 740 руб/мес. (годовой план) или 621 руб/мес. (двухгодовой пакет), +4 рубля за минуту разговора.
- Все включено. Стоимость составит 20 руб/мин. Для IP телефонии – 10 руб/мин.
Отличительные особенности:
- Сервис отслеживает возвращение клиентов, которые уже обращались в сервис – функция «Удиви клиента». Если пользователь зашел на сайт и оставил заявку на звонок, при повторном входе система распознает пользователя и отправляет на почту сообщение с его именем, контактами и записью прошлого телефонного разговора. Можно совершить звонок, который станет неожиданно приятным для человека.
- Автоматическая озвучка данных клиента при звонке, таких как: имя, ключевой запрос, сайт, с которого поступил запрос.
- Настройка геолокации виджета.
- Простая интеграция с сервисами отслеживания эффективности рекламы.
- Запись звонков и сообщений.
- Интеграция с Телеграм: в личные сообщения или группу будут приходить уведомления о всех новых заказах, которые поступили в нерабочее время. В сообщении будет указана информация, которую клиент оставил в форме обращения.
Инструкция по использованию
- Для подключения Telegram-уведомлений: добавьте в свой контакт-лист Telegram учетную запись @WsAlert_bot и напишите в личные сообщения код, который можно взять на странице настройки виджета в личном кабинете на сайте.
- Для подключения Telegram-уведомлений для группы: добавьте учетную запись @WsAlert_bot в группу, куда необходимо отправлять уведомления.
Напишите сообщение @WsAlert_bot с тем же кодом и нажмите кнопку «Подключить уведомления». - После того как отправите код, нажмите кнопку «Обновить» и выберите из списка необходимые уведомления.
Плагины
Блогеры и предприниматели всегда стремятся находить новые каналы взаимодействия с потенциальной и целевой аудиторией, а также упростить ведение воронок продаж. Одним из лучших способов добиться этого является интеграция самой популярной платформой публикаций WordPress с системой обмена мгновенными сообщениями Телеграм.
Рассмотрим популярные плагины для WordPress.
Replain
Данный бесплатный плагин даёт нам возможность упростить взаимодействие со своими клиентами. Все, что напишет клиент, моментально перенаправляется в нужный Телеграм-аккаунт, за счет чего время ожидания сокращается.
Дополнительные удобства:
- Возможность расположить виджет рядом с определенной информацией, чтобы клиенты могли одним нажатием отправить нужный запрос.
- Внешний вид плагина можно изменять по желанию.
- Использование шаблонов ответов на запрос клиента.
- Подключение операторов к клиентам по Телеграм.
Telegram Notifications
Этот вариант отлично подходит, если планируется интеграция с интернет-магазином, поскольку инструмент относится к родительскому плагину WooCommerce.
Стоимость плагина составляет 18$. При единоразовой оплате покупатель получает:
- простую установку,
- несколько вариантов локализации,
- совместимость WooCommerce,
- неограниченное количество быстрых уведомлений,
- регулярные обновления.
Telegram Bot&Channel
Бесплатный плагин для управления Телеграм-ботами.
Функции плагина:
- Обмен сообщениями в группах и личных сообщениях в мессенджере.
- Планирование отправки сообщений.
- Отправка сообщений через бота.
WP Telegram
Признан самым удобным плагином для WordPress.
ВАЖНО. Софт имеет саппорт-канал на соответствующей площадке, интеграция плагина идет в обе стороны.
Функции плагина:
- Возможность монетизировать канал, так как плагин полностью совместим с WooCommerce.
- Получение уведомлений о новых товарах и продуктах.
- План публикаций в Телеграм.
- Сортировка обращений по определенным критериям.
Telegram Bot Plugin
Этот инструмент расширяет возможность переписки в Телеграм. Его главной опцией является отправка подготовленных текстов и СМС-оповещений. Помимо этого, плагин хранит все сообщения из групп в WordPress, предоставляя их в форме шорткода.
Функции плагина:
- Бэкап всех сообщений из группы Телеграм.
- Защита от спама.
- Отображения группой недавних обращений.
Стоимость для одного сайта составляет 59 $, для пяти – 199 $.
Telegram-боты для сайта. Порядок установки и функционал
В первую очередь создаём Телеграм-бот. Для этого:
- Заходим в поиск Телеграм, находим бота @BotFather.
ВАЖНО. У нужного бота будет стоят синяя отметка в виде галочки.
- Жмём на кнопку «Start».
- Из выданного списка команд выбираем /newbot.
- Вводим имя бота, то, которое будут видеть ваши клиенты. Никнейм должен быть уникальным и заканчиваться словом bot.
- Вам выдадут рекомендации по настройке, список команд и его API (токен бота).
- Отправляем на @BotFather команду /setdomain. Выбираем нужный бот, а затем вводим ссылку на сайт.
- На странице core.telegram.org ищем конфигурацию виджета.
- Вводим никнейм бота, который мы придумали, когда его создавали. Выбираем один из трёх размеров кнопки – демонстрация размера проходит внизу страницы.
- Затем нужно выбрать способ обработки данных, полученных из Телеграм. Существует два варианта:
- Создается отдельная страница, куда отправляется пользователь. После обработки данных он пересылается обратно или, к примеру, в закрытую часть сайта.
- Используется callback без перезагрузки страницы. Этот способ более современный и логичный, поэтому лучше выбрать его.
- Далее обращаем внимание на галочку, которая отвечает за отсылку сообщений от имени бота.
Затем мы видим поле с получившимся кодом (два тега скрипт). Код можно целиком вставить в то место в структуре электронной площадки компании, где вы хотите расположить telegram-виджет. Сайт и его элементы должны при этом выглядеть гармонично. Можно сделать иначе: взять только верхний скрипт, который рисует кнопку. Далее из нижнего выберем callback функцию, которую потом вставим в общий js-файл для сайта.
Сейчас благодаря этой функции в браузере появляется стандартный alert с сообщением о том, что пользователь зарегистрирован, и выдаются некоторые его данные. На одном из следующих этапов здесь будет прописан запрос к серверу.
Итак, мы вставили скрипт, который рисует кнопку входа в Телеграм, в нужное нам место на сайте. Добавили callback-функцию в файл, в котором прописаны основные js-функции. Если на сайте установлен jquery, можно отправить запрос через него.
function onTelegramAuth(user) {
$.ajax({
url: ‘/login’,
method: ‘post’,
data: user,
dataType:’json’,
success: function (data) {
location.reload()
},
error: function (error) {
alert(error)
}
})
}
Команды, которым рекомендуется «обучить» Телеграм-бота:
- Возможность ознакомить клиента с вашим прайс-листом по запросу. Бот может в ответ на запрос высылать либо файл (.pdf, .xls, .doc, и т.д.), либо ссылку на каталог онлайн-магазина, либо текст. Однако нужно понимать, что в зависимости от объема прайс-листа нужно выбирать определенный вариант. Если сообщение будет содержать объемный текст, клиент, вероятно, закроет диалог. По этой же причине для дополнительного удобства можно разбивать прайс на категории.
- Предоставление информации о товаре (характеристики, инструкцию) или отдельной категории (область применения, назначение, функционал).
- Оповещение клиентов об обновлении вашего ассортимента услуг или товаров. Это помогает не только привлекать новых покупателей, но и «подогреть» старую аудиторию.
- Возможность проверить баланс бонусных баллов, если они у вас подключены, а также историю их начисления.
- Принимать заявку на заказ (если клиент выбрал товар и готов совершить покупку). Таким образом, сделки можно проводить в нерабочее время, когда другие способы связи недоступны.
- Отвечать на распространенные вопросы. Список вопросов и ответов может быть произвольным — в зависимости от того, что чаще всего спрашивают у ваших сотрудников.
Видеообзоры сервисов
Teletype
Elfsight
EnvyBox
Быстрые ответы на вопросыВ чем преимущество использования плагинов для создания Телеграм-виджетов?Есть ли поддержка плагинов для создания Телеграм-виджетов на IOS?Не произойдет ли перегрузка сайта, если использовать конструкторы для создания виджетов?Можно ли редактировать Телеграм-виджет после создания с помощью плагина?Можно ли пользоваться несколькими плагинами для работы с виджетами?
Антон
18.06.2023 | 23:21