Кнопка Telegram для сайта: как добавить + лучшие сервисы

Телеграм – это лучший мессенеджер, высокая скорость работы, удобный интерфейс, безопасность данных. На момент написания статьи, согласно изданию «Ведомости», аудитория Телеграм составляет свыше 500 млн пользователей. Преимущества подключения Телеграм-виджета к сайту:

• Удобный способ коммуникации — у клиента есть мессенджер в телефоне, на ПК.
• У клиента сохраняется история переписки в его профиле, он может вернуться к диалогу в любой момент.
• Вы можете отвечать на запросы заказчиков в нерабочее время.
• К виджету можно подключить робота, который сэкономит вам время при обработке заявок. Бот «умеет» отвечать на популярные запросы заранее подготовленным сообщением. Например, при комбинации в тексте слов «адрес» и «склад» робот автоматически передает список с адресами складов.

Функции кнопки Telegram на сайте

• Переход в чат или группу. Часто у потенциального клиента нет возможности позвонить, поэтому ему, вероятно, удобнее связаться текстовым способом, через личные сообщения или в чате для обсуждения вопросов с другими заказчиками.
• «Позвонить». Такой способ коммуникации повышает вероятность того, что клиент перейдет к вам, если его правильно ввести в разговор.
• Ссылка с переходом. Если вы работаете в сферах продаж и/или оказания услуг, этот вариант станет вашим незаменимым помощником. С помощью краткого «продающего» текста подогреваем интерес, а после него ставим соответствующую кнопку, по которой клиент может прочитать информацию о товаре более подробно.
• Всплывающее окно. Представляет собой окно, которое выводится поверх остального интерфейса и привлекает 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>

1. Тег script описывает скрипты.
2. Скрипты уже написаны загружаются из открытого хранилища Телеграм, видим по значению атрибута src.
3. Атрибут async даёт команду скрипту к загрузке отдельно от остальных элементов страницы.
4. Значение data-telegram-post означает взятую в кавычки ссылку на пост в формате t.me/GroupName/PostNumber
5. width определяет ширину виджета.
6. Последние три атрибута отвечают за настройку цветового отображения.

JS

Скрипты JavaScript для виджетов прописаны компанией Телеграм, работа с JavaScript не потребуется.

CSS

При использовании виджетов можно изменять графические элементы с помощью следующих тегов:

• Ширина и высота виджета – height и width.
• Цветовая настройка отдельных элементов – data-color-etc, где etc – обозначения блоков для изменения цвета.
• data-dark – включение или выключение темной темы.

ТОП сервисов для создания Телеграм-кнопки

Teletype — кнопка-агрегатор чатов, интеграции

Открыть сервис в новой вкладке Функционал:

• Агрегатор каналов коммуникации для бизнеса, в единую панель подключаются WhatsApp, Telegram, ВК и другие мессенджеры, клиент может выбрать через какой мессенджер ему написать.
• Для оператора чата — единое место ответов на сообщения, для владельца бизнеса — статистика, подключение к CRM.
• Можно подключить несколько операторов, настраивать доступы, часы смены.
• Много интеграций со всеми CMS / CRM для сбора лидов, фильтрации, статистики.

Стоимость: подключение по номеру телефона – 2250 руб/мес, через бот – 450 руб/мес.

ВАЖНО. При оплате сразу на 3, 6 или 12 месяцев присутствует скидка в размере 10%, 15% и 25% соответственно.

Umnico App — омниканальный виджет для мессенджеров

Umnico — сервис, который собирает все мессенджеры и соцсети (WhatsApp, Telegram, VK, Instagram, Facebook и др.) в едином окне. Поддерживает виджет на сайт, работу из браузера и интеграции с CRM — заявки не теряются, менеджеры отвечают из одного интерфейса.

Плюсы:

• Настоящий омниканал: один личный кабинет для всех диалогов.

• Есть виджет «кнопки мессенджеров» для сайта.

• Интеграции с популярными CRM и телефонией.

• Подойдёт как для небольшого бизнеса, так и для кол-центров.

Минусы:

• Интерфейс и настройки могут быть тяжеловаты для совсем новичков.

• Тарифы завязаны на количестве каналов и операторов — нужно считать экономику.

Цены:

Есть бесплатный пробный период. Далее — помесячная подписка; актуальные тарифы лучше смотреть на странице «Тарифы» Umnico, так как условия регулярно обновляются.

