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

Телеграм – это мессенджер современности. Быстрый, надежный, а главное безопасный, чем вызывает доверие у пользователей.

На момент написания статьи, согласно изданию «Ведомости», аудитория Телеграм составляет свыше 500 млн пользователей.

Чем полезен для сайта виджет Телеграм:

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

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

Кнопка умеет выполнять 4 функции:

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

Как добавить виджет 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. последние 3 атрибута отвечают за настройку цветового отображению.

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

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

Teletype

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

Функционал:

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

Стоимость: 2250 рублей в месяц для тарифа подключения по номеру телефона и 450 рублей в месяц для тарифа подключения бота. При оплате сразу на 3, 6 или 12 месяцев присутствует скидка в размере соответственно 10%, 15% и 25%.

 

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

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

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

Elfsight

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

Функционал:

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

Стоимость:

• Lite. Бесплатная версия. Работает на 1 сайте, ограничен на 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

Функционал: EnvyBox предлагает интеграцию виджета телеграм с сервисом «Обратный звонок». По заверениям продавца, количество звонков увеличивается в 3,8 раз, сохраняются записи общения с клиентом. При повторном посещении сайта клиентом вам приходит уведомление для оперативной реакции на пользователя.

Стоимость.

Есть 3 тарифа предложения:

• Тестовая. 4р за минуту разговора. Можно подключить на 7 дней.
• При оплате на 1 год. 740 рублей в месяц или 621 рублей при оплате на 2 года, +4 рубля за минуту разговора.
• Все включено. Стоимость составит 20 рублей в минуту, либо 10 рублей в минуту, но для IP телефонии.

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

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

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

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

Плагины

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

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

Replain

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

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

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

Telegram Notifications

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

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

Telegram Bot&Channel

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

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

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

WP Telegram

Признан самым удобным плагином для WordPress. Имеет саппорт-канал на Телеграм, интеграция плагина идет в обе стороны.

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

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

Telegram Bot Plugin

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

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

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

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

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

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

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, можно отправить запрос через него.

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, и т.д.), или в виде ссылки на каталог онлайн-магазина, даже текстом прямо в диалог с клиентом. Но нужно понимать, что в зависимости от объема прайс-листа нужно выбирать определнный вариант. Если в сообщении будет раcписан слишком большой прайс-лист, клиент устанет это читать и закроет его. По этой же причине для дополнительного удобства можно разбивать прайс на категории, чтобы ваш клиент не копался в большом объеме информации.

• Предоставлять информацию о товаре (характеристики, инструкцию) или о категории товаров (область применения, назначение, функционал).

• Оповещение клиентов об обновлении вашего ассортимента услуг, товаров или продуктов. Это помогает не только привлекать новых покупателей, но и «оживить» старую аудиторию на новые покупки.

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

• Принимать заявку на заказ (если клиент уже полностью определился с товаром, и готов совершить покупку). После этого останется только оформить покупку через магазин, и отправить товар. Актуально, если клиент хочет сделать заказ в нерабочее время, когда другие способы связи недоступны.

• Отвечать на распространенные вопросы. Список вопросов и ответов может быть произвольным — в зависимости от того, что чаще всего спрашивают именно у ваших сотрудников.

Видеообзоры сервисов

Teletype

Elfsight

EnvyBox