Как сделать карусель в телеграм

Как делать галерею / магазин / каталог / карусель / в телеграм боте

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

Основной принцип в применении функции изменения сообщения.

Структура бота следующая ��

Бот состоит из следующих частей:

1) Блоков отображения. Есть основной и блоки с первым товаром и последним. Эти блоки различаются только наличием кнопок «вперед» и «назад». В первом отображении нет «назад», в последнем — «вперед».Можно реализовать кольцевой показ, чтобы карточки показывались по кругу. Но не в этом примере 🙂

2) Блоки с изменением переменных «+1» и «-1». О них позже.

3) Условия перехода в основной блок отображения или первый/последний

Запись информации о товарах в переменные

Функция изменения сообщения с картинкой имеет два важных параметра: саму картинку и ее описание (текст под картинкой). Всю информацию о товарах записываем в переменные. Соответственно, их будет минимум 2, если нужно описание. Либо 1, если описание не нужно.

В этом примере я использую 3 переменные. В отдельную переменную сохранил цену. Сама цена тоже относится к описанию. Можно было обойтись и двумя переменными. Тут кому как удобно.

Сохраняем переменные в константы проекта ��

Фото указываются просто ссылкой на них. У меня они сохранены просто в облаке.

Важно! Помните, что фото должны быть легкими. Для этого нужно их оптимизировать. Можно загуглить «оптимизировать фото» и выйдет много сайтов, где это можно сделать.
Также достаточно использовать картинки с бОльшим размером 1000 пикселей.
Другой простой вариант: скиньте себе в Телеграм в избранное фото со сжатием. И Телеграм сделает все за вас. Останется только скачать.

И да, нужно сохранить токен телеграм бота в переменную, как указано в первой строке на скриншоте �� это пригодится.

Описания товаров я сохранял в стартовом блоке. Потому что, сохраняя в константах проекта, не получится сделать переносов строки. А в калькуляторе можно: + «\n» + как раз обозначает «добавить перенос строки» ��

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

В чем суть записи в переменные?

Есть три типа переменных: photo (фото), desc (описание), price (цена).
Есть три категории: столы, кресла, светильники.
И есть порядковый номер товара.

Меняя категорию и порядковый номер мы получим нужный товар ��

Создание карусели Telegram Bot?

Нужно создать карусель товаров в боте телеграмм.
На данный момент имеется бот, который выводит товары в корзине из базы данных. Хотелось бы что бы бот отправлял одно сообщение, а уже посредством кнопок, содержимое этих сообщений менялось.
Пример:


Нужно сделать примерно так же.

Список товаров который бот получает, для вывода товаров:
[(‘Смертельный яд паралича’, ‘Описание: Смертельный яд паралича’, ‘url_img’), (‘Смертельный яд антимагии’, ‘Описание: Смертельный яд антимагии’, ‘url_img’), (‘Смертельный яд’, ‘Описание: Смертельный яд’, ‘url_img’), (‘Волендранг’, ‘Описание: Волендранг’, ‘url_img’)]
Хотелось бы услышать алгоритм, реализации подобной фичи.
Спасибо за внимание!

• Вопрос задан более двух лет назад
• 1292 просмотра

Комментировать
Решения вопроса 1
Михаил Кростелев @twistfire92
Python backend developer

Смотря какой библиотекой вы пользуетесь.
Вам по сути нужно пользоваться методами
bot,edit_message_media() — для редактирования изображений
bot.edit_message_reply_markup() — для редактирования кнопок
параметры для этих функций можно подсмотреть в самой библиотеке.

Ответ написан более двух лет назад
Нравится 1 7 комментариев

Валерий @ApXNTekToP Автор вопроса

Мне тут алгоритм интересен, редактирую сообщение я методом edit_message_text в библиотеке telebot.
Я не совсем понимаю как заставить программу проходится по списку, и в зависимости от элемента в списке, редактировать сообщение.
На данный момент у меня есть ID сообщения который высылает бот, проблема состоит в идентификации элемента товара в высланном сообщении, для последующего изменения сообщения.
Т.е бот отправляет первый товар из списка, мне от этого товара приходит определенный callback, и мне нужно как то обработать этот callback, что бы вывелся следующий товар в списке.

Михаил Кростелев @twistfire92