Chat2Desk — чат-платформа для поддержки и продаж

Chat2Desk делает из мессенджеров и чата на сайте единый канал поддержки и продаж. Поддерживаются WhatsApp, Telegram, VK, Viber, Instagram, web-чат, есть боты, автоответы и распределение обращений между операторами.

Плюсы:

• Глубокие сценарии автоматизации (боты, триггеры, шаблоны ответов).

• Готовые интеграции с CRM и телефонией.

• Удобен для отделов продаж и поддержки с очередями и SLA.

Минусы:

• Функционал избыточен для маленьких проектов «на одного человека».

• Освоение требует времени: много настроек и ролей.

Цены:

Тарифы помесячные, завязаны на количестве операторов и каналов. Есть тестовый период; конкретные суммы и ограничения нужно уточнять на сайте Chat2Desk в разделе тарифов.

---

ChatApp.Online — мессенджер-агрегатор с упором на CRM

ChatApp — платформа, которая подключает WhatsApp (включая официальную Business API), Telegram и другие каналы прямо к CRM: Bitrix24, amoCRM, Yclients и др. Основной сценарий — работа через CRM-карточку, чтобы менеджер не выходил из привычной системы.

Плюсы:

• Глубокая интеграция именно с CRM, а не отдельный чат-интерфейс.

• Поддержка официальной WhatsApp Business API.

• Есть конструктор ботов и дополнительные сервисы (диалоги без CRM, интеграции, партнёрка).

Минусы:

• Сервис ориентирован прежде всего на компании, которые уже работают в CRM.

• Настройка может потребовать помощи интегратора.

Цены:

Оплата по линиям/каналам и количеству подключений; есть пробный период. Конкретные цены меняются, поэтому клиенту лучше сразу переходить на страницу Pricing/«Тарифы» ChatApp и смотреть актуальные условия.

---

Wazzup — интеграция мессенджеров в CRM

Wazzup — сервис, который «вкручивает» мессенджеры (WhatsApp, Telegram, VK и др.) прямо в CRM: Bitrix24, amoCRM, RetailCRM и другие. Фокус — на том, чтобы менеджер полностью работал из CRM, а все диалоги привязывались к сделкам и контактам.

Плюсы:

• Заточен под продажи и сопровождение из CRM.

• Есть официальный WhatsApp Business API.

• Гибкая логика распределения диалогов и отчётность.

Минусы:

• Не самый простой сервис для «самостоятельной» настройки без опыта в CRM.

• Часть функций и каналов доступна только на старших тарифах.

Цены:

Базовые тарифы завязаны на количестве линий и мессенджеров; есть пробный период и скидки при оплате на год. Точные цифры быстро меняются, поэтому в статье лучше указать, что актуальные цены смотрим на сайте Wazzup в разделе «Тарифы».

---

Chaty — «плавающая» кнопка мессенджеров и соцсетей

Chaty — легковесный виджет-кнопка, который показывает на сайте иконки нужных мессенджеров и соцсетей: Telegram, WhatsApp, Viber, Facebook Messenger, email, телефон и т.д. Можно настроить внешний вид, расписание работы и разные наборы каналов для десктопа/мобилки.

Плюсы:

• Очень простой запуск: подключается за пару минут через скрипт или плагин.

• Большой выбор каналов и иконок.

• Есть интеграции с популярными CMS (в том числе WordPress).

Минусы:

• Это именно виджет-кнопка, без единого окна обработки диалогов.

• Для аналитики и полноценного отдела продаж всё равно понадобится CRM/чат-платформа.

Цены:

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

Elfsight — каталог виджетов

Открыть сервис в новой вкладке Функционал:

• Быстрая передача сообщений от клиента в ваш Телеграм.
• Большой набор настройки параметров чата: триггеры появления виджета, в какие дни недели работает чат и остальные.

Стоимость:

• Lite. Бесплатная версия. Работает на одном сайте, ограничен на 200 просмотров в месяц, поддержка работает только на устранение ошибок, дизайн предоставляется самим сервисом, присутствует реклама. Можно использовать для проверки работы виджета на стадии разработки сайта, либо для первого тестового использования.
• Basic. Стоимость составляет 5$ в месяц. Этот тариф работает на неограниченном количестве сайтов, позволяет осуществить 5 000 просмотров в месяц, поддерживает 1 виджет. Полноценная поддержка, бесплатная установка, настройка дизайна и отсутствие рекламы. Используется для сайтов с низким трафиком.
• Pro. Стоимость составляет 10$ в месяц. Тариф поддерживает неограниченное количество сайтов, работает на 50 000 просмотров в месяц, поддерживает 3 виджета. Бесперебойная поддержка, бесплатная установка, настройка дизайна и отсутствие рекламы. Используется для быстрорастущего бизнеса.
• Premium. Стоимость составляет 20$ в месяц. Количество просмотров неограниченно, как и количество сайтов. Поддерживает 8 виджетов, поддержка улучшенного качества, бесплатная установка, настройка дизайна и отсутствие рекламы. Подходит для агентств и больших компаний с высоким трафиком.

Инструкция по использованию

1. Переходим на страницу создания виджета
2. Настраиваем внешний вид виджета, иконку чата, приветственное сообщение, кнопку начала диалога.
3. Нажимаем кнопку добавить на сайт, получаем уникальный код виджета. Остаётся скопировать его и вставить в схему сайта в нужное место.
4. Если вам потребуется изменить стиль виджета, в личном кабинете можно зайти во вкладку виджета «Стиль» и внести нужные изменения.

Официальный сервис от Telegram

Ссылка на сервис: telegram.org/widgets Инструкция по использованию:

1. На выбор есть целых четыре виджета, нам нужен второй. Если задача состоит в обычном перенаправлении трафика с сайта в Телеграм, рекомендую создать простой виджет с кнопкой подписки на ваш канал в цветовой гамме площадки.

   ВАЖНО. Пост должен быть в публичном доступе, т.е. опубликован в открытом канале.

2. Вписываем ссылку на пост в поле. Можно настроить: прозрачность окна, отображение фото канала, основной цвет и включение/выключение тёмной темы.
3. В строке «Embed Code» забираем готовый код для вставки виджета.
4. С помощью сервиса Телеграм можно добавить кнопку «Поделиться», виджет «Логин» и «Комментарий» аналогичным способом.
5. Если страница сайта оформлена с помощью конструкторов, например, «Tilda», в них предусмотрена возможность добавления виджетов с названием «HTML-код».

EnvyBox — онлайн-чат + Телеграм-кнопка

Открыть сервис в новой вкладке Функционал:

• интеграция Телеграм-виджета с сервисом «Обратный звонок»;
• уведомления при повторном посещении сайта для оперативной реакции.

ВАЖНО. По статистике продавца количество звонков увеличивается в 3,8 раз, сохраняются записи общения с клиентом;

Стоимость:

• Тестовая – 4 руб/мин. Можно подключить на 7 дней.
• Базовая – 740 руб/мес. (годовой план) или 621 руб/мес. (двухгодовой пакет), +4 рубля за минуту разговора.
• Все включено. Стоимость составит 20 руб/мин. Для IP телефонии – 10 руб/мин.

Отличительные особенности:

• Сервис отслеживает возвращение клиентов, которые уже обращались в сервис – функция «Удиви клиента». Если пользователь зашел на сайт и оставил заявку на звонок, при повторном входе система распознает пользователя и отправляет на почту сообщение с его именем, контактами и записью прошлого телефонного разговора. Можно совершить звонок, который станет неожиданно приятным для человека.
• Автоматическая озвучка данных клиента при звонке, таких как: имя, ключевой запрос, сайт, с которого поступил запрос.
• Настройка геолокации виджета.
• Простая интеграция с сервисами отслеживания эффективности рекламы.
• Запись звонков и сообщений.
• Интеграция с Телеграм: в личные сообщения или группу будут приходить уведомления о всех новых заказах, которые поступили в нерабочее время. В сообщении будет указана информация, которую клиент оставил в форме обращения.

T.website — генератор html-кода

Открыть сервис в новой вкладке Типичный виджет для подписки на канал через сервис T.website. Инструкция по использованию:

1. Переходим по ссылке, вставляем название канала со знаком "@".
2. Получаем готовый код для внесения в файл вашего сайта.
3. Можно изменить дизайн, если вы разбираетесь в CSS.

Плагины

Рассмотрим популярные плагины для WordPress.

Replain

Данный бесплатный плагин даёт нам возможность упростить взаимодействие со своими клиентами. Все, что напишет клиент, моментально перенаправляется в нужный Телеграм-аккаунт. Дополнительные удобства:

• Возможность расположить виджет рядом с определенной информацией, чтобы клиенты могли одним нажатием отправить нужный запрос.
• Внешний вид плагина можно изменять по желанию.
• Использование шаблонов ответов на запрос клиента.
• Подключение операторов к клиентам по Телеграм.

Telegram Notifications

Этот вариант отлично подходит, если планируется интеграция с интернет-магазином, поскольку инструмент относится к родительскому плагину WooCommerce. Стоимость плагина составляет 18$. При единоразовой оплате покупатель получает:

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

Telegram Bot&Channel

Бесплатный плагин для управления Телеграм-ботами. Функции плагина:

• Обмен сообщениями в группах и личных сообщениях в мессенджере.
• Планирование отправки сообщений.
• Отправка сообщений через бота.

WP Telegram

ВАЖНО. Софт имеет саппорт-канал на соответствующей площадке, интеграция плагина идет в обе стороны.

Функции плагина:

• Возможность монетизировать канал, так как плагин полностью совместим с WooCommerce.
• Получение уведомлений о новых товарах и продуктах.
• План публикаций в Телеграм.
• Сортировка обращений по определенным критериям.

Telegram Bot Plugin

Этот инструмент расширяет возможность переписки в Телеграм. Его главной опцией является отправка подготовленных текстов и СМС-оповещений. Помимо этого, плагин хранит все сообщения из групп в WordPress, предоставляя их в форме шорткода. Функции плагина:

• Бэкап всех сообщений из группы Телеграм.
• Защита от спама.
• Отображения группой недавних обращений.

Стоимость для одного сайта составляет 59 $, для пяти – 199 $.

Бонусная часть — как создать своего бота

Предположим, вы хотите не только чатиться с клиентами через ТГ, но и сделать какую-то автоматизацию (выдавать прайс-лист, организовывать запись и т.д.). База, как создать телеграм бота:

1. Заходим в поиск Телеграм, находим бота @BotFather.
2. Жмём на кнопку «Start».
3. Из выданного списка команд выбираем /newbot.
4. Вводим имя бота, то, которое будут видеть ваши клиенты. Никнейм должен быть уникальным и заканчиваться словом bot.
5. Вам выдадут рекомендации по настройке, список команд и его API (токен бота).
6. Отправляем на @BotFather команду /setdomain. Выбираем нужный бот, а затем вводим ссылку на сайт.
7. На странице Открыть сервис в новой вкладке ищем конфигурацию виджета.
8. Вводим никнейм бота, который мы придумали, когда его создавали. Выбираем один из трёх размеров кнопки – демонстрация размера проходит внизу страницы.
9. Затем нужно выбрать способ обработки данных, полученных из Телеграм. Существует два варианта:
   1. Создается отдельная страница, куда отправляется пользователь. После обработки данных он пересылается обратно или, к примеру, в закрытую часть сайта.
   2. Используется callback без перезагрузки страницы. Этот способ более современный и логичный, поэтому лучше выбрать его.
10. Далее обращаем внимание на галочку, которая отвечает за отсылку сообщений от имени бота.

Затем мы видим поле с получившимся кодом (два тега скрипт). Код можно целиком вставить в то место в структуре электронной площадки компании, где вы хотите расположить 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, и т.д.), либо ссылку на каталог онлайн-магазина, либо текст. Однако нужно понимать, что в зависимости от объема прайс-листа нужно выбирать определенный вариант. Если сообщение будет содержать объемный текст, клиент, вероятно, закроет диалог. По этой же причине для дополнительного удобства можно разбивать прайс на категории.
• Предоставление информации о товаре (характеристики, инструкцию) или отдельной категории (область применения, назначение, функционал).
• Оповещение клиентов об обновлении вашего ассортимента услуг или товаров. Это помогает не только привлекать новых покупателей, но и «подогреть» старую аудиторию.
• Возможность проверить баланс бонусных баллов, если они у вас подключены, а также историю их начисления.
• Принимать заявку на заказ (если клиент выбрал товар и готов совершить покупку). Таким образом, сделки можно проводить в нерабочее время, когда другие способы связи недоступны.
• Отвечать на распространенные вопросы. Список вопросов и ответов может быть произвольным — в зависимости от того, что чаще всего спрашивают у ваших сотрудников.

Видеообзор

https://www.youtube.com/watch?v=ZBXmN63SiQs