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

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

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

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

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

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

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

Функции кнопки 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>

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 – включение или выключение темной темы.

ТОП сервисов для добавления виджетов и инструкции к ним

Ниже мы подробно расскажем про лучшие сервисы, с помощью которых можно создать Телеграм-виджет:

• TGWidget. Платный сервис, в ассортименте которого представлены следующие окна: два вида для подписки на канал, один – для просмотра контента на канале, а также дополнительный – для приглашения в чат.
• T.website. Бесплатный виджет для отображения кнопки с подпиской.
• Telegram.im. Бесплатная кнопка для перевода в личный чат с указанным пользователем.
• Elfsight. Платный сервис, который открывает окно для ведения диалога во время посещения сайта пользователем.
• Hoversignal. Платный сервис, аналогичный Elfsight.
• Teletype. Платный сервис, подобный Elfsight и Hoversignal.
• Widg.io. Схожий виджет чата, но совместимый с Wix и WordPress.
• SendPulse. Бесплатный виджет чат-бота Телеграм.
• DiscussBot. Бесплатный бот для размещения комментария на отдельной интернет-странице.
• Общедоступный конструктор виджетов от Телеграм.

Кратко разберём работу сервисов на примерах.

T.website

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

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

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

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

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

Ссылка на сайт: telegram.org/widgets

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

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

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

Teletype

Ссылка на официальный сайт: teletype.in

Функционал:

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

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

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

• скорость работы,
• обработка большого объема информации,
• подключение операторов,
• статистика.

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

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

Elfsight

Ссылка на официальный сайт: elfsight.com

Функционал:

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

Стоимость:

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

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

• быстрое подключение;
• поддержка практически всех видов сайтов;
• большой выбор персонализации внешнего вида.

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

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

Видео по виджету:

EnvyBox

Ссылка на официальный сайт: envybox.io

Функционал:

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

Стоимость:

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

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

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

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

1. Для подключения Telegram-уведомлений: добавьте в свой контакт-лист Telegram учетную запись @WsAlert_bot и напишите в личные сообщения код, который можно взять на странице настройки виджета в личном кабинете на сайте.
2. Для подключения Telegram-уведомлений для группы: добавьте учетную запись @WsAlert_bot в группу, куда необходимо отправлять уведомления.
   Напишите сообщение @WsAlert_bot с тем же кодом и нажмите кнопку «Подключить уведомления».
3. После того как отправите код, нажмите кнопку «Обновить» и выберите из списка необходимые уведомления.

Плагины

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

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

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

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

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

Replain

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

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

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

Telegram Notifications

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

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

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

Telegram Bot&Channel

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

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

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

WP Telegram

Признан самым удобным плагином для WordPress.

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

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

Telegram Bot Plugin

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

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

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

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

Telegram-боты для сайта. Порядок установки и функционал

В первую очередь создаём Телеграм-бот. Для этого:

1. Заходим в поиск Телеграм, находим бота @BotFather.

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

Затем мы видим поле с получившимся кодом (два тега скрипт). Код можно целиком вставить в то место в структуре электронной площадки компании, где вы хотите расположить 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?

На iOS поддержка плагинов для создания Телеграм-виджетов может быть ограниченной. Плагины обычно предназначены для использования на веб-сайтах. Однако на iOS есть другие способы создания Телеграм-виджетов, например, Telegram Bot API.

Не произойдет ли перегрузка сайта, если использовать конструкторы для создания виджетов?

Правильный выбор конструктора виджетов, оптимизация кода и производительности, а также использование кэширования и ограничение внешних запросов помогут избежать перегрузки сайта и обеспечат быструю загрузку страниц с виджетами. Но если есть возможность внедрить виджет через код — лучше воспользоваться таким способом.

Можно ли редактировать Телеграм-виджет после создания с помощью плагина?

Да, возможно редактировать Телеграм-виджет после его создания через плагин. В зависимости от плагина или инструментов, которые вы используете, детали того, как редактировать виджет, могут различаться, например, если вы создали Телеграм-виджет с помощью Telegram Bot API или других инструментов и самостоятельно добавили его на свой веб-сайт, вы будете нуждаться в редактировании кода, чтобы внести изменения.

Можно ли пользоваться несколькими плагинами для работы с виджетами?

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