Валерий, ну а какой-то код есть уже? Где именно затуп происходит?
И откуда бот получает список товаров? Есть ли возможность повлиять на формат получаемого списка? Его тоже вы формируете?

Валерий @ApXNTekToP Автор вопроса

Валерий @ApXNTekToP Автор вопроса
Михаил, Код имеется

def display_cart(self): # self это message try: global cart global counter counter = 0 connection = db.create_connection( "merch_telegram_bot_db", "postgres", "password", "127.0.0.1", "5432" ) query = q.interface_query[ 'display_product_cart'] + str(self.from_user.id) cart = db.execution_of_requests(connection, query) connection.close() cart_keyboard = key.cart_keyboard() bot.send_message(self.chat.id, "Корзина:\n") bot.send_message(self.chat.id, f"\n" f"\n" f"'>​" f";", parse_mode="HTML", reply_markup=cart_keyboard) except Exception as e: print('Фатальная ошибка!' + f'\n') return def callback_data_handler(self): # self это call (ответ inline кнопок) try: connection = db.create_connection( "merch_telegram_bot_db", "postgres", "password", "127.0.0.1", "5432" ) id_element = extract_id(self.data) if id_element[0] == 'cat': query = q.interface_query['product'] + id_element[1] product = db.execution_of_requests(connection, query) bot.edit_message_text(chat_id=self.message.chat.id, message_id=self.message.message_id, text=f'') for i in product: show_product_keyboard = key.show_product(i) bot.send_photo(self.from_user.id, i[5], caption=f'\n\n', reply_markup=show_product_keyboard) bot.answer_callback_query(self.id, show_alert=False) elif id_element[0] == 'prod': query = q.interface_query['cart_id_info'] + \ str(self.from_user.id) cart_id = db.execution_of_requests(connection, query) query = q.interface_query['add_product_cart'] data = (cart_id[0][0], id_element[1]) db.execution_of_requests(connection, query, data) InterfaceInteraction.alert(self, "Товар добавлен в корзину") elif id_element[0] == 'delete': print("Ok_delete") InterfaceInteraction.alert(self) elif id_element[0] == 'remove': print("Ok_remove") InterfaceInteraction.alert(self) elif id_element[0] == 'add': print("Ok_add") InterfaceInteraction.alert(self) elif id_element[0] == 'previous': print(self) InterfaceInteraction.alert(self) elif id_element[0] == 'next': print(cart) InterfaceInteraction.alert(self) elif id_element[0] == 'order': print("Ok_order") InterfaceInteraction.alert(self) elif id_element[0] == 'continue': print("Ok_continue") InterfaceInteraction.alert(self) else: InterfaceInteraction.alert(self) connection.close() except Exception as e: print('Фатальная ошибка!' + f'\n') return

Михаил Кростелев @twistfire92

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

Допустим вы выводите информацию о первом товаре в списке (Индекс 0), тогда при описании inline кнопок вы должны в кнопку следующего товара добавлять следующий индекс (1) в списке этих товаров. Для кнопки предыдущего — индекс последнего элемента в списке (-1 или len(data)-1, где data — ваш список), либо вообще не выводить эту кнопку.

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

9 примеров, как использовать карусель изображений в письме

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

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

Как использовать карусель изображений

Карусель можно использовать в рассылках для решения разных задач. Рассмотрим самые популярные варианты ее применения.

Демонстрация товара

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

Демонстрация кресла с нескольких ракурсов

Подборка видео

Этот вариант подойдёт тем, кто создаёт видео-контент. Добавьте в галерею несколько превью видеороликов и на каждое изображение прикрепите ссылку на видео. Так в одной галерее можно разместить сразу несколько видео с общей тематикой или из одного плейлиста.

Карусель с подборкой видео о сервисе Unisender

Ситуации использования товара

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

Галерея с фотографиями ночного светильника. Слайды показывают разные режимы подсветки и то, как смотрится ночник в интерьере

Список товаров или категорий на распродаже

Создайте слайды с товарами или категориями, которые участвуют в распродаже, и разместите их в карусели.

Подборка слайдов со скидками на разные категории товаров

Обзор локации

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

Обзор номера в гостинице

Сравнение нескольких вариантов товара

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

Подбор кроссовок по цвету

Список действующих акций

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

Слайды с акциями

Геймификация

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

Собираем пазл из картинок в карусели, чтобы получить промокод

Пошаговая инструкция

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

Карточки с пошаговой инструкцией

Далее рассмотрим, как добавить карусель в письмо.

Как получить разрешение на отправку AMP

Перед отправкой любых AMP-писем нужно получить разрешение на использование этой технологии от почтовых сервисов. О том, как это сделать, мы подробно написали в статье «Как получить разрешение на отправку AMP-писем».

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

Создайте письмо в конструкторе Unisender.

На панели слева выберите блок «Карусель» и переместите его на рабочую область.

Чтобы добавить первую картинку, кликните на кнопку «Обзор».

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

Выберите картинку и кликните «Вставить».

Чтобы добавить следующее изображение в карусель, выделите этот блок в письме, а на панели слева нажмите «Add new slide». В открывшемся окне выберите нужную картинку.

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

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

• alt — альтернативный текст, который увидит получатель письма, если картинка не загрузится;
• link — ссылка, на которую попадёт получатель, если кликнет на картинку.

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

Также вы можете включить точки навигации и задать для них цвет.

Так кнопки навигации выглядят в карусели.

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

Для этого добавьте блок «Картинка».

Разместите его ниже или выше карусели, выберите статичное изображение или гифку, а в свойствах включите AMP в разделе «Скрыть».

Так блоки выглядят в редакторе.

Метка с зачёркнутым глазом и надписью AMP в нижнем блоке показывает, что он будет скрыт в AMP-версии письма

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

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

В качестве адреса получателя тестового письма используйте ящик на Gmail, Mail.ru или Yahoo. На данный момент только эти сервисы поддерживают AMP.

Так выглядит письмо в ящике Gmail с поддержкой AMP:

Карусель внутри письма в ящике Gmail

А так — в ящике Яндекса. Это сервис не поддерживает AMP.

Как создать рассылку в Telegram

Рассылки в Telegram используется бизнесом для рекламы товаров или услуг, информирования людей о любом событии, приглашении или приветствии. В SendPulse можно отправлять рассылки в Telegram с текстом, изображением, файлом и кнопкой перехода на свой ресурс или запуска цепочки для массового оповещения по всей базе или сегментированной группе подписчиков.

Подписчиками на Telegram чат-бот — это пользователи, которые перешли по ссылке на ваш бот и нажали «Запустить» или подписались через виджет, добавленный на сайте. А также подписчиком может быть канал или группа, где вы являетесь администратором и куда добавили своего бота (этот канал будет отображаться как отдельный контакт в «Аудитории» чат-бота).

Чтобы создать рассылку, в разделе «Чат-боты» перейдите на вкладку «Главная» и нажмите «Создать рассылку» (Create campaign).

Содержание

Выберите подключенный бот

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

Сегментируйте аудиторию

Чтобы фильтровать получателей, выберите чекбокс «Сегментировать получателей» (Segment recipients). Ваша рассылка будет отправлена только тем, кто отвечает заданному условию. Например, если вы собираете дополнительные переменные во время подписки, создаете глобальные переменные или устанавливаете тег, вы можете производить за ними сегментацию по условиям «Переменная» и «Теги».

Можно активировать опцию «Активен за последние сутки», чтобы сделать рассылку тех, кто взаимодействовал Telegram ботом за последние 24 часа.

Чтобы добавить несколько условий для более персонализированного сообщения, нажмите кнопку «Добавить условие» (Add the list segmentation criteria). А когда определите ее, нажмите кнопку «Применить» (Apply).

Добавьте текст сообщения

Введите сообщение. Ограничение по длине одного текстового блока – 2000 символов.

В него еще можно вставлять переменные и эмодзи. Для этого нажмите <> в правом верхнем углу текстового поля и выберите требуемую переменную из списка. Каждому пользователю пришлет сообщение со значением переменной из его контакта. Например, начать сообщение с обращением к имени и включить данные по регистрации или заказу.

Добавьте кнопку

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

Нажмите кнопку «Добавить кнопку» (Add button).

Продолжить цепочку

Выберите тип кнопки «Продолжить цепочку» (Continue flow) и цепочку, которая отправится по щелчку на кнопку.
Добавьте текст кнопки. Ограничение по длине – до 256 символов.

Ссылка

Вы можете добавить ссылку на внешний источник и запуск цепочки сообщений после перехода подписчика по ссылке. Выберите тип кнопки «Ссылки» (URL) и добавьте ссылку.

