Telegram widgets что это
Посетителей сайта нужно удерживать и возвращать на сайт снова и снова. Также их можно дополнительно монетизировать. Раньше для этой задачи использовали емейл-рассылки, но есть не менее эффективный инструмент — Телеграм-канал. Привлечь посетителей сайта в Телеграм канал можно через виджет.
В статье расскажем, как создать виджет для Телеграм и добавить его на сайт.
Получайте до 18% от расходов на контекстную и таргетированную рекламу!- Более 2000 рекламных агентств и фрилансеров уже работают с сервисом.
- Подключиться можно самому за 1 день.
- Зарабатывайте с первого потраченного рубля, без начальных ограничений, без входного барьера.
- Выплаты на WebMoney, на карту физическому лицу, реинвестирование в рекламу.
- У вас остаются прямые доступы в рекламные кабинеты, рай для бухгалтерии по документообороту и оплатам.
Какие бывают виджеты для Телеграм
Виджеты для Телеграм делятся на 3 группы:
- виджет для приглашения в группу или на канал;
- виджет для диалога через Телеграм (аналог онлайн-консультантов и чат-ботов);
- виджет в виде кнопки для перепоста материала или страницы в Телеграм.
Как создать Телеграм виджет и добавить на сайт
Есть 2 основных способа создать и добавить виджет на сайт:
Через HTML-код
Писать код с нуля нет необходимости — можно воспользоваться готовыми сервисами. Они позволяют настроить внешний вид виджета и дают готовый код, который нужно вставить на страницу сайта.
Сервисы, в которых можно создать Телеграм виджет:
- TGWidget (виджет для привлечения на канал);
- T.website (виджет канала с кнопкой подписки);
- Telegram.im (кнопка для начала диалога через ТГ);
- Elfsight (виджет Телеграм диалога);
- Hoversignal (виджет Телеграм диалога);
- Teletype (виджет Телеграм диалога);
- Widg.io (виджет чата, есть интеграция с Wix и WordPress);
- myWidget (чат-бот);
- SendPulse (виджет подписки на бота Telegram);
- DiscussBot (comments.app — виджет комментариев на сайте через Телеграм);
Создаем виджет подписки на канал на примере сервиса T.website:
Понадобится всего пара действий. Заходим на сайт T.website и вставляем в поле ссылку на канал либо его логин @channelname. Сервис выдаст код на виджет канала с линейкой постов и кнопкой подписки. Через изменения в коде можно изменить внешний вид виджета под фирменный стиль, но для этого нужно разбираться в HTML и CSS.
Создаем виджет поста (с кнопкой подписки) через конструктор Телеграма:
Здесь есть инструкции, как получить код.
Важно: пост должен быть в публичном канале или группе.
Полученную ссылку открываем в браузере и нажимаем на кнопку < > EMBED.
Получаем код виджета. Копируем и вставляем на страницу сайта.
Как вставить готовый HTML-код на сайт
Зависит от того, на чем сделан сайт. Если на чистом HTML, то в коде страницы нужно найти место, где будет размещен виджет и вставить туда код виджета. Если сайт на движке или на конструкторе, то обычно там предусмотрены виджеты, которые называются HTML-код. Нужно добавить виджет на страницу и в его настройках уже прописать полученный код.
Вот, например, как это выглядит на конструкторе Тильда — нужно добавить новый блок на страницу. Категория «Другое» — блок «HTML-код». В него вставляем код виджета. Блок доступен только на платных тарифах. У Wix есть аналогичный инструмент.
С помощью плагинов
Если сайт на движке, например, на Вордпрессе — можно подключить и настроить плагин. Хотя и на движок можно добавить виджет через код. Но так как плагины существуют, опишем и этот способ.
*В большинство тем для Вордпресс уже встроены виджеты с кнопками соцсетей и мессенджеров. Они выглядят, как иконки с ссылками на соцсети, мессенджеры, YouTube-канал. Но если стоит задача визуально выделить именно Телеграм канал, то нужен отдельный виджет.
Плагины с виджетом Телеграм для Вордпресса:
- Channel Widget for telegram (показывает пост из Телеграм, можно перейти через него на канал);
- Replain (плагин для общения с посетителями сайта через Телеграм);
- QuadLayers Telegram Button (кнопка для начала диалога через ТГ)
- Telegram Chat (еще один виджет чата);
- WP Telegram Comments (виджет комментариев для сайта, чтобы оставлять комментарии посетители должны авторизоваться через ТГ);
*Кстати, для Вордпресса также созданы плагины автопостинга с сайта в Телеграм канал: WP Telegram, Telegram Bot & Channel и другие. Хотя для автопостинга можно использовать онлайн сервисы — список найдете на нашем сайте.
Виджеты работают по аналогии — сначала нужно скачать и активировать плагин, затем в настройках указать ссылку на канал и кастомизировать его внешний вид.
Лайфхак: если стоит задача просто перенаправлять трафик с сайта в Телеграм канал, можно создать на странице сайта кнопку в цветах Телеграм с надписью-приглашением подписаться на канал, чтобы получать рассылки с новым материалом. Кнопку желательно сделать с иконкой Телеграма. Дальше просто привязываем к этой кнопке ссылку на Телеграм канал и получаем новых подписчиков.
Заключение
В зависимости от типа виджета выбирайте удобный для себя способ его создания и добавления на сайт. Если есть возможность добавить виджет через код — лучше выбрать этот вариант вместо тех же плагинов. Большое количество плагинов могут перегружать сайт. Тем более, получить код для Телеграм виджета и поставить его на сайт проще простого.
Здравствуйте. Меня зовут Андрей.
Летом прошлого года я опубликовал проект и статью "Чат-помощник на сайт с помощью Telegram за 15 минут". Идея проекта заключалась в том, чтобы реализовать на сайте всплывающий Чат-помощник, бэкэндом для которого (для чата) был бы набирающий популярность мессенджер Telegram.
На удивление проект довольно быстро стал набирать звезды на GitHub, а я — получать письма благодарности и просьбы о помощи в настройке от людей со всего света. Люди не могли запустить скрипт на своих хостингах: то set_time_limit(0) не поддерживается, то 503 ошибка, то пути не правильно указаны.
Вторая версия скрипта устанавливается намного проще и работает на основе WebHooks.
>>>> Ссылка на репозиторий GitHub.
В двух словах, что это такое
Что нового
Теперь чат работает на основе WebHooks
Для тех, кто не хочет искать, команды для терминала:
sudo openssl req -x509 -nodes -days 3650 -newkey rsa:2048 -keyout apache.key -out apache.crt
Для установки используется всего один файл.
В репозитории лежит всего один файл: telegram-site-helper-install.php — это инсталлятор. Он создаст нужные директории, распакует JS, CSS и два PHP файла.
Здесь же вы сможете сгенерировать JS код чата, который нужно будет вставить на странцу сайта.
Внимание: cкрипты в инсталляторе закодированны в base64 Поскольку для многих владельцев сайтов на Wordpress/Joomla, base64 ассоциируется с вирусными инъекциям — заранее приглашаю всех
Всплывающий и встроенный чаты, стилизация
Чат можно стилизовать не залезая в CSS. Цвет рамки, фона, шрифт можно настроить прямо из инсталлятора.
Еще чат поддерживает два режима отображения. Его можно встроить в любой другой HTML элемент или "приклеить" к одному из углов экрана. Чат может открывать при нажатии на стандартный лейбл, а может при нажатии на произвольный HTML элемент
Вы также можете изменить все надписи («Начать чат», «Введите ваше имя», «Прикрепить файл» и другие).
Передача файлов
Теперь клиент и менеджер могут обмениваться файлами (фото и документами). Файлы хранятся на сервере Telegram и не занимают место на Вашем хостинге.
JQuery больше не обязательна
В прошлый раз меня ругали, мол надо тянуть JQuery для работы небольшого скрипта. Я все осознал и в этот раз написал все на чистом JavaScript.
Работает через Server Side Events либо LongPoll
Чат на сайте теперь может получать обновления от вашего сервера не только с помощью Long Poll запросов, но и с помощью Server Side Event трансляции (она будет работать только на хостингах, где поддерживается set_time_limit(0) и нет проблем с функцией flush())
Как установить
Планы на будущее
В конце статьи выражаю благодарность команде Telegram за платформу для Ботов. Крайне полезная вещь.
Спасибо.
UPD! Забыл добавить, что после установки, стоит удалить инсталлятор с сервера и настроить права доступа к папке.
Большое спасибо за оперативные Pull Request`ы и критику кода. Ищу силы и время на доработки.
Популярность мессенджеров растет с каждым годом. Наверняка вы сами не так часто открываете электронную почту, чем читаете какую-нибудь интересную информацию в Телеграме или общаетесь с друзьями. Поэтому маркетологи рекомендуют обязательно устанавливать виджет Telegram на сайт, чтобы увеличить конверсию. Сегодня вы узнаете, как бесплатно и без помощи программиста создавать и настраивать вот такие виджеты.
Как это сделать за 5-10 минут
После регистрации открывается админка, в которой нужно выбрать виджеты «Телеграм чата».
Выбираем подходящий шаблон (его очень просто изменить).
И меняем его дизайн, прописываем данные вашего аккаунта Telegram.
Во вкладке «Содержимое» настраиваем «консультанта» псевдо-чата или же полностью выключаем этот чат. Тогда на странице будет только кнопка, при нажатии по которой будет открываться Telegram чат с консультантом вашего сайта.
Чтобы настроить страницы показа, откройте вкладку «Где показывать». Мы советуем ничего не менять и показывать кнопку на всех страницах и устройствах, но при необходимости вы можете выполнить более тонкую настройку.
Теперь, после того как вы создали и настроили кнопку телеграм чата, нужно установить её на ваш сайт. Для этого скопируйте код из админки.
В инструкциях на этой странице детально рассмотрено, как установить виджет Telegram на сайт под управлением CMS Wordpress или же на статическую html-страницу.
Это точно бесплатно?
Да, в пределах тарифа «Старт» (3000 показов и открытий Телеграм чата) вы можете бесплатно использовать этот виджет каждый месяц. Попробуйте прямо сейчас – это действительно быстро, просто и можно сделать в течение каких-то 5-10 минут.
Здравствуйте. Меня зовут Андрей.
Летом прошлого года я опубликовал проект и статью "Чат-помощник на сайт с помощью Telegram за 15 минут". Идея проекта заключалась в том, чтобы реализовать на сайте всплывающий Чат-помощник, бэкэндом для которого (для чата) был бы набирающий популярность мессенджер Telegram.
На удивление проект довольно быстро стал набирать звезды на GitHub, а я — получать письма благодарности и просьбы о помощи в настройке от людей со всего света. Люди не могли запустить скрипт на своих хостингах: то set_time_limit(0) не поддерживается, то 503 ошибка, то пути не правильно указаны.
Вторая версия скрипта устанавливается намного проще и работает на основе WebHooks.
>>>> Ссылка на репозиторий GitHub.
В двух словах, что это такое
Что нового
Теперь чат работает на основе WebHooks
Для тех, кто не хочет искать, команды для терминала:
sudo openssl req -x509 -nodes -days 3650 -newkey rsa:2048 -keyout apache.key -out apache.crt
Для установки используется всего один файл.
В репозитории лежит всего один файл: telegram-site-helper-install.php — это инсталлятор. Он создаст нужные директории, распакует JS, CSS и два PHP файла.
Здесь же вы сможете сгенерировать JS код чата, который нужно будет вставить на странцу сайта.
Внимание: cкрипты в инсталляторе закодированны в base64 Поскольку для многих владельцев сайтов на Wordpress/Joomla, base64 ассоциируется с вирусными инъекциям — заранее приглашаю всех
Всплывающий и встроенный чаты, стилизация
Чат можно стилизовать не залезая в CSS. Цвет рамки, фона, шрифт можно настроить прямо из инсталлятора.
Еще чат поддерживает два режима отображения. Его можно встроить в любой другой HTML элемент или "приклеить" к одному из углов экрана. Чат может открывать при нажатии на стандартный лейбл, а может при нажатии на произвольный HTML элемент
Вы также можете изменить все надписи («Начать чат», «Введите ваше имя», «Прикрепить файл» и другие).
Передача файлов
Теперь клиент и менеджер могут обмениваться файлами (фото и документами). Файлы хранятся на сервере Telegram и не занимают место на Вашем хостинге.
JQuery больше не обязательна
В прошлый раз меня ругали, мол надо тянуть JQuery для работы небольшого скрипта. Я все осознал и в этот раз написал все на чистом JavaScript.
Работает через Server Side Events либо LongPoll
Чат на сайте теперь может получать обновления от вашего сервера не только с помощью Long Poll запросов, но и с помощью Server Side Event трансляции (она будет работать только на хостингах, где поддерживается set_time_limit(0) и нет проблем с функцией flush())
Как установить
Планы на будущее
В конце статьи выражаю благодарность команде Telegram за платформу для Ботов. Крайне полезная вещь.
Спасибо.
UPD! Забыл добавить, что после установки, стоит удалить инсталлятор с сервера и настроить права доступа к папке.
Большое спасибо за оперативные Pull Request`ы и критику кода. Ищу силы и время на доработки.
Читайте также: