Виджет Telegram для сайта: какой нужен и как поставить
Под «виджетом Telegram для сайта» имеют в виду разные вещи: кнопку «Написать в Telegram», кнопку «Поделиться», встроенный пост из канала, вход на сайт через Telegram или чат, в котором посетитель пишет на сайте, а вы отвечаете из удобного места. Официально Telegram даёт четыре виджета (core.telegram.org/widgets), но кнопки «написать нам» среди них нет — её делают обычной ссылкой. Ниже — что выбрать под вашу задачу и как настроить каждый вариант.
Какой виджет нужен под задачу
| Задача | Что ставить | Откуда код |
|---|---|---|
| Посетитель пишет вам в Telegram | Кнопка-ссылка на ваш аккаунт или бота | Ссылка t.me/имя или генератор кнопки |
| Посетитель делится страницей | Sharing Button | Конструктор на core.telegram.org/widgets/share или ссылка t.me/share/url |
| Показать пост канала на сайте | Post Widget | Открыть ссылку на пост t.me/канал/номер в браузере → «EMBED» |
| Регистрация и вход через Telegram | Login Widget | core.telegram.org/widgets/login, нужен бот и /setdomain |
| Комментарии к статьям | Discussion Widget | core.telegram.org/widgets/discussion, нужен публичный канал с обсуждениями |
| Отвечать посетителям сайта, не теряя переписку | Онлайн-чат на сайте + бот Telegram в одном окне | Чат-виджет сервиса поддержки |
Кнопка «Написать в Telegram»
Это просто ссылка, и она работает на любом сайте, в том числе на Tilda, WordPress и Битриксе. Варианты по документации Telegram о ссылках (core.telegram.org/api/links):
- t.me/имя — открывает чат с публичным аккаунтом, ботом или каналом по username.
- t.me/имя?text=… — то же, но с заранее вставленным текстом сообщения в поле ввода, например «Здравствуйте! Хочу узнать про доставку». Текст нужно закодировать для URL.
- t.me/+79991234567 — ссылка по номеру телефона; сработает, только если настройки приватности аккаунта позволяют найти его по номеру.
- t.me/имя_бота?start=site — открывает бота и передаёт ему метку (до 64 символов: латиница, цифры, _ и -), чтобы понять, что клиент пришёл с сайта.
Готовую плавающую кнопку с превью можно собрать в бесплатном генераторе /instrumenty/knopka-messendzherov: Telegram, MAX, ВКонтакте, телефон и email, позиция справа или слева, код без внешних библиотек — вставьте его перед </body> или в HTML-блок конструктора. Ссылку с меткой и QR-код для печати — в /instrumenty/ssylka-na-chat.
Попробуйте Моночат бесплатно
Сайт, Telegram, ВКонтакте, MAX, Авито (бета) и почта — в одном окне, ИИ-консультант по вашей базе знаний. Вход через Яндекс или Google, без карты. 14 дней тарифа «Про» в подарок.
Кнопка «Поделиться в Telegram»
Sharing Button позволяет посетителю отправить ссылку на страницу друзьям, в свой канал или в «Избранное». Код можно взять в конструкторе Telegram или сделать свою кнопку: достаточно ссылки https://t.me/share/url?url={адрес}&text={текст}, где оба значения закодированы для URL. Такая кнопка уместна в статьях, акциях и карточках товаров, но не заменяет связь с вами.
Пост из канала на сайте (Post Widget)
Встраивать можно сообщения из публичных каналов и групп. Откройте ссылку на пост вида t.me/канал/43 в браузере и нажмите «EMBED»: Telegram покажет код и настройки — ширина, фото автора, цвет акцента, тёмная тема. Так удобно показывать на сайте новости, анонсы и отзывы, опубликованные в канале.
Вход через Telegram (Login Widget)
- Создайте бота через @BotFather; лучше, если его имя и аватар совпадают с названием и логотипом сайта — так посетители охотнее подтверждают вход.
- Отправьте @BotFather команду /setdomain и привяжите домен сайта к боту.
- Соберите виджет в конструкторе на core.telegram.org/widgets/login и вставьте код на страницу входа.
- После входа сайт получает id, имя, username, фото, auth_date и hash — либо переходом на адрес из data-auth-url, либо в функцию data-onauth.
- Обязательно проверьте подпись на сервере: hash должен совпасть с HMAC-SHA-256 от строки данных, где ключ — SHA-256 от токена бота; по auth_date отсекайте устаревшие данные.
Комментарии из канала (Discussion Widget)
Если вы публикуете ссылки на статьи сайта в публичном канале с обсуждениями, виджет покажет эту дискуссию под статьёй. Для привязки по каналу на странице должен быть тег <link rel="canonical" href="адрес страницы">. Для простых комментариев без канала Telegram предлагает отдельное решение comments.app.
Если нужен чат на сайте с ответами в одном окне
Кнопка уводит посетителя в Telegram — у кого Telegram не установлен или кто не хочет давать свой аккаунт, просто уйдёт. Поэтому часто ставят и то и другое: онлайн-чат прямо на странице и кнопку Telegram рядом. В Моночате чат для сайта ставится одной строкой кода, а сообщения из него, из бота Telegram, ВКонтакте, MAX и почты приходят в одно окно для всей команды. Чтобы не сидеть во вкладке, включите уведомления в Telegram: о новом сообщении придёт короткое уведомление со ссылкой на диалог, а ответ вы пишете в Моночате. Отвечать из самого Telegram на сообщения с сайта нельзя, зато история переписки и ответственный за диалог остаются в одном месте.
Источники
По теме в Моночате
Попробуйте Моночат бесплатно
Сайт, Telegram, ВКонтакте, MAX, Авито (бета) и почта — в одном окне, ИИ-консультант по вашей базе знаний. Вход через Яндекс или Google, без карты. 14 дней тарифа «Про» в подарок.