Поддерживается только протокол https:// . Если вы вставите ссылку в формате http:// , Telegram бот не отправит сообщение.

Также для кнопки типа «Ссылка» (URL) вы можете добавить ссылку на веб-приложение, например, на одностраничный интернет-магазин. Активируйте опцию «Открыть во всплывающем Web-App окне» (Open in web app pop-up), чтобы по ссылке открывался попап для перехода к приложению.

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

На самой странице можно добавить JS-код от Telegram, который работает с данными из мессенджера и передает информацию о подписчике.

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

Оплата

Доступно на тарифе Pro и выше, а также на время бесплатного семидневного пробного периода

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

Вы также можете продумать и добавить сценарий цепочки чат-бота после успешной оплаты.

В одной рассылке можно добавить до 25 кнопок всего и до 4 кнопок в ряд.

Добавьте элементы

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

Для этого нажмите кнопку «Добавить кнопку» (Add botton) и выберите нужный элемент.

Текст

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

Картинка

Добавьте картинку в форматах JPG и PNG размером до 2 MB, а также краткое описание.

Карусель

Доступно на тарифе Pro и выше, а также на время бесплатного семидневного пробного периода

В одну карту можно добавить изображение, заголовок – до 32 символов, описание – до 80 символов и 3 кнопки со ссылкой на другую цепочку, внешний источник или форму оплаты. Карточек может быть не более 10 в карусели. Чтобы добавить новую, щелкните плюс справа.

Файл

Поддерживаемые форматы файла: zip, pdf и gif. Максимальный размер вложения – 20 MБ. Вы можете загрузить файл со своего устройства или добавить на него ссылку.

Видео и аудио

Доступно на тарифе Pro и выше, а также на время бесплатного семидневного пробного периода

Вы можете загружать медиаматериалы до 20 MB в формате mp4 для элементов «Аудио» и «Видео-заметка» и в формате MP3, MP4 и ogg для элемента «Видео».

Для отправки видеосообщений используйте элемент «Видео-заметка». Обычно такие видео записываются на фронтальную камеру. Загруженное видео будет обрезано, чтобы кадр был в форме круга, а продолжительность не превышала 1 минуту.

Предварительный просмотр

Элементы можно перемещать вниз и вверх, удалять и копировать. Для этого наведите на нужный блок и справа появятся кнопки.

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

Если вы добавили весь необходимый контент, нажмите кнопку «Далее» (Next).

Выберите время отправки

В следующем окне можно выбрать название рассылки – его будете видеть только вы в списке «Мои рассылки».

А также время отправки(когда отправлять) — можно отправить сразу или запланировать на определенную дату и время.

Нажмите «Отправить рассылку» (Send a campaign) – ваша рассылка отправится получателям.

Telegram имеет ограничение на отправку – 100 сообщений в секунду. Поэтому отправка на обширный список может происходить постепенно.

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

Также вы можете исключить из списка получателей группы и каналы, чтобы отправить рассылку только отдельным подписчикам. Для этого активируйте опцию Исключить из рассылки каналы и группы (Exclude channels and groups from campaign).

Редактирование запланированной рассылки

Если вы запланируете отправку на другое время, то после создания рассылки вы можете отредактировать ее еще раз до отправки. Перейдите в список рассылок, выберите рассылку и в поле «Статус» нажмите «Редактировать» (Edit). Чтобы отменить отправку рассылки, нажмите «Отменить».

Удаление рассылки

Доступно на тарифе Pro и выше, а также на время бесплатного семидневного пробного периода

Если вы случайно отправили рассылку, вы можете удалить её у получателей. Для этого перейдите в список рассылок, нажмите на раскрывающееся меню для нужной рассылки и выберите «Удалить сообщения рассылки» (Delete campaign messages). После этого подтвердите удаление в окне, которое появится. Вы также можете удалить сообщение на странице самой рассылки в поле «Статус» (Status).

Анализ рассылки

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

Для этого перейдите на страницу «Мои рассылки» и щелкните нужную рассылку из списка. Перейдите на страницу выбранной рассылки, где вы увидите статус и статистику рассылки, а также список получателей.

Вы также можете экспортировать файл CSV вместе со списком получателей кампании и статусом доставки в рамках платного тарифного плана.