Анимированная кнопка подпишись на Телеграм канал на сайте

Re:plain работает в WhatsApp, Facebook Messenger и в Telegram. Выбирайте тот мессенджер, который предпочитаете больше.

Первый веб-чат сервис, который работает прямо в вашем WhatsApp Facebook Messenger и Telegram
Получайте сообщения с сайта прямо в ваш мессенджер.
Неограниченное количество операторов и сайтов
Простые настройки, мощный функционал.

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

КАК РАБОТАЕТ ⚡RE:PLAIN
Получайте сообщения и заявки от клиентов через чат на вашем сайте
Что увидит ваш клиент на сайте

Re:plain работает прямо в вашем Telegram, WhatsApp или Facebook messenger.

Больше не нужны лишние платформы, личные кабинеты или приложения. У вас все под рукой, в том мессенджере, к которому вы привыкли.

Источник: replain.cc

Как сделать кнопку подписаться длинной?

Кнопки «поделиться» для сайта

Рассмотрим, как добавить социальные кнопки «поделиться» для вашего сайта. Для решения данной задачи мы не будем использовать сторонние сервисы, поэтому наши кнопки «поделиться» не будут оказывать отрицательного влияния на загрузку сайта и будут стабильно работать.

.share-buttons < display: flex; flex-wrap: wrap; >.share-buttons a < margin-bottom: 5px; width: 40px; height: 40px; >.share-buttons a:not(:last-child) < margin-right: 5px; >.share-buttons .facebook < background: url(«../img/share-btns.png») no-repeat left top; >.share-buttons .vkontakte < background: url(«../img/share-btns.png») no-repeat -168px top; >.share-buttons .ok < background: url(«../img/share-btns.png») no-repeat -126px top; >.share-buttons .twitter < background: url(«../img/share-btns.png») no-repeat -42px top; >.share-buttons .pinterest < background: url(«../img/share-btns.png») no-repeat -210px top; >.share-buttons .mail < background: url(«../img/share-btns.png») no-repeat -294px top; >.share-buttons .telegram < background: url(«../img/share-btns.png») no-repeat -672px top; >

Так просто можно добавить кнопки «поделиться» на ваш сайт.

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

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

Поделиться в фейсбук

https://www.facebook.com/sharer.php?u=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Поделиться вконтакте

https://vkontakte.ru/share.php?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Поделиться в ok

https://www.odnoklassniki.ru/dk?st.cmd=addSharest._surl=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫАДРЕС_ИЗОБРАЖЕНИЯ»

Поделиться в twitter

https://twitter.com/intent/tweet?text=ТАЙТЛ_СТАТЬИ(ЗАГОЛОВОК). Описание. Ссылка
https://connect.mail.ru/share?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ
data-media=»АДРЕС_ИЗОБРАЖЕНИЯ»

Используя данные ссылки, вы можете создать виджет абсолютно любого вида и размера. Например, вместо спрайта что мы использовали ранее — можете воспользоваться шрифтовыми иконками fontAwesome:

И далее добавлять необходимые стили.

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

Поделиться в Linkedin

Чтобы поделиться в Linkedin используйте следующий код.

Инлайн-кнопки

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

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

Обычные кнопки располагаются под полем ввода текста («Написать сообщение…»). Количество кнопок в строке определяется автоматически, в зависимости от количества кнопок и объема текста в них. На одном экране может быть не более восьми кнопок:

Инлайн-кнопки располагаются над полем ввода текста:

Как использовать инлайн-кнопки?

Возьмем, к примеру, такой экран. Изначально кнопки на нем будут отображаться в Telegram как обычные кнопки:

Есть два способа превратить эти обычные кнопки в инлайн-кнопки.

Добавить на нужный экран кнопку со ссылкой

Чтобы обычные кнопки превратились в Инлайн-кнопки, добавьте на этот же экран хотя бы одну кнопку-ссылку. Например, вы можете ссылку на ваш сайт.

• нажмите + КНОПКА
• введите название кнопки и нажмите Enter
• нажмите на значок ссылки
• вставьте URL на нужный ресурс
• нажмите Сохранить

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

После публикации снова протестируйте бота. В нашем случае кнопки располагаются на стартовом (самом левом и самом верхнем) экране, поэтому, чтобы проверить, пошлем боту /start .

Добавить «пустую» кнопку

Второй способ подойдет вам, если кнопка-ссылка не подходит для вашего сценария.

• нажмите + КНОПКА
• наберите пробел и нажмите Enter. Текст кнопки будет содержать только один символ — пробел
• нажмите на значок ссылки, вставьте любую ссылку
• нажмите Сохранить

Нажмите Опубликовать и дождитесь сообщения о публикации в канал.

Затем пройдите ветку заново. Например, пошлите боту /start .

Обычные кнопки превратятся в Инлайн-кнопки, а кнопка, которая содержит только символ пробела, отображаться не будет.

Как запомнить выбор пользователя

Вы можете получить текст выбранной инлайн-кнопки в Telegram через переменную $queryText . Для этого после блока с инлайн-кнопками добавьте блок Условия и сохраните значение $queryText в новую переменную $choice через выражение $choice = String($queryText).split(‘;’)[1] .

Особенности канала Telegram

Есть некоторые особенности отображения кнопок, которые нужно учитывать.

1. Не всегда сразу же можно увидеть новый вариант кнопок. Иногда нужно пройти по другой ветке бота, затем послать /start и вернуться на экран с кнопками.
2. Если у вас есть два экрана, которые идут друг после друга, и на первом экране обычные кнопки, а на втором инлайн-кнопки, то при перехода на экран с Инлайн-кнопками, обычные кнопки не исчезнут.

К примеру, возьмем два таких экрана. На экране, выделенном синим, обычные кнопки. На экране, выделенном зеленым, Инлайн-кнопки.

После нажатия на кнопку «цены» бот перейдет на второй экран, на котором должны отображаться Инлайн-кнопки. Но из-за особенностей канала, обычные кнопки не исчезнут.

Вы можете пользоваться таким поведением, если для вас даже удобно отображать два вида кнопок. Либо, если для вас такое поведение неудобно, разделяйте экраны с обычными кнопками от экранов с Инлайн-кнопками другими экранами текста с интентами вместо кнопок, чтобы не было такой последовательности.

Источник: help.aimylogic.com