Как сделать кнопку телеграмм на сайте
Перейти к содержимому

Как сделать кнопку телеграмм на сайте

  • автор:

Telegram кнопка для сайта с анимацией

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

Ссылка для перехода в Telegram

Так выглядит простая ссылка на чат в Telegram с сайта.

HTML код для вставки следующий:

Где вместо your_name нужно вставить имя вашей учётной записи. Посмотреть его можно зайдя в Настройки/Имя пользователя.

Данный код является обычной ссылкой, при клике на которую, в новом окне откроется чат. А если добавить к этому коду соответствующие стили, то можно сделать простую или фиксированную кнопку, например в нижнем углу экрана.

Кнопка Telegram в углу экрана с анимацией

кнопка telegram для сайта

Для создания нашей кнопки, нам потребуется иконка Font Awesome. Для этого ваш шаблон сайта должен быть подключен к библиотеке шрифтов Font Awesome. Если иконка отображаться не будет, то необходимо будет данную библиотеку подключить. Это можно сделать вручную, либо воспользоваться плагином Font Awesome из репозитория WordPress.

HTML код:

CSS код:

CSS для мобильной версии сайта:

Если вам необходимо поменять местоположение кнопки на мобильных устройствах, то добавьте к стилям CSS следующий код.

Установка кнопки на WordPress

В административной панели WordPress заходим в раздел «внешний вид/редактор тем». Затем, в зависимости от структуры вашей темы, заходим в нужные файлы и добавляем код. Код HTML обычно вставляется в файл footer.php (перед закрывающим тегом </body>), а код CSS в конец файла style.css.

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

установка кнопки Telegram на wordpress

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

Например, для вставки HTML подойдут такие плагины, как «Woody snippets», «Header & Footer Code», «DCO Insert Analytics Code» и им подобные. А для добавления CSS подойдen плагинs «Custom CSS» или «SiteOrigin CSS».

Создание telegram web apps и взаимодействие с ними в телеграм ботах

В обновлении Bot API 6.0 телеграм-боты получили много новых функций. Из них для разработчиков самая примечательная — Telegram Web Apps (Веб-приложения внутри телеграм). С этим нововведением разработчики могут подключать к своим ботам web-приложения, которые открываются в дополнительном окне, что сильно расширяет инструментарий, а, следовательно и функционал ботов в телеграм.

Приложения Telegram известны своей скоростью, плавностью и кросс-платформенным дизайном. Ваше веб-приложение в идеале должно соответствовать этим принципам.

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

Давайте же опробуем это на практике!

Создание кнопки

Первое, что нам нужно сделать — создать кнопку запуска веб-приложения. Это можно сделать двумя способами:

1. При помощи @botfather — кнопка слева снизу

1.1. Идем в @botfather и пишем команду: /setmenubutton

1.2. Далее выбираем бота, которому нужна кнопка веб приложения

1.3. Отправляем ссылку по которой доступно наше веб-приложение

1.4. Пишем имя кнопки — будет отображаться внизу слева

создание кнопки через @botfatherсоздание кнопки через @botfather как выглядит main buttonкак выглядит main button

Вот и все. В целом, если у вас есть адаптивный сайт и вы хотели просто добавить его в бота, тут можете остановиться.

Только при добавлении кнопки этим способом мы можем получить информацию о пользователе.

2. В коде бота — клавиатурные кнопки.

Запуск бота с inline-кнопки даёт суть тоже самое, что и предидущий вариант. Однако, запуск с keyboard button дает возможность отправлять данные из веб-приложения в бота.

Покажу на примере pytelegrambotapi — я понимаю, что это не самая популярная библиотека для написания телеграмм-ботов, но так получилось, что я пишу именно на ней. Если вы пользуетесь другой библиотекой/языком, думаю, вам не составит труда действовать по аналогии. Вы можете сразу посмотреть пример или перейти в репозиторий и посмотреть код с комментариями:

2.1. Делаем все стандартные штуки для запуска бота — импорт библиотеки, ввод токена, infinity_polling, обработчик команды start. Если вы не понимаете о чем я, вам сюда.

2.2. Создаем функцию, которая вернет нам клавиатуру с нужной кнопкой.

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

2.3. Отправляем сообщение с нашей клавиатурой при отправке команды или любом другом действии:

Готово. Кнопки у нас есть.

Тут можно вообще закончить, если вы просто хотели, чтобы пользователь мог открыть ваш сайт из бота (зачем-то). Работать это будет вот так:

как работают web apps

как работают web apps

Работа с веб-приложением

Теперь идем в наше веб-приложение. На момент написания статьи открывается любая ссылка, даже на codepen.

Инициализация

Чтобы взаимодействовать с телеграм подключаем скрипт:

После этого нам будет доступен объект: window.Telegram.WebApp

Записываем его в переменную и начинаем нашу работу.

let tg = window.Telegram.WebApp;

Что же мы теперь можем? Не так много, как хотелось бы, но и не мало. Приложение состоит из: основной кнопки (telegram-объект) и самой страницы, которая загрузилась по ссылке. Остальные элементы telegram-интерфейса нам не доступны. Однако, доступны цвета темы пользователя:

навигатор цветов

навигатор цветов

Цвета

Они доступны в формате hex как css-переменные:

var(—tg-theme-bg-color)
var(—tg-theme-text-color)
var(—tg-theme-hint-color)
var(—tg-theme-link-color)
var(—tg-theme-button-color)
var(—tg-theme-button-text-color)

Или как объект ThemeParams в js (вместо window.Telegram.WebApp я использую переменную tg):

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

Также имеется обработчик события изменения цветовой схемы:

При изменении цветовой схемы или размеров окна можно поменять что-то и в нашем веб-приложении.

Основные возможности

С цветами разобрались — теперь к другим основным параметрам:

Main button

Мы можем взаимодействовать с кнопкой внизу приложения. Изменять ее текст, цвет фона и текста, показывать/скрывать, делать активной и деактивировать:

Основная кнопка в тестовом @DurgerKingBot

Основная кнопка в тестовом @DurgerKingBot

Web App User

И еще информация о пользователе, мы можем разобрать строку tg.initData или использовать tg.initDataUnsafe объект:

Пишем веб-приложение

С этой информацией мы можем написать небольшое приложение, которое наглядно отобразит основные возможности.

Не забудьте подключить скрипт:

<script src=»https://telegram.org/js/telegram-web-app.js»></script>

1. Создадим небольшую html-основу:

2. Пропишем изменения текста основной кнопки и изменение цвета:

3. Далее повесим обработчик события на первую html-кнопку и при нажатии будем показывать/скрывать основную telegram-кнопку:

4. Еще один обработчик события на вторую html-кнопку, при нажатии которой будем активировать/деактивировать основную telegram-кнопку:

5. В итоге отправляем данные при нажатии на основную telegram-кнопку:

Благодаря этому методу мы можем получить данные из веб-приложения в боте.

6. Также выведем всю информацию о пользователе (будет доступна только при запуске с кнопки, добавленной с помощью @botfather).
Нам доступно: id / isBot / first_name / last_name / username / language_code

7. И добавляем стили, используя telegram-css переменные:

В итоге получаем такое веб-приложение:

Оно отображает основные возможности — получение информации о пользователе, задействование цветов его темы и управление главной кнопкой приложения.

Получаем данные от веб-приложения в боте

Теперь вешаем обработчик событий на сообщение, которое посылает веб-приложение в методе send (работать будет только с keyboard button):

И все — теперь мы можем получать информацию с сайта и отвечать на нее.
Есть и другие способы — но это уже немного другая история.

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

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

В самом Telegram я таких возможностей не нашёл, так что пришлось обратиться к стороннему сервису Telegram Widget. Это виджет для сайта, который может показывать ссылку на канал или чат и ленту последних сообщений. Новые сообщения подгружаются в режиме реального времени. Виджет имеет некоторые настройки: показ сообщений по одному или нескольким тегам, показ сообщений от одного или более авторов.

Как установить себе на сайт:

1. Настроить канал или чат. Для канала в Telegram необходимо задать название, которое будет повторять ссылку на него. То есть, если ссылка на мой канал: https://t.me/proitru, то название канала должно быть «proitru». После подключения виджета канал можно переименовать. Чат необходимо сделать супергруппой (supergroup), затем пригласить в него бота @tgwidget_bot.

