В Telegram появились виджеты, автоудаление сообщений и временные ссылки для приглашений

• Tutorial

Забьем еще один гвоздь в крышку гроба Роскомнадзора. Напрямую получить доступ сообщениям своего канала для вывода их в веб страницу нельзя. Но можно написать bot, который будет поступающие к нему сообщения отправлять куда нужно, чтобы их обработать и вывести на сайт. А можно воспользоваться готовым. Странно, что на Хабре еще не упоминался этот замечательный бот — Journalist (@JournalistBot). На сайте указано, что beta, но работает более чем стабильно. После несложной установки бота и настройки в нем своего нового journalist канала, получаете от него код виджета, который нужно поместить на свой сайт в какой-нибудь div или что-то типа этого, который выведет адаптивную вертикальную ленту ваших сообщений:

Подписаться

</pre> Где 353945930 — id вашего канала в JournalistBot-е. Число 10 в «widget-10» — количество последних отображаемых сообщений. Его можно менять. Новые сообщения для вашего канала добавляются в JournalistBot или напрямую, или переадресацией в него из других каналов. Иногда (единственный замеченный баг) сообщение, в котором присутствует и картинка и текст, доходит не полностью — или картинка, или текст. В остальном всё вполне на уровне. Каналов можно сделать несколько. Основные прелести виджета:

• код разворачивается напрямую, без iframe-ов.
• внешний вид (сам по себе приятный и стильный) легко перенастраивается своим css
• оперативная автоматическая подгрузка новых сообщений из канала по мере их поступления (появляются сверху)

