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

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

Арсений Груздев

Создатель и автор сайта mregs.ru. Практикующий маркетолог (PPC, SEO, SMM).

Кроме того, эта площадка предоставляет множество эффективных инструментов для ведения бизнеса. Полезным нововведением являются Телеграм-виджеты – многофункциональные дополнения к пабликам и сайтам, которые призваны автоматизировать процесс коммуникации между участниками.

Преимущества подключения Телеграм-виджета к сайту:

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

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

• Переход в чат или группу. Часто у потенциального клиента нет возможности позвонить, поэтому ему, вероятно, удобнее связаться текстовым способом, через личные сообщения или в чате для обсуждения вопросов с другими заказчиками.
• «Позвонить». Такой способ коммуникации повышает вероятность того, что клиент перейдет к вам, если его правильно ввести в разговор.
• Ссылка с переходом. Если вы работаете в сферах продаж и/или оказания услуг, этот вариант станет вашим незаменимым помощником. С помощью краткого «продающего» текста подогреваем интерес, а после него ставим соответствующую кнопку, по которой клиент может прочитать информацию о товаре более подробно.
• Всплывающее окно. Представляет собой окно, которое выводится поверх остального интерфейса и привлекает 100% внимания пользователя. Этот жест создает некую интерактивность. Существует три варианта использования: отдельная ссылка, скрытый текст (к примеру, доступ к полной информации откроется после подписки) и мини-игра, где пользователь угадывает правильный вариант из нескольких других кнопок и т.п.

Как добавить виджет Telegram на сайт вручную

HTML

Разберем HTML теги, которые используются для добавления виджета на сайт.

