Инструкция по созданию стикеров-информеров в Telegram от Aviasales

У нас в Aviasales всё быстро — как поиск дешёвых авиабилетов, так и создание новых штук.

На свежие мемы мы обычно реагируем со скоростью Молнии Маккуина (в комментариях, конечно же, вы вспомните 100 и 1 инфоповод, который мы пропустили), на небольшие проекты нужна пара дней.

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

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

Но сейчас речь не про чаты, а про стикеры-информеры. Мы позавидовали механике Emporium.ai с курсами валют. Ведь с билетами происходит всё то же самое — цена постоянно меняется.

Мы как-то уже писали, почему это происходит. К тому же покупка действительно дешёвых билетов — это больше про эмоции: находишь билеты в условный Милан за 3000 рублей и достаёшь карточку из кошелька. А в Telegram можно ещё и поделиться билетом с друзьями, чтобы не лететь в одиночку.

Стикеры регулярно обновляются автоматически, оставалось лишь связать базу данных цен на билеты с набором. Наш разработчик Павел Леонов рассказывает, как это сделать:

Если коротко, то цены в стикерах обновляются каждые пять минут. Мы целиком заменяем старые стикеры в паке новыми, используя Тelegram API. Специальный скрипт делает запрос к базе всех недавних поисков на Aviasales и выбирает актуальные цены и направления, потом передаёт отрисовки сервису, который и создаёт изображения для стикеров. Затем новые изображения автоматически загружаются в набор.

Павел Леонов, разработчик

А теперь подробнее.

Подготовка

Для начала нужно создать бота в Telegram, чтобы иметь доступ к API стикеров. Сделать это можно через официального бота @BotFather (подробнее о ботах в Telegram и их создании).

Для того, чтобы иметь возможность обновлять стикерпак в автоматическом режиме, нужно сначала завести его через бота, которого вы создали. Выполняем HTTP-запрос, для примера используем curl:

curl \ -F "name=myDynamicStickerPack_by_myStickerBot" \ -F "title=Мой стикерпак" \ -F "emojis=❤️" \ -F "user_id=telegramUserId" \ -F "png_sticker=@/path/to/mainSticker \ https://api.telegram.org/bot<:botSecret>/createNewStickerSet

Запрос создаёт новый стикерпак с основным стикером (в Telegram есть правило, по которому стикерпак без стикеров существовать не может). Обратите внимание, что внутреннее название стикерпака, созданного ботом, должно заканчиваться на _by_myStickerBot, где myStickerBot — имя созданного ранее бота.

У нас разработка генератора ведётся на JavaScript на движке Node.js. В качестве графического движка для рисования используем Node Canvas (адаптация классического HTML Canvas API для Node.js).

Разработка

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

  1. Генерация изображения.
  2. Замена изображения в стикерпаке.

Генерация изображения

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

Описываем функцию генерации изображения. Задаём размеры стикера (рекомендуемый — 512 на 512 пикселей). Затем комбинируем название направления, цену и тег и добавляем данные на подложку-шаблон.

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

Замена изображения в стикерпаке

Далее описываем процесс генерации и обновления стикера. Задаём эмодзи для идентификации стикера, генерируем новый, удаляем все стикеры, кроме основного, и заново создаём стикер.

После настраиваем cron на выполнение скрипта каждые пять минут. Готово. Вы прекрасны!

Мы решили начать с популярных и бюджетных маршрутов — Крым, Сочи, Санкт-Петербург. А ещё есть два особенных билетика: один подсказывает, куда дешевле слетать на ближайшие выходные, а второй — лучшее направление дня. Но мы лишь разогрелись.

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

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

Для этого мы и делаем рассылки, блог, социальные сети, геоквесты или стикеры-информеры. Мы как бы говорим: «Ребят, мы здесь! Каникулы могут быть не только в Новый год и на майских, можно дёшево ввязаться в приключения прямо на этих выходных — вот вам Калуга».

Кстати, нашу любимую Калугу — самое быстрое направление из Москвы — тоже непременно добавим в стикерпак, который доступен уже сегодня.

0
22 комментария
Написать комментарий...
Виталий Черепанов

показалось на картинке презерватив в упаковке!

Ответить
Развернуть ветку
Дарья Патютько

Aviasales. Твоя защита от дорогих билетов.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Vitaly O'Sacred

Авиасалез всегда с тобой!

Ответить
Развернуть ветку
Кирилл Бородин

У вас богатая фантазия :)) в реальности все прозаичнее :))

Ответить
Развернуть ветку
Ware Wow
Инструкция по созданию стикеров

А где инструкция?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Dasha Patutko

А там же как раз через прослойку ссылка на пак

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Кирилл Бородин

Это да

Ответить
Развернуть ветку
Groosha

Лучше тогда ещё и прямую. Я скопировал указанную выше, меня перебрасывает в браузер зачем-то, пришлось редактировать сообщение, исправляя на t.me.

Ответить
Развернуть ветку
Zoibana

А как этим пользоваться? Это чтобы посмотреть значение на стикере, его надо куда-то отправить?

Ответить
Развернуть ветку
Dasha Patutko

Можно просто зажать стикер: тогда получится посмотреть значение перед отправкой :)

Ответить
Развернуть ветку
Николай Цветнов

Вы большие молодцы. Спасибо, что поддержали идею и так прекрасно расскрыли материал.

Aviasales - заебись. Шлем лучи добра всей вашей команде!

Ответить
Развернуть ветку
Денис Абдуллин

Огромный респект от команды Emporium, классные у вас получились стикеры ;)

Ответить
Развернуть ветку
Юрий Владимиров

На стикере нет информации, в какие даты искать билеты по такой цене, как этим пользоваться?

Ответить
Развернуть ветку
Кирилл Бородин

Никак. Просто прикольно.

Ответить
Развернуть ветку
Антон Соколов

Денис, другая сторона - являться русской аудиторией и не сидеть вод VPN...

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Helge Totenkopf

Если айфон - vpn master хороший
Пока что..

Ответить
Развернуть ветку
Pavel Mukhunov

Со вчера ни один стикер не обновился.

Ответить
Развернуть ветку
Kokoulin Nikolay

Вот вам еще с погодой стикеры, но там только москва и питер
https://t.me/addstickers/weather_by_aimedservicesbot

Ответить
Развернуть ветку
19 комментариев
Раскрывать всегда