Можно сделать небольшой хак — проксировать данные канала (https://journali.st/broadcasts/353945930-widget-10.js) через свой сайт. Тогда будет возможность немножко их редактировать. Например, у меня реализован вот такой кэширующий на 5 минут данные прокси, который отдельным скриптом /misc/image.php уменьшает размеры всех картинок. Код journalist прокси

  $file = "journalist.cache.js";  $LastModified_unix = filemtime($file); $LastModified = gmdate("D, d M Y H:i:s GMT", $LastModified_unix); $IfModifiedSince = false; if (isset($_ENV['HTTP_IF_MODIFIED_SINCE']))     $IfModifiedSince = strtotime(substr($_ENV['HTTP_IF_MODIFIED_SINCE'], 5));   if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']))     $IfModifiedSince = strtotime(substr($_SERVER['HTTP_IF_MODIFIED_SINCE'], 5)); if ($IfModifiedSince && $IfModifiedSince >= $LastModified_unix) {     header($_SERVER['SERVER_PROTOCOL'] . ' 304 Not Modified');     exit; } header('Last-Modified: '. $LastModified);    if (!file_exists($file) || (time() - filemtime($file)) > 1200) { $data = file_get_contents("https://journali.st/broadcasts/353945930-widget-10.js"); $data = str_replace("https://images-onepick-opensocial.googleusercontent.com/gadgets/proxy?container=onepick&url=", "/misc/image.php?size=310&url=", $data); file_put_contents($file, $data); }  readfile($file);  

В вышеуказанном script src необходимо поменять ссылку на наш прокси. Новые сообщения приходят клиенту, естественно, напрямую, минуя прокси. Еще из рекомендуемой доводки напильником: скроллбар (стандартный или JQuery плагином) для блоков с ограниченной высотой, подцепка к картинкам lightbox-а (или на стороне сервера добавлением class-a, или на стороне клиента javascript-ом), свертывание блока с сообщениями по клику (чтобы не мешал). Для lightbox-a следует учесть динамическое поступление новых картинок (сообщений). Для этого случая можно запускать обработку картинок в блоке канала каждые 10 секунд, например, или повесить обработчик событий на код journalist-а. В целом Journalist — очень приятное и стабильное приложение, позволяющее оперативно и удобно добавлять на свой сайт информацию с компьютера или телефона — вести трансляции, например. Как отдельный telegram-канал канал в journalist не работает, поэтому при такой необходимости приходится дублировать сообщения. Бесплатен, рекламы нет.

Мобильный Telegram обновился до версии 7.5, получив немало полезных улучшений. Одним из главных стала функция автоматического удаления сообщений для всех участников в любом чате. Она применяется только для тех сообщений, которые были отправлены после установки таймера. И обратный отсчёт начнётся сразу после отправки послания, а не в момент прочтения получателем.

Как настроить автоудаление сообщений в Telegram:

• чтобы включить автоматическое удаление на Android, в нужном чате нажмите «⋮», выберите «Очистить историю» и выберите нужный временной интервал;
• на iOS зажмите палец на любом сообщении, нажмите «Выбрать», затем «Удалить чат» в верхнем левом углу экрана и «Настроить автоудаление».

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

Также в новой версии Telegram появились удобные виджеты на домашний экран телефона. Их два: «Чаты» покажет последние сообщения в выбранных переписках, а виджет «Ярлыки» — фотографии и имена пользователей. Добавляются они стандартным способом с рабочего стола.

 

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

В числе прочих улучшений:

• увеличенный максимальный размер групповых чатов Telegram — до 200 000 участников;
• улучшенный импорт чатов из других приложений — теперь с объединением и сортировкой в соответствии с датой изначальной отправки (в чаты, где не более 1000 сообщений);
• возможность отметить конкретные сообщения для отправки жалобы модераторам Telegram;
• новые анимированные эмодзи.

Telegram Разработчик: Telegram FZ-LLC Цена: Бесплатно Telegram Разработчик: Telegram FZ-LLC Цена: Бесплатно

Для добавления кнопок в каналах используются два бота. @ControllerBot – для создания постов через браузер или приложение, добавление канала и мониторинга статистики. Второй бот – @BotFather – специальный бот для постинга. Кнопки-реакции также делаются с помощью ботов и весь процесс займет не больше 5 минут.

Читайте также: Как добавить лайки и дизлайки в Telegram-канале с помощью ботов

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

1. В поисковой строке пишем название бота «@ControllerBot»

2. Открываем чат с ботом и пишем команду /start

3. В ответ бот отправляет сообщения с возможными командами, в нашем случае – /addchanel для добавления нового канала (команды можно писать вручную либо нажать на нее в сообщении бота)

4. Далее нажимаем кнопку «Подключить новый бот»

5. Вы получите инструкцию с дальнейшими действиями: переходим в @BotFather (просто нажмите на него).

6. В новом чате со вторым ботом пишем команду /start

7. Пишем команду /newbot либо выбираем из списка.

8. Придумываем имя новому боту и отправляем его сообщением в @BotFather (*название*_bot – нижнее подчеркивание обязательно)

9. Последнее завершающее сообщение нужно переслать @ControllerBot. Для мобильных телефонов: нажимаем на сообщение, удерживаем несколько секунд и в появившемся меню выбираем кнопку «Переслать» и отправляем в чат с @ControllerBot. Для ПК: правой кнопкой мыши нажимаем на сообщение и в контекстном меню выбираем «Переслать сообщение» и отправляем @ContollerBot. Сообщение выглядит вот так:

На данном этапе вы успешно создадите нового бота для канала. Теперь перейдем к его настройкам.

1. Скопируйте название бота

2. Откройте свой канал. Нажав на три точки в правом верхнем углу выберите пункт «Управление каналом»

3. В появившемся окне нажимаем на кнопку «Администраторы»

4. Теперь вам нужно вставить имя вашего бота в строку поиска и выбрать его из списка результатов. Подтверждаем добавление бота в список администраторов канала, жмем «ОК».

5. Настраиваем права нашего нового администратора

6. После нужно переслать любое сообщение с вашего канала в @ControllerBot.

7. Далее в чате с @ControllerBot нужно написать название города, по которому будет определяться часовой пояс. Выбрав время нажимаем кнопку «Верно».

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

1. Переходим в чат с нашим созданным ботом, нажимаем «Запустить», в дальнейшем /start для активации

2. Нажимаем кнопку «Создать пост» и выбираем нужный канал, для которого и делается этот пост

3. Теперь отправляем составляющие поста по порядку: текст, изображение, реакции, URL-кнопки

4. Для загрузки изображения нужно прикрепить медиафайл соответствующей кнопкой и выбираем нужное фото из галереи на телефоне или на ПК.

5. Для добавления реакций на пост выбираем кнопку «Добавить реакции» и отправляем эмодзи согласно рекомендациям. Знак «/» разделяет их между собой. Рядом со смайлом можно написать нужный текст.

6. «Добавить URL-кнопки» – по рекомендациям бота можно задать до трех кнопок в ряд. Разделяются они с помощью знака «|» и выглядят следующим образом: «Кнопка – https://site.com/». Отправляем это боту.

7. По необходимости можно настроить следующие функции: «Таймер удаления» – сообщение будет автоматически удалено согласно установленному времени, «Опубликовать» – в тот же момент пост будет выложен на канале, «Отложить» – можете настроить дату и время публикации.

Как только вы настроите все, что вам нужно, нажимаем на «Опубликовать» и подтверждаем действие. Все процедуры по созданию ботов через смартфон и ПК одинаковы.

Теперь, самое главное остается за вами – придумать контент!

Про чаты-помощники

Многие люди продают через интернет товары и услуги. Еще больше людей — покупает что-то через интернет. Во время выбора покупок, часто возникают вопросы, которые можно решить позвонив и пообщавшись с менеджером. Скорее всего я — не единственный человек на хабре, который общению с менеджерами по телефону предпочитает переписку. И тут на помощь приходят всплывающие чаты-помощники, которые вроде-как повышают конверсию, но многих нервируют. (Для тех, кто не в курсе: в углу сайта всплывает окошко, в котором можно он-лайн переписываться с консультантом). Есть с десяток подобных сервисов и все они работают по принципу “пробная версия бесплатно, а дальше за деньги“. На хабре есть несколько статей, вот одна из них (http://habrahabr.ru/company/tuthost/blog/165365/), но, я уверен, аудитория Хабрахабра знает о чем речь. Большинству людей подойдет бесплатный вариант любого такого сервиса: нужно всего-навсего зарегистрироваться и вставить на сайт кусок JS кода. Для тех у кого много менеджеров — придется платить: например Редхелпер на 10 операторов обойдется Вам:115200 руб. за 1 год Скорее всего — цена адекватная для тех, кто платит зарплату десяти менеджерам. Но я решил изобрести бесплатный «велосипед» из подручных материалов. Запуск у себя на сервере займет 15 минут. Всем, кому идея интересна — прошу под кат.

Telegram BOT

Набирающий популярность за границей мессенджер Telegram недавно представил новое API для разработки ботов. Штука — интересная, ей можно найти множество применений. Теперь можно создать бота (написать программу), который будет отвечать на Ваши вопросы, выполнять определнные команды и все это в окне переписки мессенджера Telegram. Именно на основе мессенджера Telegram и его API для ботов будет работать наш бесплатный, безлимитный чат-помощник-на-сайт.Общая схема идеи — на картинке:Вот так это происходит:

1. Пользователи на сайте пишут в чат
2. Сообщение это улетает на Ваш сервер
3. Оттуда Telegram-бот пересылает его нужному менеджеру
4. Менеджер отвечает через Telegram
5. Бот отправляет сообщение обратно в чат_на_сайте

Реализация

Итак, для запуска «у себя» Вам понадобится:

1. Сервер, VPS или хостинг, на котором есть актуальный PHP, поддержка SQLite и возможность сделать set_time_limit(0) (т.е. сделать работу php скрипта не ограниченной по времени)
2. Приложение Telegram (на смартфоне или компьютере)
3. Базовые знания PHP

Внимание! Вы запускаете этот код на свой страх и риск! Я потратил на него несколько часов и возможно там полно ошибок!

План действий такой: 0) Скачиваем с ГитХаба исходники:https://github.com/Surzhikov/TelegramSiteHelper 1) Регистрируем нового бота в Telegram. Для этого нужен только смартфон и 2 минуты. Заходим в Telegram, добавляем пользователя @BotFather и шлем ему команду “/newbot” Далее по инструкции: придумываем имя, юзернейм, пишем about и загружаем фотку. Результатом всего должен получиться API Key с помощью которого мы будем работать с BotAPI. У меня получилось вот так:(Сообщение в котором фигурирует мой API Key я удалил) 2) Полученный ключ вставляем в TelegramBotConfig.php. Там же указываем любой придуманный Вами пароль для регистрации новых менеджеров. 3) Заливаем все на свой сервер 4) Запускаем нашего бота — фоновый процесс getUpdates.php Он должен работать бесконечно, поэтому рекомендую поставить его в автозагрузку сервера. Для надежности можно поставить запуск скрипта в crontab каждую минуту. Скрипт будет запускаться в единичном экземпляре, все повторные запуски сразу же завершатся. 5) Регистрируем нового менеджера Со смартфона менеджера заходим в телеграм и добавляем нашего нового бота (того, которого Вы только что создали) Пишем ему команду: «/newmanager пароль_для_менеджеров». В ответ получаем приветствие. Операцию повторяем нужное количество раз, для каждого менеджера. Если на данном этапе Вы не получили ответ от Бота — значит что-то не работает! 6) Проверяем Переходим на страницу index.html (то есть заходим на адрес mysite.ru/index.php, а не открываем локально). Там находится небольшой, на скорую руку сверстанный чат. Если отправить сообщение в этот чат, бот выберет случайного менеджера и перешлет ему это сообщение.Вот здесь интересный момент: Клиентов (покупателей) может быть много, а менеджер — один. Менеджер общается с клиентами посредством Telegram-бота. Если одновременно два (или больше) клиентов написали сообщение, а менеджер отвечает им по очереди, Telegram-боту нужно как-то указать, какому из клиентов отправить ответ. Для этого я сделал команду «/answer_№ЧАТА». После отправки этой команды все письма менеджера уходят в нужный веб-чат.

Минусы, плюсы, что можно доделать

Минусы

1. Сейчас чат сделан «на скорую руку», чтобы скорее запустить в своем проекте. Есть много лазеек, с помощью которых например можно писать в чужой чат и подглядеть чужую переписку.
2. Сейчас эти проблемы меня не тревожат, потому как в чате-помощнике на сайте у нас не принято передавать важную и секретную информацию.
3. Когда менеджер один а клиентов много — можно запутаться, кому отвечаешь.
4. … Буду дополнять из комментариев

Плюсы:

1. Это работает!
2. Бесплатно навсегда и на любое количество менеджеров
3. Не нужно лишних приложений, только телеграм, который есть для всех популярных платформ
4. Можно переписать и стилизовать чат так, как Вам хочется.
5. Telegram работает очень быстро
6. … Буду дополнять из комментариев

Что можно сделать:

1. Защита от дурака и работа над безопасностью
2. Умную систему распределения сообщений между менеджерами (сейчас бот направляет сообщение случайному менеджеру)
3. Автоматические ответы от бота, когда менеджер долго молчит
4. Добавить имя и фото менеджера, который отвечает в чате
5. … Буду дополнять из комментариев

Спасибо за внимание.UPDATE 23.08.2015 —Полностью переписал бота, теперь работает более стабильнее, теперь можно выбирать между sqlite и mysql В планах: — админ-панель со статистикой — работа через webhook https://github.com/Surzhikov/TelegramSiteHelper

Оставайтесь на связи с посетителями сайта через

• 
• 
• 
• 
• 
• 
• 
• 
• 

• 
• 
• 
• 
• 
• 
• 
• 
• 

• 
• 
• 
• 
• 
• 
• 
• 
• 

• 
• 
• 
• 
• 
• 
• 
• 
• 

Почему мне стоит выбрать Telegram чат для сайта?

Оставайтесь всегда на связи без лишних усилий

Предоставьте пользователям возможность быстро связаться с вами прямо на странице вашего сайта

Повысьте качество клиентского сервиса

Добавив онлайн-чат на сайт, вы сможете мгновенно отвечать на вопросы клиентов и помогать им в решении проблем

Увеличьте количество продаж с помощью персональных консультаций

Общаясь с пользователями лично, вы сможете найти индивидуальных подход к каждому клиенту и подтолкнуть его к совершению покупки%вебсайтов поддерживается+часов вложено в разработку1 минутачтобы начать использование%счастливых клиентов

Станьте одним из 305,165 клиентов Elfsight Apps

Создайте свой первый виджет Telegram чат для сайта бесплатно.

В чем уникальность Telegram чата для сайта?

СООБЩЕНИЯПростой и удобный способ связаться с вами прямо на сайте Станьте ближе к своим клиентам с помощью Telegram-чата. Добавьте возможность связаться с вами с помощью одного из самых популярных мессенджеров в мире и общайтесь с пользователями в непрерывном режиме. Получайте сообщения любым удобным способом – на смартфон, десктоп-приложение или в веб-версии Телеграм. Будьте на связи всегда, где бы вы ни находились.   ОТОБРАЖЕНИЕОбщайтесь и увеличивайте продажи Онлайн-консультант на сайте – это отличный инструмент для привлечения и удержания клиентов. Вам потребуется только сделать первый шаг и пригласить пользователя начать беседу. В настройках чата можно указать условия его появления: он откроется после того, как пользователь проведет определенное количество времени на странице или в случае, если захочет покинуть сайт. Кроме того, можно выбрать один из трех вариантов расположения чата на странице и аудиторию, которая сможет им воспользоваться.   

ИНТЕРФЕЙССоздайте виджет, который подойдет именно вам Какую бы цель вы ни ставили: общение с клиентами, консультирование, помощь в оформлении заказа – все это можно с легкостью осуществить при помощи кнопки онлайн-чата на сайте. Настройте интерфейс под себя, выбрав иконку, текст приветственного сообщения и указав время ответа, и виджет готов к работе.   

Многие мои клиенты выбирают Telegram из-за его безопасности, поэтому я своей работе также отдаю предпочтение этому мессенджеру.

Примеры использованияПосмотрите реальные примеры использования Telegram чата, чтобы раскрыть его потенциал для вашего сайта. Активное демоОткройте для себя все функции Telegram Чат в интерактивном демо. Бесплатно, без регистрации, без программирования.

Чем виджеты Elfsight отличаются от других?

С сегодняшнего дня вам не нужно больше переживать о работе вашего сайта. Наши инструменты могут похвастаться большим количеством опций, которые вы свободны использовать любым доступным способом. И если вы повстречаетесь с какими-либо затруднениями, наша служба поддержки всегда придет на помощь!Интуитивно понятный онлайн-редакторВам больше не понадобится искать компетентного разработчика. Просто откройте наш понятный онлайн-редактор, который гарантирует легкую интеграцию виджетов.Высококвалифицированная командаВаш беспроблемный опыт обеспечен нашими опытными сотрудниками. Мы будем поддерживать постоянный контакт, чтобы помочь вам интегрировать плагины на ваш сайт.Впечатляющий сервис ElfsightОблачные решения обеспечивают высокую скорость загрузки и моментальное исправление ошибок. Вы получите самую свежую версию независимо от оборудования, которое вы используете.

Что говорят наши клиенты ❤️

Плагин Elfsight потрясающий, а их команда поддержки реагирует быстро и общается очень вежливо. Виджет надежный, я рекомендую Elfsight. Приложения Elfsight: надежные, понятные, и простые в настройке. Мне очень нравится их чат и поддержка. Впечатляющий виджет Telegram, его легко персонализировать, а в случае каких-либо проблем вы быстро получите квалифицированную помощь. Я серьезно подумываю попробовать все их приложения. Эффективный виджет по очень доступной цене. Гибкий, простой в использовании, а команда поддержки супердружелюбная и профессиональная. Отличный опыт!Ребята из Elfsight быстро помогли мне разобраться с проблемой, с которой я столкнулся в их Telegram кнопке. Мне срочно нужно попробовать и другие их плагины! Виджет отлично работает, а еще у него отзывчивый интерфейс. Его легко настроить под себя. А общение с командой поддержки было было очень продуктивным.

Познакомьтесь с Telegram чатом в демо

Создайте свой виджет и добавьте его на сайт за пару кликов прямо из демо.

Часто задаваемые вопросы

Что такое виджет Телеграм чат для сайта?Это кнопка или окно чата, связанные с вашей учетной записью Telegram. Большинство владельцев веб-сайтов используют его, чтобы оставаться на связи со своей аудиторией или предоставлять своим клиентам консультации и поддержку.Каким образом я могу получить код установки приложения? Вы можете воспользоваться кодом сразу, как сформируете ваш виджет в онлайн демо, или непосредственно посредством Elfsight дэшборда. Как вставить Телеграм чат на сайт?

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

1. Отрегулируйте плагин в редакторе, это очень легко и не требует навыков программирования.
2. Не забудьте сохранить изменения.
3. Вставьте код в нужное место на странице или в макет.

Виджет подходит для CMS или конструктора сайта, которые я использую? На 100 %. Наши виджеты поддерживаются всеми конструкторами сайтов. Вот список лишь некоторых самых популярных из них: Adobe Muse, BigCommerce, Blogger, Drupal, Facebook Page, Joomla, jQuery, iFrame, Magento, Elementor, HTML, ModX, OpenCart, Shopify, Squarespace, Webflow, Webnode, Weebly, Wix, WordPress, WooCommerce, Google SitesКуда лучше всего установить виджет Telegram на сайт?Большинство владельцев сайтов предпочитают размещать виджеты чата на главной странице или на страницах продуктов, чтобы клиенты могли легко связаться с продавцом или службой поддержки.Посетитель задал мне вопрос Telegram чат, а я не смог ответить на него сразу же. Что делать?Вы можете ответить в любое удобное время – диалог с пользователем сохранится в истории вашей переписки.

Станьте одним из 305,165 клиентов Elfsight Apps

Откройте для себя еще более 50 эффективных приложений от Elfsight! Банковская карта не требуется. Никаких рисков!Получите скидку 20% прямо сейчас!

Используемые источники:

• https://habr.com/ru/post/354642/
• https://lifehacker.ru/v-telegram-novye-vidzhety-avtoudalenie/
• https://blogpost.kz/qub/posts/kak-sdelat-knopku-na-sajt-v-telegram-kanale
• https://habr.com/ru/post/264035/
• https://elfsight.com/ru/telegram-chat-widget/