[wpremark preset_name=»default-info» icon_show=»1″ icon_image=»cloud-regular» icon_color=»#ec5765″ icon_width=»32″ icon_height=»32″ icon_indent=»16″ background_show=»0″ background_color=»#272125″ border_top=»1″ border_right=»1″ border_bottom=»1″ border_left=»1″ border_width=»2″ border_style=»dashed» border_color=»#ec5765″ shadow_show=»1″ shadow_x=»0″ shadow_y=»5″ shadow_blur=»10″ shadow_stretching=»-5″ shadow_opacity=»0.3″ title_show=»0″ title_bold=»0″ title_italic=»0″ title_underline=»0″ title_uppercase=»0″ title_font_size=»18″ title_line_height=»1.5″ text_bold=»0″ text_italic=»0″ text_underline=»0″ text_uppercase=»0″ padding_top=»20″ padding_right=»20″ padding_bottom=»20″ padding_left=»20″ margin_top=»20″ margin_right=»0″ margin_bottom=»20″ margin_left=»0″ border_radius=»5″ block_id=»uIzN»]Код писать не обязательно, есть возможность воспользоваться сервисами с готовыми решениями.[/wpremark]

В качестве примера ниже описана строчка кода полноценно работающего виджета.

<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 руб/мес.

[wpremark preset_name=»default-info» icon_show=»1″ icon_image=»info-circle-regular» icon_color=»#cd7039″ icon_width=»32″ icon_height=»32″ icon_indent=»16″ background_show=»1″ background_color=»#272125″ border_top=»0″ border_right=»0″ border_bottom=»0″ border_left=»0″ border_width=»2″ border_color=»#cd7039″ shadow_show=»0″ shadow_x=»0″ shadow_y=»5″ shadow_blur=»10″ shadow_stretching=»-5″ shadow_opacity=»0.3″ title_show=»0″ title_bold=»0″ title_italic=»0″ title_underline=»0″ title_uppercase=»0″ title_font_size=»18″ title_line_height=»1.5″ text_bold=»0″ text_italic=»0″ text_underline=»0″ text_uppercase=»0″ padding_top=»20″ padding_right=»20″ padding_bottom=»20″ padding_left=»20″ margin_top=»20″ margin_right=»0″ margin_bottom=»20″ margin_left=»0″ border_radius=»5″]ВАЖНО. При оплате сразу на 3, 6 или 12 месяцев присутствует скидка в размере 10%, 15% и 25% соответственно.[/wpremark]

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. На выбор есть целых четыре виджета, нам нужен второй. Если задача состоит в обычном перенаправлении трафика с сайта в Телеграм, рекомендую создать простой виджет с кнопкой подписки на ваш канал в цветовой гамме площадки.
   [wpremark preset_name=»default-info» icon_show=»1″ icon_image=»info-circle-regular» icon_color=»#cd7039″ icon_width=»32″ icon_height=»32″ icon_indent=»16″ background_show=»1″ background_color=»#272125″ border_top=»0″ border_right=»0″ border_bottom=»0″ border_left=»0″ border_width=»2″ border_color=»#cd7039″ shadow_show=»0″ shadow_x=»0″ shadow_y=»5″ shadow_blur=»10″ shadow_stretching=»-5″ shadow_opacity=»0.3″ title_show=»0″ title_bold=»0″ title_italic=»0″ title_underline=»0″ title_uppercase=»0″ title_font_size=»18″ title_line_height=»1.5″ text_bold=»0″ text_italic=»0″ text_underline=»0″ text_uppercase=»0″ padding_top=»20″ padding_right=»20″ padding_bottom=»20″ padding_left=»20″ margin_top=»20″ margin_right=»0″ margin_bottom=»20″ margin_left=»0″ border_radius=»5″]ВАЖНО. Пост должен быть в публичном доступе, т.е. опубликован в открытом канале.[/wpremark]
2. Вписываем ссылку на пост в поле. Можно настроить: прозрачность окна, отображение фото канала, основной цвет и включение/выключение тёмной темы.
3. В строке «Embed Code» забираем готовый код для вставки виджета.
4. С помощью сервиса Телеграм можно добавить кнопку «Поделиться», виджет «Логин» и «Комментарий» аналогичным способом.
5. Если страница сайта оформлена с помощью конструкторов, например, «Tilda», в них предусмотрена возможность добавления виджетов с названием «HTML-код».

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

Ссылка на официальный сайт

Функционал:

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

[wpremark preset_name=»default-info» icon_show=»1″ icon_image=»info-circle-regular» icon_color=»#cd7039″ icon_width=»32″ icon_height=»32″ icon_indent=»16″ background_show=»1″ background_color=»#272125″ border_top=»0″ border_right=»0″ border_bottom=»0″ border_left=»0″ border_width=»2″ border_color=»#cd7039″ shadow_show=»0″ shadow_x=»0″ shadow_y=»5″ shadow_blur=»10″ shadow_stretching=»-5″ shadow_opacity=»0.3″ title_show=»0″ title_bold=»0″ title_italic=»0″ title_underline=»0″ title_uppercase=»0″ title_font_size=»18″ title_line_height=»1.5″ text_bold=»0″ text_italic=»0″ text_underline=»0″ text_uppercase=»0″ padding_top=»20″ padding_right=»20″ padding_bottom=»20″ padding_left=»20″ margin_top=»20″ margin_right=»0″ margin_bottom=»20″ margin_left=»0″ border_radius=»5″ block_id=»niXj»]ВАЖНО. По статистике продавца количество звонков увеличивается в 3,8 раз, сохраняются записи общения с клиентом;[/wpremark]

Стоимость:

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

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

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

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

Ссылка на официальный сайт

Типичный виджет для подписки на канал через сервис T.website.

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

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

Плагины

Арсений Груздев

Создатель и автор сайта mregs.ru. Практикующий маркетолог (PPC, SEO, SMM).

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

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

Replain

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

Дополнительные удобства:

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

Telegram Notifications

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

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

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

Telegram Bot&Channel

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

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

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

WP Telegram

[wpremark preset_name=»default-info» icon_show=»1″ icon_image=»info-circle-regular» icon_color=»#cd7039″ icon_width=»32″ icon_height=»32″ icon_indent=»16″ background_show=»1″ background_color=»#272125″ border_top=»0″ border_right=»0″ border_bottom=»0″ border_left=»0″ border_width=»2″ border_color=»#cd7039″ shadow_show=»0″ shadow_x=»0″ shadow_y=»5″ shadow_blur=»10″ shadow_stretching=»-5″ shadow_opacity=»0.3″ title_show=»0″ title_bold=»0″ title_italic=»0″ title_underline=»0″ title_uppercase=»0″ title_font_size=»18″ title_line_height=»1.5″ text_bold=»0″ text_italic=»0″ text_underline=»0″ text_uppercase=»0″ padding_top=»20″ padding_right=»20″ padding_bottom=»20″ padding_left=»20″ margin_top=»20″ margin_right=»0″ margin_bottom=»20″ margin_left=»0″ border_radius=»5″]ВАЖНО. Софт имеет саппорт-канал на соответствующей площадке, интеграция плагина идет в обе стороны.[/wpremark]

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

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

Telegram Bot Plugin

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

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

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

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

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

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

База, как создать телеграм бота:

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

Затем мы видим поле с получившимся кодом (два тега скрипт). Код можно целиком вставить в то место в структуре электронной площадки компании, где вы хотите расположить telegram-виджет. Сайт и его элементы должны при этом выглядеть гармонично. Можно сделать иначе: взять только верхний скрипт, который рисует кнопку. Далее из нижнего выберем callback функцию, которую потом вставим в общий js-файл для сайта.

Сейчас благодаря этой функции в браузере появляется стандартный alert с сообщением о том, что пользователь зарегистрирован, и выдаются некоторые его данные. На одном из следующих этапов здесь будет прописан запрос к серверу.

Итак, мы вставили скрипт, который рисует кнопку входа в Телеграм, в нужное нам место на сайте. Добавили callback-функцию в файл, в котором прописаны основные js-функции. Если на сайте установлен jquery, можно отправить запрос через него.

[wpremark preset_name=»default-quote» icon_show=»0″ icon_image=»quote-right-regular» icon_color=»#6e6952″ icon_width=»32″ icon_height=»32″ icon_indent=»16″ background_show=»1″ background_color=»#ffffff″ border_top=»0″ border_right=»0″ border_bottom=»0″ border_left=»0″ border_width=»2″ border_color=»#6e6952″ shadow_show=»0″ shadow_x=»0″ shadow_y=»5″ shadow_blur=»10″ shadow_stretching=»-5″ shadow_opacity=»0.3″ title_show=»0″ title_bold=»0″ title_italic=»0″ title_underline=»0″ title_uppercase=»0″ title_font_size=»18″ title_line_height=»1.5″ text_color=»#0b131a» text_bold=»0″ text_italic=»0″ text_underline=»0″ text_uppercase=»0″ padding_top=»20″ padding_right=»20″ padding_bottom=»20″ padding_left=»20″ margin_top=»20″ margin_right=»0″ margin_bottom=»20″ margin_left=»0″ border_radius=»5″ block_id=»yY8q»]function onTelegramAuth(user) {
$.ajax({
url: ‘/login’,
method: ‘post’,
data: user,
dataType:’json’,
success: function (data) {
location.reload()
},
error: function (error) {
alert(error)
}
})
}[/wpremark]

Команды, которым рекомендуется «обучить» Телеграм-бота:

• Возможность ознакомить клиента с вашим прайс-листом по запросу. Бот может в ответ на запрос высылать либо файл (.pdf, .xls, .doc, и т.д.), либо ссылку на каталог онлайн-магазина, либо текст. Однако нужно понимать, что в зависимости от объема прайс-листа нужно выбирать определенный вариант. Если сообщение будет содержать объемный текст, клиент, вероятно, закроет диалог. По этой же причине для дополнительного удобства можно разбивать прайс на категории.
• Предоставление информации о товаре (характеристики, инструкцию) или отдельной категории (область применения, назначение, функционал).
• Оповещение клиентов об обновлении вашего ассортимента услуг или товаров. Это помогает не только привлекать новых покупателей, но и «подогреть» старую аудиторию.
• Возможность проверить баланс бонусных баллов, если они у вас подключены, а также историю их начисления.
• Принимать заявку на заказ (если клиент выбрал товар и готов совершить покупку). Таким образом, сделки можно проводить в нерабочее время, когда другие способы связи недоступны.
• Отвечать на распространенные вопросы. Список вопросов и ответов может быть произвольным — в зависимости от того, что чаще всего спрашивают у ваших сотрудников.

Видеообзор

[omnivideo youtube=»https://www.youtube.com/watch?v=ZBXmN63SiQs&t=1s» vk=»https://vkvideo.ru/video-99857239_456239047″ rutube=»https://rutube.ru/video/e82e86aec37b83b0c1b4632602c22fed/» ok=»https://ok.ru/video/9849465408142″/]

Ответы на популярные вопросы