2. Зарегистрироваться на сайте и добавить свой канал или чат.

Виджет Телеграм-канала: как сделать и поставить на сайт

News image

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

В статье расскажем, как создать виджет для Телеграм и добавить его на сайт.

Какие бывают виджеты для Телеграм

Виджеты для Телеграм делятся на 3 группы:

  1. виджет для приглашения в группу или на канал;
  2. виджет для диалога через Телеграм (аналог онлайн-консультантов и чат-ботов);
  3. виджет в виде кнопки для перепоста материала или страницы в Телеграм.
Как создать Телеграм виджет и добавить на сайт

Есть 2 основных способа создать и добавить виджет на сайт:

  1. через HTML-код;
  2. с помощью плагинов;

Через HTML-код

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

Сервисы, в которых можно создать Телеграм виджет:

  1. TGWidget (виджет для привлечения на канал);
  2. T.website (виджет канала с кнопкой подписки);
  3. Telegram.im (кнопка для начала диалога через ТГ);
  4. Elfsight (виджет Телеграм диалога);
  5. Hoversignal (виджет Телеграм диалога);
  6. Teletype (виджет Телеграм диалога);
  7. Widg.io (виджет чата, есть интеграция с Wix и WordPress);
  8. myWidget (чат-бот);
  9. SendPulse (виджет подписки на бота Telegram);
  10. DiscussBot (comments.app — виджет комментариев на сайте через Телеграм);

Также есть конструктор виджетов от самого Телеграма. В нем доступно 4 типа виджетов: кнопка «Поделиться в Телеграм», виджет поста (с возможностью перейти на канал), виджет, позволяющий авторизоваться через Телеграм и виджет для комментариев.

Создаем виджет подписки на канал на примере сервиса T.website:

Понадобится всего пара действий. Заходим на сайт T.website и вставляем в поле ссылку на канал либо его логин @channelname. Сервис выдаст код на виджет канала с линейкой постов и кнопкой подписки. Через изменения в коде можно изменить внешний вид виджета под фирменный стиль, но для этого нужно разбираться в HTML и CSS.

Создаем виджет поста (с кнопкой подписки) через конструктор Телеграма:

Заходим на страницу core.telegram.org/widgets. Выбираем тип виджета (один из четырех). В нашем случае это виджет поста, второй по счету. Кликаем на него.

Здесь есть инструкции, как получить код.

Важно: пост должен быть в публичном канале или группе.

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

Полученную ссылку открываем в браузере и нажимаем на кнопку < > EMBED.

Получаем код виджета. Копируем и вставляем на страницу сайта.

Если хотим кастомизировать виджет, например, изменить его размер и цвет, то нужно вставить ссылку на сообщение на сайте core.telegram.org/widgets (там, где выбирали тип виджета). Вносим изменения и получаем обновленный код.

Как вставить готовый HTML-код на сайт

Зависит от того, на чем сделан сайт. Если на чистом HTML, то в коде страницы нужно найти место, где будет размещен виджет и вставить туда код виджета. Если сайт на движке или на конструкторе, то обычно там предусмотрены виджеты, которые называются HTML-код. Нужно добавить виджет на страницу и в его настройках уже прописать полученный код.

Вот, например, как это выглядит на конструкторе Тильда — нужно добавить новый блок на страницу. Категория «Другое» — блок «HTML-код». В него вставляем код виджета. Блок доступен только на платных тарифах. У Wix есть аналогичный инструмент.

С помощью плагинов

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

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

Плагины с виджетом Телеграм для Вордпресса:

  1. Channel Widget for telegram (показывает пост из Телеграм, можно перейти через него на канал);
  2. Replain (плагин для общения с посетителями сайта через Телеграм);
  3. QuadLayers Telegram Button (кнопка для начала диалога через ТГ)
  4. Telegram Chat (еще один виджет чата);
  5. WP Telegram Comments (виджет комментариев для сайта, чтобы оставлять комментарии посетители должны авторизоваться через ТГ);

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

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

Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован.